Flip Sentences

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 
17type Props = {
18  as?: MotionElement;
19  className?: string;
20  children: React.ReactNode[];
21 
22  interval?: number;
23  transition?: Transition;
24  variants?: Variants;
25 
26  onIndexChange?: (index: number) => void;
27};
28 
29export function FlipSentences({
30  as: Component = motion.p,
31  className,
32  children,
33 
34  interval = 2,
35  transition = { duration: 0.3 },
36  variants = defaultVariants,
37 
38  onIndexChange,
39}: Props) {
40  const [currentIndex, setCurrentIndex] = useState(0);
41 
42  const items = Children.toArray(children);
43 
44  useEffect(() => {
45    const timer = setInterval(() => {
46      setCurrentIndex((prev) => {
47        const next = (prev + 1) % items.length;
48        onIndexChange?.(next);
49        return next;
50      });
51    }, interval * 1000);
52 
53    return () => clearInterval(timer);
54  }, [items.length, interval, onIndexChange]);
55 
56  return (
57    <AnimatePresence mode="wait" initial={false}>
58      <Component
59        key={currentIndex}
60        className={cn("inline-block", className)}
61        initial="initial"
62        animate="animate"
63        exit="exit"
64        transition={transition}
65        variants={variants}
66      >
67        {items[currentIndex]}
68      </Component>
69    </AnimatePresence>
70  );
71}