React text animation components for headlines that hold attention: typing, scrambling, shining and swapping.
7 components · free and MIT-licensed · install with the shadcn CLI
Every text component in the library, with the packages each one pulls in.
The GravityTextSwap component drops characters into place under a gravity-like fall, so one word gives way to the next instead of simply being replaced.
motion
The NumberTicker component counts a number up when it scrolls into view, with locale-aware formatting.
motion
The ScrollReveal component lights up text word by word as the reader scrolls past it, tied to scroll position rather than a timer.
motion
The SplitFlap component turns text into a mechanical departure board, each column riffling through the alphabet until it reaches its letter, a beat behind the column to its left.
motion
The TextScramble component decodes text one character at a time, cycling through random glyphs before each letter settles into place.
motion
The TextShine component sweeps a coloured highlight across your text on a loop, drawing the eye without demanding a click.
motion
The TextWriter component creates a typing animation effect for text, where characters appear one by one to mimic real-time typing.
motion
Every component here is installable with the shadcn CLI, which also resolves its npm dependencies.
npx shadcn@latest add https://uibeats.com/r/gravity-text-swap.json