Animated Text Effects for React
Four ways to animate type. A split-flap board that flips through characters mechanically, a stagger that resolves new text glyph by glyph on hover, a film-title reveal where each word settles out of a blur, and an odometer where only the digits that change roll.
4 components · Browse all components
Smooth Stagger Text
On hover, the label fades out and new text resolves character by character, each glyph shimmering up before it settles.
Cinematic Text
The film-title reveal: each word drifts down out of a heavy blur and settles, slow enough to feel like a camera pulling focus.
Odometer
A price or stat where every digit is a wheel: change the number and only the digits that moved spin, upward when it rises and downward when it falls.
Split-Flap Board
An airport departure board that flips through characters mechanically to spell each phrase, every cell cascading at its own pace.