// components/FM_Typewriter.tsx
import { motion } from "framer-motion";

export const FM_Typewriter = () => {
  const text = "Animate text with Framer Motion.";
  return (
    <motion.h1
      initial="hidden"
      animate="visible"
      variants={{
        hidden: {},
        visible: { transition: { staggerChildren: 0.03 } },
      }}
      className="text-3xl font-bold"
    >
      {text.split("").map((char, i) => (
        <motion.span
          key={i}
          variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}
        >
          {char}
        </motion.span>
      ))}
    </motion.h1>
  );
};

• initial: Each character starts hidden (opacity 0).
• animate: Characters fade in one by one.
• staggerChildren: Controls the delay between each character animation.
• Great for headings or text that should appear with a typewriter effect!