Line Stagger Paragraph

Lines of copy rising out of their own masks one after another, closed by a drawn accent rule.

Build a line-by-line masked paragraph reveal. Structure: break the copy into lines, each wrapped in its own overflow-hidden container (the mask). Inside each mask, the line starts translated down 110% - fully hidden below its own baseline slot. The reveal: lines rise to y 0 in order, 0.6s each with a decisive ease like cubic-bezier(.22,1,.36,1), staggered ~140ms. Because each line emerges from its own mask, the text appears to be printed upward out of invisible slots - much more architectural than a fade. After the last line lands, a short accent rule draws itself under the paragraph (scaleX from 0, transform-origin left, 0.5s) - the signature that closes the reveal. Optionally set the final line in the accent color. Trigger on scroll into view, once. Add 1-2px vertical padding inside each mask so descenders (g, y, p) don't clip. Note: this pattern needs manually broken lines (or a line-splitting utility) - it's for display copy of 2-4 lines, not flowing body text. Accessibility: the lines remain real text in reading order; under prefers-reduced-motion everything renders in place. Colors as tokens: ink text, one accent for the rule and closing line. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data