Popping Text
A word whose letters spring in one at a time, scaling up to rest instead of fading.
Build a word whose letters pop in one at a time. Structure: split a SHORT word, one or two words maximum, into one span per character in a flex row. The motion per letter: scale from 0.3 to 1, opacity 0 to 1, y from 8 to 0, on a SPRING with stiffness 520 and damping 16, staggered 60ms apart in reading order. Four things decide whether this lands: 1. Scale, not opacity. A fade is the entrance every headline already has. Growing to rest is what makes this one feel like it arrived somewhere. 2. A spring, not a duration. The small overshoot at the end IS the character of the effect, and no ease curve gives it to you honestly. 3. transformOrigin at 50% 80%, near the baseline. Scaling from the centre makes letters look like they inflate; scaling from near the baseline makes them look like they land. 4. 60ms of stagger, no more. Past about 90ms the letters stop belonging to each other and it reads as six separate animations instead of one word. Keep it to one word. Thirty letters popping is a seizure, not an entrance. If you need a whole line, animate by word instead. Make it a replayable button (data-demo-trigger) and re-key the letters per run so it restarts cleanly. Accessibility: mark the split spans aria-hidden and put the real word in the button's accessible name, or a screen reader announces it one letter at a time. Under prefers-reduced-motion, render every letter at full scale and full opacity at once, with no stagger. Colors as tokens: primary ink. This effect needs no accent; the motion is the emphasis. 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.