Text Animation

A powerful typography component that breathes life into your text with plain CSS keyframes — no animation library. It supports multiple animation variants like typewriter effects, focus reveals, 3D flips, and more.

It is perfect for hero sections, landing page headers, and grabbing user attention.

Each effect fires when it scrolls into view (once, via an IntersectionObserver), so scroll a preview back into frame — or hit its reload button — to replay.

Text animation

The component splits the string and staggers each character with CSS animation delays.

Passtext: as a plain string — it is split internally, so children are not read.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Text Animation

npx shadcn@latest add @algorize-ui/text-animation

components/custom/blocks/TextAnimationBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Text Animation needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Variants

Usevariant: for the effect — typewriter, blur-reveal (the default), wave, pop-in, flip, spin-in or blur-in-up.

Timing

duration{1.2}: stretches each character's transition. For typewriter it is the total time to type the whole string, not per character.
delay{0.4}: holds the whole sequence back — useful for staging a headline against a subheadline.

Custom element & color

as"h1": picks the rendered tag so the headline keeps its document meaning. Defaults to p.
className: and style are forwarded to that element, so colour is yours to set.

Props Reference

Component	Prop	Type	Default	Description
`TextAnimation`	`text`	`string`	Required	The actual text string you want to animate.
`TextAnimation`	`variant`	`"typewriter" \| "blur-reveal" \| "wave" \| "pop-in" \| "flip" \| "spin-in" \| "blur-in-up"`	`"blur-reveal"`	The style of the animation.
`TextAnimation`	`duration`	`number`	`0.5`	The duration of the animation in seconds. Note: For the typewriter effect, this is the total duration to type out the entire string.
`TextAnimation`	`delay`	`number`	`0`	The delay before the animation starts.
`TextAnimation`	`as`	`React.ElementType`	`"p"`	The HTML element to render the root wrapper as (e.g., `h1`, `h2`, `span`).
`TextAnimation`	`style / className`	`CSSProperties / string`	`undefined`	Since the component inherits native HTML attributes, you can easily pass `style={{ color: "#hex" }}` or Tailwind text-color utility classes to dynamically change the color of the animated text.
`TextAnimation`	`...props`	`HTMLAttributes<HTMLElement>`	`undefined`	Accepts all native HTML attributes (e.g., `id`, `onClick`) which are seamlessly forwarded to the wrapper element.
`TextAnimation`	`renderWord`	`(word: string, index: number) => ReactNode`	—	Swap what a word renders as while keeping its entrance — a coloured span, a word that later changes. Word-level variants only: `pop-in`, `flip`, `blur-in-up`. Component Wall uses it for its accent and turning word.