Kinetic Type Reveal

import { motion } from "framer-motion";

export function KineticTypeReveal({ text = "Choreographed on scroll" }) {
  const words = text.split(" ");
  return (
    <motion.div
      className="flex flex-wrap gap-x-[0.4em]"
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, amount: 0.6 }}
      variants={{ visible: { transition: { staggerChildren: 0.06 } } }}
    >
      {words.map((word, i) => (
        <motion.span
          key={i}
          variants={{
            hidden: { opacity: 0, y: 18, rotateX: -40 },
            visible: { opacity: 1, y: 0, rotateX: 0 },
          }}
          transition={{ duration: 0.5, ease: "easeOut" }}
          style={{ display: "inline-block", transformPerspective: 400 }}
        >
          {word}
        </motion.span>
      ))}
    </motion.div>
  );
}