{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-flip",
  "title": "Text Flip",
  "author": "tusharvarshney <tushar@tusharvarshney.com>",
  "description": "Animated text that cycles through items with a smooth flip transition.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "src/registry/components/text-flip/text-flip.tsx",
      "content": "\"use client\"\n\nimport type { Transition, Variants } from \"motion/react\"\nimport { AnimatePresence, motion } from \"motion/react\"\nimport { Children, useEffect, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst defaultVariants: Variants = {\n  initial: { y: -8, opacity: 0 },\n  animate: { y: 0, opacity: 1 },\n  exit: { y: 8, opacity: 0 },\n}\n\ntype MotionElement = typeof motion.p | typeof motion.span | typeof motion.code\n\nexport type TextFlipProps = {\n  /**\n   * Motion element to render.\n   * @defaultValue motion.p\n   * */\n  as?: MotionElement\n  className?: string\n  /** Array of children to cycle through. */\n  children: React.ReactNode[]\n\n  /**\n   * Time in seconds between each flip.\n   * @defaultValue 2\n   * */\n  interval?: number\n  /**\n   * Motion transition configuration.\n   * @defaultValue { duration: 0.3 }\n   * */\n  transition?: Transition\n  /** Motion variants for enter/exit animations. */\n  variants?: Variants\n\n  /** Called with the new index after each flip. */\n  onIndexChange?: (index: number) => void\n}\n\nexport function TextFlip({\n  as: Component = motion.p,\n  className,\n  children,\n\n  interval = 2,\n  transition = { duration: 0.3 },\n  variants = defaultVariants,\n\n  onIndexChange,\n}: TextFlipProps) {\n  const [currentIndex, setCurrentIndex] = useState(0)\n\n  const items = Children.toArray(children)\n\n  useEffect(() => {\n    const timer = setInterval(() => {\n      setCurrentIndex((prev) => {\n        const next = (prev + 1) % items.length\n        onIndexChange?.(next)\n        return next\n      })\n    }, interval * 1000)\n\n    return () => clearInterval(timer)\n  }, [items.length, interval, onIndexChange])\n\n  return (\n    <AnimatePresence mode=\"wait\" initial={false}>\n      <Component\n        key={currentIndex}\n        className={cn(\"inline-block\", className)}\n        initial=\"initial\"\n        animate=\"animate\"\n        exit=\"exit\"\n        transition={transition}\n        variants={variants}\n      >\n        {items[currentIndex]}\n      </Component>\n    </AnimatePresence>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/text-flip.tsx"
    }
  ],
  "docs": "https://tusharvarshney.com/components/text-flip",
  "type": "registry:component"
}