Blur Text Reveal

"use client";
// Texte qui se deblurre caractere par caractere

{text.split("").map((char, i) => (
  <span key={i} style={{
    display: "inline-block",
    filter: visible ? "blur(0px)" : "blur(12px)",
    opacity: visible ? 1 : 0,
    transition: `filter 0.4s ease ${i * 15}ms, opacity 0.4s ease ${i * 15}ms`,
  }}>
    {char === " " ? "\u00A0" : char}
  </span>
))}

// Trigger avec IntersectionObserver
useEffect(() => {
  const obs = new IntersectionObserver(([e]) => {
    if (e.isIntersecting) setVisible(true);
  }, { threshold: 0.3 });
  obs.observe(ref.current);
}, []);