Word by word headline

import { motion } from "framer-motion";

const spring = { type: "spring" as const, stiffness: 300, damping: 30 };

interface WordRevealProps {
  text?: string;
  /** Segundos entre palabra y palabra. */
  delay?: number;
}

export default function WordReveal({
  text = "Ideas that feel natural",
  delay = 0.08,
}: WordRevealProps) {
  return (
    <h2 className="max-w-lg text-center text-2xl font-semibold text-[#1d1d1f] dark:text-[#f5f5f7] sm:text-3xl">
      {text.split(" ").map((word, i) => (
        <motion.span
          key={`${word}-${i}`}
          className="mr-2 inline-block"
          initial={{ opacity: 0, filter: "blur(10px)", y: 10 }}
          animate={{ opacity: 1, filter: "blur(0px)", y: 0 }}
          transition={{ ...spring, delay: i * delay }}
        >
          {word}
        </motion.span>
      ))}
    </h2>
  );
}