Simple React Tex Loop Component using Framer Motion and tailwind.css

TextLoop.tsx

import React, { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

export type TextLoopProps = React.PropsWithChildren & {
  interval?: number;
  delay?: number;
};

export const TextLoop: React.FC<TextLoopProps> = ({
  interval = 3000,
  delay = 0,
  children,
}) => {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      let next = index + 1;
      if (next === React.Children.count(children)) {
        next = 0;
      }
      setIndex(next);
    }, interval);
  }, [index, setIndex]);

  return (
    <div className="inline-block relative w-full align-top">
      <AnimatePresence>
        <motion.span
          className="absolute"
          variants={{
            enter: () => {
              return {
                y: "90%",
                opacity: 0,
              };
            },
            center: {
              zIndex: 1,
              y: 0,
              opacity: 1,
            },
            exit: () => {
              return {
                y: "-90%",
                zIndex: 1,
                opacity: 0,
              };
            },
          }}
          key={index}
          initial="enter"
          animate="center"
          exit="exit"
          transition={{
            ease: "easeInOut",
            delay: delay,
            duration: 0.3,
          }}
        >
          {React.Children.toArray(children)[index]}
        </motion.span>
      </AnimatePresence>
    </div>
  );
};