React text animation components for headlines that hold attention: typing, scrambling, shining and swapping.
9 components · free and MIT-licensed · install with the shadcn CLI
Every text in the library, with everything each one pulls in.
The FlipWords component cycles one slot in a sentence through a list of words, blurring each out as the next rises into its place and animating the width difference so the rest of the line never jumps.
motion
The GradientText component paints a line of text with a colour ramp that travels across it on a loop, so a headline word carries the accent colour as movement rather than as a flat fill.
motion
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/flip-words.json