Text Flip

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