Copying the Auth0 animation

interface TextLoopProps {
  texts: string[];
}

export const TextLoop: React.FC<TextLoopProps> = ({ texts }) => {
  const [index, setIndex] = React.useState<number>(0);

  React.useEffect(() => {
    setTimeout(() => {
      let next = index + 1;
      if (next === texts.length) {
        next = 0;
      }
      setIndex(next);
    }, 3 * 1000);
  }, [index, setIndex, texts]);

  return (
    <Box position="relative" width="max-content">
      <motion.span
        style={{ position: "absolute" }}
        variants={{
          enter: {
            translateY: "20px",
            opacity: 0,
          },
          center: {
            zIndex: 1,
            translateY: 0,
            opacity: 1,
          },
          exit: {
            zIndex: 0,
            opacity: 0,
            translateY: "-20px",
          },
        }}
        key={index}
        initial="enter"
        animate="center"
        exit="exit"
        transition={{
          y: { type: "spring", stiffness: 300, damping: 200 },
          opacity: { duration: 0.5 },
        }}
      >
        {texts[index]}
      </motion.span>
    </Box>
  );
};

interface TextLoopProps {
  texts: string[];
}

export const TextLoop: React.FC<TextLoopProps> = ({ texts }) => {
  const [index, setIndex] = React.useState<number>(0);

  React.useEffect(() => {
    setTimeout(() => {
      let next = index + 1;
      if (next === texts.length) {
        next = 0;
      }
      setIndex(next);
    }, 3 * 1000);
  }, [index, setIndex, texts]);

  return (
    <Box position="relative" width="max-content">
      <motion.span
        style={{ position: "absolute" }}
        variants={{
          enter: {
            translateY: "20px",
            opacity: 0,
          },
          center: {
            zIndex: 1,
            translateY: 0,
            opacity: 1,
          },
          exit: {
            zIndex: 0,
            opacity: 0,
            translateY: "-20px",
          },
        }}
        key={index}
        initial="enter"
        animate="center"
        exit="exit"
        transition={{
          y: { type: "spring", stiffness: 300, damping: 200 },
          opacity: { duration: 0.5 },
        }}
      >
        {texts[index]}
      </motion.span>
    </Box>
  );
};