Skip to main content
← Back to list
01Issue
BugOpenSwamp ClubPublic
AssigneesNone

Relationships

#2727 Decorative animations outside the Lab still repaint on the main thread

Opened by skunk-ape · 9/29/2026

Follow-up to #2395. The fix for #2395 is deliberately limited to the Lab: names rendered by OperativeName and the Lab list's author button carry data-text, and their tier shimmer now runs on the compositor. Every other decorative animation still runs on the main thread.

Remaining main-thread animations

All of these animate a property the compositor cannot run (background-position on clipped text, text-shadow, box-shadow, border-color, filter: drop-shadow()/blur()). Each one forces a style recalc, and usually a repaint, every frame.

  • Gradient tier names from other renderers: the profile headline and tier line (ProfileIdentityHeader), TierSection, TierBadge, StyledName, OperativeCard, extension namespaces (ExtensionRegistry), BadgeChip, and the name-style editor swatches.
  • Glitch headings (glitch-text / glitch-text-subtle, animating rgb-split text-shadow): the homepage hero, /feed, /feed/submit, admin pages, AuthPageLayout, the error page, the collective invite page, and MiniLeaderboard.
  • Name effects: tier-origin-glow (prismatic-glow text-shadow), badge-pulse (drop-shadow filter), glitch-text and text-corrupt names.
  • Badges: OG (border and glow cycle), I Was Here, Doctor Evil (aura, border and icon flicker), Disciple, the explorer plates, the quest capstone, first-tier chips, and Genesis pills g3 to g5 and fg3 to fg5.
  • Other: border-glitch panels (cyber-border cards, with backdrop blur), pulse-glow buttons, .tier-card.current, the counter glow and the typing caret on the homepage.

One main-thread animation keeps the whole page busy. A single steps() or text-shadow animation anywhere makes Chromium produce a frame every frame, and every layer on the page pays for it. The fix has to reach zero per page, not merely reduce the count.

Measurements (headless Chromium, main thread busy)

Page Legacy All recipes applied (not shipped)
A page containing every effect, 9 of each 85–95% 0.2%
/u/<ancient-tier operative> 19–24% 0.2%
/extensions 11–17% 0.2%
/feed 8–10% 0.1%
Homepage 12–18% 0.7–0.8%

The recipe column comes from a prototype in which every family used the compositor, including headings.

Recipes that worked

  • Gradient text: give the element data-text, then cross-fade two attr(data-text) copies, each holding the gradient at a later phase, by opacity. This is what #2395 shipped.
  • Box-shadow auras: keep the resting shadow on the element, and put the peak shadow on an unfilled ::before whose opacity breathes.
  • Background shimmers (Genesis pills, capstone): a ::after with background: inherit at the opposite phase, cross-faded by opacity.
  • Border colour cycles: move the border to a pseudo-element and step filter: hue-rotate(). For cyber-border, draw both corner brackets from one pseudo-element with a static two-corner mask.
  • Glitch and chromatic splits: magenta and cyan attr(data-text) copies behind the text, moved by transform.
  • Filter pulses: hold the drop-shadow() static and animate brightness() only. Chromium composites brightness, hue-rotate and opacity, but not drop-shadow or blur.
  • Typing caret: an inline ::after caret that blinks by opacity.

Pitfalls found

  • Blend modes (mix-blend-mode: color / color-dodge) render as a solid gradient block. Any isolating ancestor breaks them, and the site layout's relative z-10 wrapper is one.
  • The animation shorthand collides. tier-origin-glow masks badge-pulse, and tier-ancient-text masks glitch-text. Freeing the element's own animation revives effects that are hidden today.
  • Flex items are blockified, so the glitch shake does reach names in flex rows. Scope name recipes by element and data-text, not by assumed display.
  • Some headings already carry data-text (FEED, SUBMIT, TOP OPERATIVES, NO_DATA_AVAILABLE), so data-text alone does not identify a name.

Decision needed

For #2395, keeb chose to keep the glitch headings and the homepage exactly as they are, and to leave the masked effects hidden. This issue needs that decision revisited, heading by heading, before those surfaces change.

02Bog Flow
◉OPEN○TRIAGED○IN PROGRESS○SHIPPED

Open

9/29/2026, 8:11:33 PM

No activity in this phase yet.

03Sludge Pulse
Editable. Press Enter to edit.

system commented 9/29/2026, 8:11:34 PM

Classified automatically when this issue was filed.

  • Source: Swamp Club

If you feel this classification is incorrect, add a ripple to tell us so.

Sign in to post a ripple.