Text Rotator

Text

About

Text Rotator Dynamic heading animation. Smoothly transitions between multiple words or phrases to grab attention and enhance hero sections. Ideal for landing pages and banners.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Text Rotator to your project and fits it to your theme.

Code

How Text Rotator is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import { TextRotator } from "@/components/ui/text-rotator"

export default function TextRotatorDemo() {
  const texts = [
    "Modern",
    "Responsive",
    "Accessible",
    "Beautiful",
    "Reusable",
    "Performant",
    "Type-Safe",
  ]

  // Advanced 3D Flip Animation
  const animation = {
    initial: { opacity: 0, rotateX: -90, y: 50 },
    animate: { opacity: 1, rotateX: 0, y: 0 },
    exit: { opacity: 0, rotateX: 90, y: -50 },
  }

  const transition = {
    type: "spring",
    stiffness: 300,
    damping: 25,
  }

  return (
    <div className="flex min-h-[400px] w-full flex-col items-center justify-center gap-8 bg-background p-4">
      <div className="text-center text-4xl font-bold tracking-tight text-foreground md:text-6xl">
        <span>Build it </span>
        <TextRotator
          texts={texts}
          rotationInterval={2500}
          // Animation Props
          initial={animation.initial}
          animate={animation.animate}
          exit={animation.exit}
          transition={transition}
          // Staggering
          staggerDuration={0.03}
          staggerFrom="first"
          // Styling & Layout
          splitBy="characters"
          mainClassName="text-primary"
          splitLevelClassName="overflow-hidden"
          elementLevelClassName="pb-1 pt-1" // Padding for 3D effect
        />
      </div>
    </div>
  )
}