Letter Reveal

/* Add to globals.css:
@keyframes letter-rise {
  from { transform: translateY(0.6em); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
*/
export function LetterReveal({ text = "Marov Studio" }: { text?: string }) {
  return (
    <p className="text-3xl font-semibold">
      {Array.from(text).map((letter, i) => (
        <span
          key={i}
          className="inline-block motion-safe:animate-[letter-rise_480ms_cubic-bezier(0.16,1,0.3,1)_both]"
          style={{ animationDelay: i * 45 + "ms" }}
        >
          {letter === " " ? "\u00A0" : letter}
        </span>
      ))}
    </p>
  );
}