Text reveal animations in CSS.
The first words on screen set the tone of a film, so how they arrive matters more than how they leave. This group holds every way a line of type enters: from under a mask, letter by letter, typed, flipped, scrambled, or wiped in as a caption.
Each component is a CSS and Web Animations snippet with the exact stagger, curve and timing written out, so an agent copies it and changes the words.
Pick by what the copy is, not by the effect.
| Component | Use it when |
|---|---|
| Mask rise | A quiet editorial headline. The mask box is tall enough that descenders are not cut. |
| Tracking collapse | A title or wordmark that should land soft and sharpen as it arrives. |
| Scale punch | One hero word that needs to hit hard on a beat. |
| Caret typing | A command, a prompt or a name typed in, where the caret becomes the next element. |
| Text scramble decode | A codename revealed as a lookup, in a mono face. |
| Caption karaoke | A spoken line, where the word being said lifts to full ink. |
| Lower third | A person is on screen and needs a name and a role. |
All 25 components in reveal a title
a line of type enters from under an invisible edge; the mask box is tall enough for descenders
Mask rise
a line of type enters from under an invisible edge; the mask box is tall enough for descenders
a title or wordmark arrives: letters converge from wide tracking while the word sharpens
Tracking collapse
a title or wordmark arrives: letters converge from wide tracking while the word sharpens
a command, a prompt, a name typed in; the caret moves with each character then becomes the next element
Caret typing
a command, a prompt, a name typed in; the caret moves with each character then becomes the next element
a word lands letter by letter, 45 ms apart, on one exact curve
Per-letter stagger
a word lands letter by letter, 45 ms apart, on one exact curve
the hero word hits from 1.4x and recoils on the overshoot curve; a full stop pops after it
Scale punch
the hero word hits from 1.4x and recoils on the overshoot curve; a full stop pops after it
a name or number is decided: each letter is a tile that flips through seeded glyphs on a hinge and locks left to right
Split-flap resolve
a name or number is decided: each letter is a tile that flips through seeded glyphs on a hinge and locks left to right
one word in a held sentence rolls through 3 or 4 values and lands; the sentence reflows its width
Word swap slot
one word in a held sentence rolls through 3 or 4 values and lands; the sentence reflows its width
copy resolves word by word from blur with a slight rise; no mask, so nothing cuts a descender
Blur word cascade
copy resolves word by word from blur with a slight rise; no mask, so nothing cuts a descender
the type is a window onto a rich picture: the frame opens tight on image, pulls back to the title, and the layers keep moving inside the fixed letters
Text as mask
the type is a window onto a rich picture: the frame opens tight on image, pulls back to the title, and the layers keep moving inside the fixed letters
one hero word arrives as an outline, letter by letter, then an accent floods each letter from its baseline on the beat
Outline fill
one hero word arrives as an outline, letter by letter, then an accent floods each letter from its baseline on the beat
an old word or price is struck through by a tilted line drawn left to right, it dims and shrinks, and the new value rises in beside it character by character
Strikethrough replace
an old word or price is struck through by a tilted line drawn left to right, it dims and shrinks, and the new value rises in beside it character by character
a title arrives with many things around it: a grid of tiles enters in a wave by distance from the title, 70 ms per tile, each tile pushed out from the source on a spring
Grid stagger wave
a title arrives with many things around it: a grid of tiles enters in a wave by distance from the title, 70 ms per tile, each tile pushed out from the source on a spring
a name or codename is revealed as a lookup: a mono line of seeded wrong glyphs locks left to right, each fresh letter flashes accent, then a verified line appears under it
Text scramble decode
a name or codename is revealed as a lookup: a mono line of seeded wrong glyphs locks left to right, each fresh letter flashes accent, then a verified line appears under it
a line with a cycling word is replaced by the answer: the word rolls through three values, then the hero crashes in on a long slide and its edge pushes the whole text group out of the frame
Ticker takeover
a line with a cycling word is replaced by the answer: the word rolls through three values, then the hero crashes in on a long slide and its edge pushes the whole text group out of the frame
one phrase stays pinned while a tape beside it is hard-cut through eight words, slow then fast, and holds on the last; a brand lockup then drops in under the still anchor
Anchor cycle
one phrase stays pinned while a tape beside it is hard-cut through eight words, slow then fast, and holds on the last; a brand lockup then drops in under the still anchor
a person is on screen: an accent rule grows, a plate wipes open, the name rises from a mask and the role follows, then the card leaves faster than it came
Lower third
a person is on screen: an accent rule grows, a plate wipes open, the name rises from a mask and the role follows, then the card leaves faster than it came
a title arrives bent by moving water and settles to sharp type: an SVG turbulence map drives a displacement that drains to zero by 1.15 s, then the type holds still and readable
Liquid displace
a title arrives bent by moving water and settles to sharp type: an SVG turbulence map drives a displacement that drains to zero by 1.15 s, then the type holds still and readable
one element flies in and stops on a beat: five time-offset copies of it trail with falling opacity, then fold into the lead on the hit frame while it squashes and recoils
Echo trail
one element flies in and stops on a beat: five time-offset copies of it trail with falling opacity, then fold into the lead on the hit frame while it squashes and recoils
a spoken line runs as captions: the word being said lifts to full ink and one soft pill glides word to word on a [[t, wordIndex]] speech table
Caption karaoke
a spoken line runs as captions: the word being said lifts to full ink and one soft pill glides word to word on a [[t, wordIndex]] speech table
editorial captions: one or two key words per line in a contrasting italic serif, and the next caption replaces the last on a short line-by-line mask cut
Caption editorial
editorial captions: one or two key words per line in a contrasting italic serif, and the next caption replaces the last on a short line-by-line mask cut
one hero word arrives as a wave: weight and width of a variable face crest letter by letter, left to right, then settle at a firm weight
Variable weight wave
one hero word arrives as a wave: weight and width of a variable face crest letter by letter, left to right, then settle at a firm weight
a line of words rides an SVG path with startOffset set from the seek time, front word first, and settles readable on the curve
Text on path
a line of words rides an SVG path with startOffset set from the seek time, front word first, and settles readable on the curve
a line arrives hard-edged: every character, word or line rises from under its own clip edge, staggered from the first, last, middle or any item on the motion library’s spring (port of fancy)
Vertical cut reveal
a line arrives hard-edged: every character, word or line rises from under its own clip edge, staggered from the first, last, middle or any item on the motion library’s spring (port of fancy)
a word or label rolls letter by letter: each letter slides out of its clip box and the same letter slides in; forward or pingpong, stagger or seeded random order (port of fancy)
Letter swap
a word or label rolls letter by letter: each letter slides out of its clip box and the same letter slides in; forward or pingpong, stagger or seeded random order (port of fancy)
a lowercase line turns over as boxes: each character is a cube that rolls 90 degrees about its centre to the same character on the next face (port of fancy)
Letter 3D swap
a lowercase line turns over as boxes: each character is a cube that rolls 90 degrees about its centre to the same character on the next face (port of fancy)
Rules that come with this group
Text must hold still long enough to read. Add a hold after the arrival instead of slowing the move.
A reveal with a mask cuts descenders unless the box has room, which is why mask-rise makes the mask box tall enough. blur-word-cascade avoids the problem by using no mask at all.
Seeded glyphs keep the scramble and flip components deterministic: flap-resolve and text-scramble-decode use the same wrong letters in every render.