React text animation
Text that changes in place: a label that answers a click, a loading line with light moving across it, captions that step in one at a time, and an AI reply whose words appear as they stream.
They share one motion. The old text lifts 3px and blurs out, the new text rises 4px and sharpens, and the box springs to the new width so the words beside it glide instead of jumping.
Of the 6 here, 5 are free under MIT and Conversation is in Pro.
6 components, running
Change a label, status or short value with y + blur, and spring the width to fit, so neighbours glide instead of jumping.
npx shadcn add https://eased.dev/r/text-swap.jsonShimmer text for React: a soft band of light sweeps across a label while something is working.
npx shadcn add https://eased.dev/r/shimmer-text.jsonShort captions that step in under a scene with Text Swap's motion: the old line lifts and blurs out, the new one rises in, and the width springs to fit.
npx shadcn add https://eased.dev/r/caption-ticker.jsonA Base UI button whose press scale depends on its width, whose label swaps with y + blur while the width springs, and whose loading spinner overlays the label so the width never changes.
npx shadcn add https://eased.dev/r/button.jsonThe line above a reasoning model's answer: the label shimmers while a seconds counter rolls, then "Thinking" morphs into "Thought for 12s" and the reasoning folds away a second after the answer starts.
npx shadcn add https://eased.dev/r/thinking-bar.jsonA chat thread that follows a streaming reply on one spring and lets go the moment you scroll up, raising a Jump to latest pill that turns into New reply when more arrives.
npx shadcn add @eased-pro/conversation
Text that changes while people use the app
Scramble, split text and letter-by-letter typing are made for a headline that plays once. These are for text that changes during use: a status, a button label, a caption, a reply arriving. None of them scramble letters or split a heading into characters, so look elsewhere if that is the effect you want. Text Swap
How to install
1.Add Text Swap, the engine the others build on:
npx shadcn add https://eased.dev/r/text-swap.json2.Shimmer Text reuses that engine for status changes, so adding it next only brings the shimmer itself:
npx shadcn add https://eased.dev/r/shimmer-text.json3.For streamed replies, Conversation installs from the @eased-pro registry once your token is in place: Pro setup
npx shadcn add @eased-pro/conversation
Questions
Is there a typewriter effect?
Not as its own component. For a model's reply, Conversation streams markdown through Streamdown and fades each new word in from a 4px blur over 150ms, so the text shows as fast as it arrives.
Text Swap or Number Roll?
Text Swap is for a label, status or short value that changes now and then. A number that changes often or in small steps, such as a counter or a balance, reads better with Number Roll turning each digit.
Can the text wrap?
No. Text Swap and Caption Ticker are for one line and never wrap. A paragraph should change without an effect.
Will screen readers hear the change?
They only ever find the current text, because the outgoing copy is hidden while it leaves. Text Swap doesn't announce on its own, so put aria-live="polite" on a parent when a status change should be read out.