Text Animate

FREE

Word or letter reveals (blur, fade, slide, scale), WordRotate and Typewriter; accessible and reduced-motion aware.

Installation

Terminal

npx @bloxa/cli add text-animate
# or: npx shadcn@latest add @bloxa/text-animate

Packages installed automatically: motion

Build dashboards, landing pages, admin panels, checkouts faster

$ npx @bloxa/cli add chart, npx @bloxa/cli add dock, npx @bloxa/cli add marquee

Every component also accepts the props of the element it renders.

Prop	Type	Default	Description
children	string	—	Text.
effect	"blur-in" \| "fade-up" \| "slide-left" \| "scale" \| "letters"	"blur-in"	Effect.
by	"word" \| "character" \| "line"	"word"	Split by.
stagger / delay	number	0.06 / 0	Delay between pieces and before start (s).
as	"span" \| "h1" \| "h2" \| "h3" \| "p"	"span"	Tag.

Prop	Type	Default	Description
words	string[]	—	Words to cycle.
interval	number	2200	Time per word in ms.

Prop	Type	Default	Description
words	string[]	—	Phrases to type.
speed / hold	number	55 / 1600	Per-character speed and hold (ms).
loop / cursor	boolean	true	Loop and cursor.