Text / effect

Rotating Text

Spring-driven word transitions with expressive glyph staggering and smooth width changes.

PLAYGROUND

Preparing preview…

Take it with you.

SOURCE ACCESS

Enter the shared password to copy the complete source, download every file, and install components in your app.

Access lasts 24 hours. Your preview settings stay with you.

Import RotatingText.tsx for the reusable effect, or Demo.tsx for the full Make it composition. texts accepts a string array or pipe-separated string; arrays preserve literal pipe characters.
The source spring, wait-mode exit/enter sequence, staggered glyphs, vertical offsets and width transition are retained. Spring settings and offsets replace arbitrary Motion variants so all motion shares one owned clock.
Pause freezes the current pose and remaining interval. Hidden and offscreen time is excluded. Reduced motion shows static text; imperative navigation stays available.
An unsplit accessible label accompanies aria-hidden animated glyphs. No automatic live-region announcements interrupt reading. Emoji graphemes remain whole where Intl.Segmenter is available.
Work is bounded to 40 strings and 500 graphemes per string. Interval is clamped to 250–60000ms; stagger to 0–0.2 seconds. Custom splitBy strings act as delimiters. Text-list changes reset to the first item.

React 19.2Intl.Segmenter

React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.

Prop	Type	Default	Description
`texts`	string[] \| string	`"beautiful\|expressive\|yours"`	Words (separate with \|)
`rotationInterval`	number	`2000`	Interval
`staggerDuration`	number	`0`	Stagger
`staggerFrom`	string \| number	`"first"`	Stagger origin
`splitBy`	string	`"characters"`	Split by
`stiffness`	number	`300`	Spring stiffness
`damping`	number	`25`	Spring damping
`mass`	number	`1`	Spring mass
`enterOffset`	number	`100`	Enter offset
`exitOffset`	number	`-120`	Exit offset
`auto`	boolean	`true`	Automatic rotation
`loop`	boolean	`true`	Loop
`onNext`	(index: number) => void	`undefined`	Called when the logical text index changes.
`ref`	RotatingTextRef	`undefined`	Imperative next(), previous(), jumpTo(index) and reset().
`transition`	{ stiffness?: number; damping?: number; mass?: number }	`undefined`	Optional spring settings override the corresponding scalar props.
`mainClassName`	string	`''`	Class hook for the outer text, word groups or individual glyphs.
`splitLevelClassName`	string	`''`	Class hook for the outer text, word groups or individual glyphs.
`elementLevelClassName`	string	`''`	Class hook for the outer text, word groups or individual glyphs.
`paused`	boolean	`false`	Freeze decorative motion.
`replayToken`	number	`0`	Change to reset.
`className`	string	`''`	Additional outer classes.