import { useSpring, animated } from "@react-spring/web";
import React from "react";

type Props = {
  children: string;
};

const MysteriousText = ({ children, ...props }: Props) => {
  const animation = (i: any) =>
    useSpring({ opacity: 1, from: { opacity: 0 }, delay: Math.random() * 500 });
  return (
    <>
      {children.split("").map((item, index) => (
        <animated.span key={index} style={animation(index)} {...props}>
          {item}
        </animated.span>
      ))}
    </>
  );
};

export default MysteriousText;
