Text Rotator

"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>
  )
}