Text Loop

1'use client';
2import { cn } from '@/lib/utils';
3import {
4  motion,
5  AnimatePresence,
6  Transition,
7  Variants,
8  AnimatePresenceProps,
9} from 'motion/react';
10import { useState, useEffect, Children } from 'react';
11 
12export type TextLoopProps = {
13  children: React.ReactNode[];
14  className?: string;
15  interval?: number;
16  transition?: Transition;
17  variants?: Variants;
18  onIndexChange?: (index: number) => void;
19  trigger?: boolean;
20  mode?: AnimatePresenceProps['mode'];
21};
22 
23export function TextLoop({
24  children,
25  className,
26  interval = 2,
27  transition = { duration: 0.3 },
28  variants,
29  onIndexChange,
30  trigger = true,
31  mode = 'popLayout',
32}: TextLoopProps) {
33  const [currentIndex, setCurrentIndex] = useState(0);
34  const items = Children.toArray(children);
35 
36  useEffect(() => {
37    if (!trigger) return;
38 
39    const intervalMs = interval * 1000;
40    const timer = setInterval(() => {
41      setCurrentIndex((current) => {
42        const next = (current + 1) % items.length;
43        onIndexChange?.(next);
44        return next;
45      });
46    }, intervalMs);
47    return () => clearInterval(timer);
48  }, [items.length, interval, onIndexChange, trigger]);
49 
50  const motionVariants: Variants = {
51    initial: { y: 20, opacity: 0 },
52    animate: { y: 0, opacity: 1 },
53    exit: { y: -20, opacity: 0 },
54  };
55 
56  return (
57    <div className={cn('relative inline-block whitespace-nowrap', className)}>
58      <AnimatePresence mode={mode} initial={false}>
59        <motion.div
60          key={currentIndex}
61          initial='initial'
62          animate='animate'
63          exit='exit'
64          transition={transition}
65          variants={variants || motionVariants}
66        >
67          {items[currentIndex]}
68        </motion.div>
69      </AnimatePresence>
70    </div>
71  );
72}