Text Flip

1"use client"
2 
3import { Children, useEffect, useState } from "react"
4import type { Transition, Variants } from "motion/react"
5import { AnimatePresence, motion } from "motion/react"
6 
7import { cn } from "@/lib/utils"
8 
9const defaultVariants: Variants = {
10  initial: { y: "-20%", opacity: 0, filter: "blur(1px)" },
11  animate: {
12    y: "0%",
13    opacity: 1,
14    filter: "blur(0px)",
15  },
16  exit: {
17    y: "40%",
18    opacity: 0,
19    filter: "blur(1px)",
20    transition: { ease: "easeOut" },
21  },
22}
23 
24type MotionElement = typeof motion.p | typeof motion.span | typeof motion.code
25 
26export type TextFlipProps = {
27  /**
28   * Motion element to render.
29   * @defaultValue motion.p
30   * */
31  as?: MotionElement
32  className?: string
33  /** Array of children to cycle through. */
34  children: React.ReactNode[]
35 
36  /**
37   * Time in seconds between each flip.
38   * @defaultValue 2
39   * */
40  interval?: number
41  /**
42   * Motion transition configuration.
43   * @defaultValue { duration: 0.3 }
44   * */
45  transition?: Transition
46  /** Motion variants for enter/exit animations. */
47  variants?: Variants
48 
49  /** Controls whether the flip animation runs. */
50  play?: boolean
51 
52  /** Called with the new index after each flip. */
53  onIndexChange?: (index: number) => void
54}
55 
56export function TextFlip({
57  as: Component = motion.p,
58  className,
59  children,
60 
61  interval = 2,
62  transition = { duration: 0.3 },
63  variants = defaultVariants,
64  play = true,
65 
66  onIndexChange,
67}: TextFlipProps) {
68  const [currentIndex, setCurrentIndex] = useState(0)
69 
70  const items = Children.toArray(children)
71 
72  useEffect(() => {
73    if (!play) return
74 
75    const timer = setInterval(() => {
76      setCurrentIndex((prev) => {
77        const next = (prev + 1) % items.length
78        onIndexChange?.(next)
79        return next
80      })
81    }, interval * 1000)
82 
83    return () => clearInterval(timer)
84  }, [play, interval, items.length, onIndexChange])
85 
86  return (
87    <AnimatePresence mode="wait" initial={false}>
88      <Component
89        key={currentIndex}
90        className={cn("inline-block", className)}
91        initial="initial"
92        animate="animate"
93        exit="exit"
94        transition={transition}
95        variants={variants}
96      >
97        {items[currentIndex]}
98      </Component>
99    </AnimatePresence>
100  )
101}