Text Rotate

A word in the headline swaps for others with a letter-by-letter spring. Made for hero sections.

Customize

rotationInterval2000msstaggerDuration0.000s

gradientFrom

gradientTo

backgroundColor

Based on Text Rotate (MIT license) · Terms of use

17 properties

Property	Type	Default	Description
texts	string[]	—	Words or phrases that replace each other.
rotationInterval	number	`2000`	How long each word stays, in milliseconds.
staggerDuration	number	`0`	Delay between letters, in seconds.
staggerFrom	'first' \| 'last' \| 'center' \| 'random' \| number	`"first"`	Which letter the wave starts from.
splitBy	'characters' \| 'words' \| 'lines' \| string	`"characters"`	How the text is split: by characters, words or lines.
loop	boolean	`true`	Start over after the last word.
auto	boolean	`true`	Change words automatically.
animatePresenceMode	'wait' \| 'popLayout' \| 'sync'	`"wait"`	Whether the old word leaves before the new one enters.
initial / animate / exit	MotionProps	—	Enter and exit animation states in Motion format.
transition	Transition	`"{ type: 'spring', damping: 25, stiffness: 300 }"`	Spring or timing settings.
mainClassName	string	—	Classes for the outer box, e.g. a pill background.
splitLevelClassName	string	—	Classes for each word wrapper.
elementLevelClassName	string	—	Classes for each letter.
onNext	(index: number) => void	—	Called when the word changes.
gradientFrom	string	`"#ffffff"`	Colour of the first letter. The text fades into the gradient end colour.
gradientTo	string	`"#d4d4d8"`	Colour of the last letter, the end of the gradient.
backgroundColor	string	`"rgba(255,255,255,0.1)"`	Fill of the pill behind the changing word.

3 required packages

npm install motion clsx tailwind-merge