Text Effects

Both headings are painted through a background, which is the risk: transparent ink over a background that did not paint is an empty line. The gradient only exists inside an @supports guard for background-clip, and a forced-colors block puts real ink back — turn on Windows High Contrast or Increase Contrast and both headings go solid rather than blank. Every stop is a color-mix of primary or accent into foreground, so the ramp stays near the ink your theme already picked.

The glint is a mix with currentColor, never a replacement, so the brightest point of the pass still carries half the colour you set. Unlike the gradient the whole treatment is behind prefers-reduced-motion, not just the animation: a frozen shimmer is a word that is randomly brighter in the middle, which says nothing. Stopped means plain text here.

Watch the line either side of the word: it never twitches, because the words are grid items sharing one cell, so the box is the widest word without anything being measured. Exactly one word is on screen at any instant — the opacity is binary, not a crossfade — and the last word hands back to the first with no seam. Only the first word is real text; the stack is aria-hidden, so nobody hears the list read out as a pile.

Reload to watch it type. The reveal clips a percentage of the line's own box rather than animating a width in ch, so the last step is exactly the whole line in any font — a ch-width typewriter overshoots or stops short in anything but monospace. The mono line below is the version where one step is genuinely one character. The caret's blink is floored at 1.25Hz in the stylesheet, so the dial can only make it slower.

Scroll the panel. One timeline on the container drives every part, so a heading arrives as one gesture and not as forty unrelated events; the stagger moves each part's start only and the last part ends at exactly entry 100%, which is reachable from every scroll position — so the tail of a sentence can never stay invisible. Note the spaces survive in both: whitespace is never split and never animated.

Scroll the panel and watch the marker draw itself under the words. It is the element's own background, so it sits behind the text with no extra box to stack — and the sweep grows the stroke without ever changing its colour, which is how the contrast holds at every point and not only at the end. The marker is 18% primary mixed into transparent, so the ground under the words stays a few percent from the page's own.

Scroll the panel. rise, blur, fade and scale differ by a keyframe and nothing else, which is why they are one prop rather than four components — between them they cover the ten named reveal variants the animation libraries ship separately. Direction is a dial, not an effect: the last line sets a negative distance and an inline shift, so it arrives from the top right.

The ghosts are ::before and ::after reading attr(data-text), so there is exactly one text node here — nothing to un-hide, nothing extra to select. content: attr(data-text) / "" is the alt-text form, which hands assistive tech an empty string instead of reading the heading three times. Each ghost is fully clipped for most of its cycle and the base copy is never dimmed, so the words stay legible at every frame; the rate is floored at 1.2s.

Scroll the panel for the second one. A hollow letter is a transparent fill plus a stroke, and an engine with the fill and no stroke would render an invisible heading — so both live inside one @supports that tests for both, and the forced-colors floor puts solid ink back and zeroes the stroke. The filled variant rests filled: no support, reduced motion or no stylesheet all land on solid text, never on an empty outline.

The one effect here that does not move, deliberately. The published versions drive both of these from the pointer, which is a client boundary and an effect that does not exist on a touch screen — this ships the part that is real for every reader. depth keeps one colour for every layer so the copies read as a side wall; echo widens the step and fades the alpha so they read as motion already past. The shadow is always behind the glyphs, so the ink being read is untouched at any layer count.

This is the single most important thing the item does. Every effect above, rendered exactly as it lands for a consumer who never imported the stylesheet and for a reader with prefers-reduced-motion: reduce — plain, correct, readable text with nothing missing and nothing waiting for a trigger. The rotation shows one word, the typewriter shows its whole line, the split shows its whole sentence, the marker is drawn in full rather than at zero, the glitch ghosts stop existing and the outline goes solid. DepthText keeps its extrusion because it never moved: this panel is the reduced-motion path, and with no stylesheet at all that line is flat too.