How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Line splitting: the text is split into its real rendered lines (wherever the browser wraps it) and each line is wrapped so its bar is exactly as wide as that line. Lines are re-measured on resize.
- Per line: the bar grows scaleX(0 → 1) from the left over 0.75s. The line's text turns on at that instant, then the bar shrinks scaleX(1 → 0) towards the right over another 0.75s. Both halves use cubic-bezier(0.86, 0, 0.07, 1), a slow start and end with a fast middle.
- Stagger: line 2 starts 0.15s after line 1, line 3 after 0.30s, and so on.
- Trigger: the block starts once its top reaches 90% of the viewport height. It plays once, and blocks that were scrolled past (a jump link, a refresh halfway down) play immediately.
- Bar colour: any colour per block. The demo uses the accent on the big headings and ink on the paragraphs.
- Demo page: full-height sections with centered text. The headings are 96px uppercase in the accent, half the page wide, over a photo. The paragraphs are 48px, 41% wide, on the plain ground. Each line is centered on its own. A fixed nav uses mix-blend-mode: difference so it reads over both photos and the plain ground.
- Under 1000px: headings 48px and 72% wide, paragraphs 24px and 68% wide, with 32px section padding.
- Fallbacks: reduced motion and no JavaScript show the text straight away with no bars.