# Text reveal animations in CSS

> Text reveal animations for video in CSS and Web Animations: masked rises, staggers, typing, captions and 3D letter rolls.

Canonical: https://vawe.dev/video-components/group/reveal-a-title
Last updated: 2026-11-03

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.

25 components, 25 with a clip.

## Pick by what the copy is, not by the effect

| Component | Use it when |
| --- | --- |
| [Mask rise](https://vawe.dev/video-components/mask-rise) | A quiet editorial headline. The mask box is tall enough that descenders are not cut. |
| [Tracking collapse](https://vawe.dev/video-components/tracking-collapse) | A title or wordmark that should land soft and sharpen as it arrives. |
| [Scale punch](https://vawe.dev/video-components/scale-punch) | One hero word that needs to hit hard on a beat. |
| [Caret typing](https://vawe.dev/video-components/caret-typing) | A command, a prompt or a name typed in, where the caret becomes the next element. |
| [Text scramble decode](https://vawe.dev/video-components/text-scramble-decode) | A codename revealed as a lookup, in a mono face. |
| [Caption karaoke](https://vawe.dev/video-components/caption-karaoke) | A spoken line, where the word being said lifts to full ink. |
| [Lower third](https://vawe.dev/video-components/lower-third) | A person is on screen and needs a name and a role. |

## All 25 components in reveal a title

- [Mask rise](https://vawe.dev/video-components/mask-rise): a line of type enters from under an invisible edge; the mask box is tall enough for descenders
- [Tracking collapse](https://vawe.dev/video-components/tracking-collapse): a title or wordmark arrives: letters converge from wide tracking while the word sharpens
- [Caret typing](https://vawe.dev/video-components/caret-typing): a command, a prompt, a name typed in; the caret moves with each character then becomes the next element
- [Per-letter stagger](https://vawe.dev/video-components/letter-stagger): a word lands letter by letter, 45 ms apart, on one exact curve
- [Scale punch](https://vawe.dev/video-components/scale-punch): the hero word hits from 1.4x and recoils on the overshoot curve; a full stop pops after it
- [Split-flap resolve](https://vawe.dev/video-components/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
- [Word swap slot](https://vawe.dev/video-components/word-swap-slot): one word in a held sentence rolls through 3 or 4 values and lands; the sentence reflows its width
- [Blur word cascade](https://vawe.dev/video-components/blur-word-cascade): copy resolves word by word from blur with a slight rise; no mask, so nothing cuts a descender
- [Text as mask](https://vawe.dev/video-components/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
- [Outline fill](https://vawe.dev/video-components/outline-fill): one hero word arrives as an outline, letter by letter, then an accent floods each letter from its baseline on the beat
- [Strikethrough replace](https://vawe.dev/video-components/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
- [Grid stagger wave](https://vawe.dev/video-components/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
- [Text scramble decode](https://vawe.dev/video-components/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
- [Ticker takeover](https://vawe.dev/video-components/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
- [Anchor cycle](https://vawe.dev/video-components/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
- [Lower third](https://vawe.dev/video-components/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
- [Liquid displace](https://vawe.dev/video-components/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
- [Echo trail](https://vawe.dev/video-components/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
- [Caption karaoke](https://vawe.dev/video-components/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
- [Caption editorial](https://vawe.dev/video-components/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
- [Variable weight wave](https://vawe.dev/video-components/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
- [Text on path](https://vawe.dev/video-components/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
- [Vertical cut reveal](https://vawe.dev/video-components/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)
- [Letter swap](https://vawe.dev/video-components/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)
- [Letter 3D swap](https://vawe.dev/video-components/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.

## More video components

- [Change between shots](https://vawe.dev/video-components/group/change-between-shots)
- [Point the eye](https://vawe.dev/video-components/group/point-the-eye)
- [Move the camera](https://vawe.dev/video-components/group/move-the-camera)
- [End a film](https://vawe.dev/video-components/group/end-a-film)
- [Product moments](https://vawe.dev/video-components/group/product-moments)
- [Grounds](https://vawe.dev/video-components/group/grounds)

## Related

- [Kinetic typography in CSS, rendered to MP4](https://vawe.dev/blog/kinetic-typography-css)
- [Animated captions in HTML, word by word](https://vawe.dev/blog/animated-captions-html)
- [The kinetic type guide](https://vawe.dev/docs/kinetic-type)
- [Text and fonts in a film](https://vawe.dev/docs/text-and-fonts)
- [All 130 video components](https://vawe.dev/video-components)