React Stagger Animation
Stagger is the delay you put between siblings so a group arrives as a sequence instead of a block. Thirty-four components here use it: letters peeling off a word, rows entering a list, cells lighting across a grid, neon tubes striking one at a time, particles seeded out of phase. The interesting number is never the duration. It is the offset between items, and every one of these exposes it as a control you can drag.
25 components · live previews
In This Collection
Barcode
A procedural barcode whose bars light up like piano notes, looping on autoplay or scrubbed by scroll.
Stagger
Letters Pull
A per-letter pull-up reveal. Letters rise, sharpen from a blur, and fade in with a stagger.
Stagger
Scramble Text
Ciphered glyphs boiling out of noise and resolving into words. A decode cascade that settles character by character, a hover that re-scrambles on demand, or a continuous low glitch that keeps the type restless, each freshly-resolved letter flashing accent before it cools to ink.
Stagger
Lumen
Copy that lights up as you read it. Words ahead sit dim and unfocused, and stay lit once you pass them.
Stagger
Redact
Copy that arrives fully classified under solid bars, then declassifies word by word. Each bar clears its own word and leaves an amethyst edge behind as the only evidence it was ever there.
Stagger
Split Flap
A Solari departure board. Every column walks the charset one flap at a time until it reaches its letter, so the word is never revealed. It is arrived at, with a real hinged half falling away as the next one seats behind it.
Stagger
Reflow
Text whose words keep their identity when the line breaks move. Narrow the measure and the sentence travels instead of re-wrapping.
Stagger
Neon
A neon sign, with everything that is wrong with a neon sign. Tubes strike one at a time rather than together, each settling at its own moment inside the ignition. The steady state carries a mains hum, and every so often one tube gives up for a third of a second and comes back. The glow is baked once per letter into a sprite, so a frame is a handful of draws no matter how wide the word, and the word itself never stops being a real, selectable text node underneath.
Stagger
Inscribe
Text engraved stroke by stroke. Every character is a real SVG tspan with native kerning and selectable words, wearing the uniform-dash trick, because glyph outlines expose no pathLength and measuring their true perimeter has no API: the chisel simply travels each letter at its own apparent speed. When a stroke closes, its fill carves in after a beat, and the engraved finish darkens the fill and adds an inset relief so the word reads as cut into the panel rather than printed on it. The whole timeline runs on the animation-loop clock, so the bench pause freezes the chisel mid-stroke, and with no JavaScript at all the text simply sits there finished.
Stagger
Word RevealPro
A scroll-scrubbed word reveal — each word brightens and rises as it enters the viewport, tied directly to scroll position.
Stagger
KineticPro
Type with mass: every glyph is its own spring, and the squash and stretch are read back off that spring rather than authored.
Stagger
Blueprint Card
A technical-drawing card. Dashed envelope, accent rules, corner nodes, and a soft glow that draw in on mount.
Stagger
Corner Letters
Four glyphs pinned to the container corners that blur-and-scale in on mount and dissolve out on exit.
Stagger
Stagger Menu
A menu overlay that blooms open as a clip-path circle spring while items stagger in with blur and rotation, then collapses back to its pill.
Stagger
Dissolve
An element disintegrates into drifting shadow-motes on dismiss, and reforms on command.
Stagger
Sigil
An SVG crest that traces itself in when it scrolls into view, stroke by stroke.
Stagger
Passcode
A one-time-code field whose cells answer every keystroke. Each character lands compressed and springs back, a paste distributes across the row rather than filling it on one frame, a wrong code shakes and clears itself, and a right one folds the whole row into a tick. Underneath there is exactly one real input holding the whole code, which is what keeps SMS autofill, password managers, select-all and a screen reader working. None of those survive six inputs with maxLength one.
Stagger
Intro AnimationPro
A wind front sweeps the wordmark right to left. The instant it reaches a glyph the text hands off to a baseline-aligned field of GPU grain — same pixels, same colour, no seam — which peels crown-first and drifts away as smoke through a curl field. The backdrop opens behind it to reveal the page. Mount it over your app and unmount on onDone.
Stagger
Radial MenuPro
Press and hold anywhere and the options fan out from the point you pressed. Selection is resolved from the pointer's angle rather than by hit-testing the options, so every target is an infinite wedge — commit to a direction and you can throw the pointer as hard as you like and still land it.
Stagger
Diff Review
A review surface for a patch an agent has proposed. Accept or reject each hunk, fold long runs of unchanged lines away, and flip between unified and split. Switching views does not redraw the diff: every line is a shared element that flies from the stream into its column and back, so you never lose the line you were reading.
Stagger
Swarm
Up to a quarter of a million particles integrated entirely on the GPU, morphing between words and solids, with a drag-orbit camera. Position and velocity live in floating-point textures and never come back to the CPU. Text targets are sampled once out of an offscreen canvas, so the shape can be any string with no font atlas.
Stagger
Stream
An AI response surface that streams the way live chat UIs stream. A shimmer while the model thinks, tokens arriving on an irregular clock and blurring into place, a generation caret riding the last word, and stop and regenerate controls that actually interrupt. The cadence rides the animation clock rather than timer chains, so pausing the bench freezes generation mid-word. Only the trailing window of tokens are live animated elements, and everything older folds into one static text node, so a long answer never accumulates a thousand springs. An invisible ghost of the full answer holds the final height, so neither the thinking-to-streaming swap nor the stream itself ever moves layout.
Stagger
MasonryPro
A Pinterest-style grid where every item drops into the shortest column, packed by measurement rather than by a shared row baseline.
Stagger
Shard OrbitPro
A giant crystal monolith turning on its axis in a glitter field, or a halo or helix of instanced shards lit by the pulsing core, drag-orbited beside left-aligned copy, fully GPU-driven.
Stagger
Depth StagePro
A DOM hero stage where any children become parallax layers in real 3D. Pointer-tracked tilt, spring physics, a following spotlight, depth of field, staggered entrance, zero canvas.
Stagger
The Terms
- Stagger
- Animate several items one after another with a small delay between each, creating a cascade.