Animations

Text Rotate

Pronew

Rotates through texts with a staggered per-letter, per-word or per-line animation, driven by a timer or by you.

Components that areaccessible

Installation

npx shadcn@latest add @blank-pro/text-rotate

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { TextRotate } from "@/components/ui/text-rotate"

<TextRotate texts={["accessible", "themeable", "fast"]} stagger={0.025} />

Text Rotate is for when the rotation is the headline: it splits each text into letters, words or lines and staggers them from either end, the centre or at random; it animates its own width so the sentence around it slides instead of jumping; and it can be driven from outside.

Auto-rotation stops while the text is offscreen or the tab is in the background, and on hover with pauseOnHover. Screen readers get the current text once, unsplit. With prefers-reduced-motion, texts cross-fade in place.

Examples

Controlled

index and onIndexChange make the visible text state you own. The ref exposes next, previous, jumpTo, reset, pause and play, so a carousel, a stepper or a scroll position can drive it.

Words

split="words" animates whole words; split="lines" animates lines split on \n; any other string is used as the separator.

Install it with

npx shadcn add @blank/button

API Reference

TextRotate takes motion span props, plus:

Prop	Type	Default
`texts`	`string[]`	—
`as`	`ElementType`	`"span"`
`index`	`number`	—
`defaultIndex`	`number`	`0`
`onIndexChange`	`(index: number) => void`	—
`auto`	`boolean`	`true`
`interval`	`number` (ms)	`2000`
`loop`	`boolean`	`true`
`pauseOnHover`	`boolean`	`false`
`preset`	`"slide-up" \| "slide-down" \| "blur" \| "flip" \| "scale" \| "fade"`	`"slide-up"`
`initial`, `animate`, `exit`	`Target \| Target[]`	from `preset`
`transition`	`Transition`	`{ type: "spring", damping: 25, stiffness: 300 }`
`mode`	`"wait" \| "popLayout" \| "sync"`	`"wait"`
`animateOnMount`	`boolean`	`false`
`split`	`"characters" \| "words" \| "lines" \| string`	`"characters"`
`stagger`	`number` (s)	`0`
`staggerFrom`	`"first" \| "last" \| "center" \| "random" \| number`	`"first"`
`splitClassName`	`string`	—
`elementClassName`	`string`	—
`ref`	`Ref<TextRotateHandle>`	—

Arrays passed to initial, animate or exit are applied per element and cycle, so alternate letters can enter from opposite sides.

TextRotateHandle

Method	Description
`next()`	Advance, wrapping when `loop` is on.
`previous()`	Go back, wrapping when `loop` is on.
`jumpTo(index)`	Show a text by index, clamped to the list.
`reset()`	Back to the first text.
`pause()`	Stop auto-rotation.
`play()`	Resume auto-rotation.