Toggle Sidebar B
AppearanceLight & dark mode D

Rotating Text

Cycles through multiple phrases with 3D rotate / flip transitions.

Default

Every prop is wired to the controls underneath. The component also exposes next, previous, jumpTo and reset through a template ref.

Light previewReplay previewOpen in new tab

Creative thinking

Customize

Rotation Interval (ms)2000
Stagger Duration0.025
Stagger From
Split By

API Reference

RotatingText

PropTypeDefaultDescription
textsstring[][]An array of text strings to be rotated.
rotationIntervalnumber2000The interval (in milliseconds) between text rotations.
initialobject{ y: "100%", opacity: 0 }Initial animation state for each element.
animateobject{ y: 0, opacity: 1 }Animation state when elements enter.
exitobject{ y: "-120%", opacity: 0 }Exit animation state for elements.
animatePresenceModestring"wait"Mode for AnimatePresence; for example, 'wait' to finish exit animations before entering.
animatePresenceInitialbooleanfalseDetermines whether the AnimatePresence component should run its initial animation.
staggerDurationnumber0Delay between each character's animation.
staggerFromstring | number"first"Specifies the order from which the stagger starts: first, last, center, random or an index.
transitionobject{ type: "spring", damping: 25, stiffness: 300 }Transition settings for the animations.
loopbooleantrueDetermines if the rotation should loop back to the first text after the last one.
autobooleantrueIf true, the text rotation starts automatically.
splitBystring"characters"Determines how the text is split into animatable elements (e.g., by characters, words, or lines).
nextevent-Emitted with the new index when the text rotates.
mainClassNamestringundefinedAdditional class names for the main container element.
splitLevelClassNamestringundefinedAdditional class names for the container wrapping each split group (e.g., a word).
elementLevelClassNamestringundefinedAdditional class names for each individual animated element.

Accessibility

Keyboard shortcuts and ARIA behavior.

  • The current phrase is rendered once in a visually hidden span, and the animated glyphs are marked aria-hidden.
  • Rotation does not pause on focus or hover. Set auto to false if the phrases are important content.
Particle TextScrambled Text