React Reveal Animations
Content that is uncovered rather than faded in. Ten components animate a mask, a clip-path, or a wipe so the element is progressively exposed instead of simply changing opacity — pixel dissolves, curtain wipes, thawing frost, scroll-triggered entrances. A reveal reads as deliberate where a fade reads as a page still loading, which is why it is worth the extra property to animate.
10 components · all free
In This Collection
Lumen
Copy that lights up as you read it — words ahead sit dim and unfocused, and stay lit once you pass them.
Scroll reveal
Redact
Copy that arrives fully classified under solid bars, then declassifies word by word — each bar clearing its own word and leaving an amethyst edge behind as the only evidence it was ever there.
Reveal
Rime
Hoarfrost taking a word — Molten's opposite number, the same idea of type as a coverage field run cold. Crystal tips seeded on the glyph edges creep across the letters, fork at a fixed lattice angle, and die where they run out of glyph or hit ice already there, so the cost tracks the growing edge rather than the area. The text underneath is never redrawn: it stays a real span at its real colour the whole time, which makes the thaw nothing more than fading the ice off type that was always there.
Reveal
Pixel Transition
Reveal a second layer through a random pixelated dissolve on hover.
Reveal
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.
Reveal
Torchlight
Content hidden in darkness; the cursor is a torch that reveals only what it touches.
Reveal
Dissolve
An element disintegrates into drifting shadow-motes on dismiss, and reforms on command.
Reveal
Sigil
An SVG crest that traces itself in when it scrolls into view, stroke by stroke.
Reveal · Scroll reveal
Rift
A draggable tear between two overlaid scenes — push past an edge and it resists, then snaps back.
Reveal
Aperture
A camera iris. Blades pivot on a ring of pins and one shared angle drives the whole mechanism — wide open at 64% of the housing, past the centre and light-tight at zero, cutting the scalloped polygon a real iris makes on the way through.
Reveal
The Terms
- Reveal
- Content is uncovered gradually, often by animating a clip-path or mask.
- Scroll reveal
- Elements fade or slide into place as they enter the viewport.