Rotating Text

"use client"

import {
  RotatingText,
  RotatingTextContainer,
} from "@animate-ui/react/primitives/texts/rotating"

export default function RotatingTextDemo({
  delay = 0,
  y = -50,
  duration = 2000,
  align = "none",
}: {
  delay?: number
  y?: number
  duration?: number
  align?: "none" | "start" | "center" | "end"
}) {
  return (
    <RotatingTextContainer
      className="text-4xl font-semibold"
      text={["Rotating", "Text", "Demo"]}
      delay={delay}
      y={y}
      duration={duration}
      align={align === "none" ? undefined : align}
    >
      <RotatingText />
    </RotatingTextContainer>
  )
}

InstallationCopy Anchor Link

npm install @animate-ui/react motion

pnpm add @animate-ui/react motion

yarn add @animate-ui/react motion

bun add @animate-ui/react motion

UsageCopy Anchor Link

import {
  RotatingText,
  RotatingTextContainer,
} from '@animate-ui/react/primitives/texts/rotating';

export function Tagline() {
  return (
    <RotatingTextContainer text={['Fast', 'Accessible', 'Animated']}>
      <RotatingText />
    </RotatingTextContainer>
  );
}

AnimationCopy Anchor Link

• After delay (right away by default), the current word slides out by y while fading, then the next one slides in from the other side: 0.3s each on an ease-out, one after the other. The next swaps follow every duration. With no delay, the first word leaves as soon as it mounts, so the second one is the first to show.
• The cycle pauses off screen and in a hidden tab.
• <AnimateUIProvider tempo> paces the default transition.
• Under reduced motion, the words keep taking turns as a crossfade, without travel.
• With align, the container keeps the width of its longest text, so a word swap never moves the text around it, and each word sits at the start, center or end of that width.
• Screen readers read every word once, never the cycling one.

API ReferenceCopy Anchor Link

RotatingTextContainerCopy Anchor Link

RotatingTextCopy Anchor Link

useRotatingTextCopy Anchor Link

Returns the container's state inside it: { currentText, y, isInView, label }.