Blur Reveal

"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export default function BlurReveal({ children }: { children: React.ReactNode }) {
  const ref = useRef<color: #79c0ff;">style="color: #ff7b72;">HTMLDivElement>(null);

  useEffect(() => {
    gsap.fromTo(ref.current, 
      { filter: "blur(20px)", opacity: 0 },
      { filter: "blur(0px)", opacity: 1, duration: 1.5,
        scrollTrigger: { trigger: ref.current, start: "top 80%", end: "top 20%", scrub: true }
      }
    );
  }, []);

  return <color: #79c0ff;">style="color: #ff7b72;">div color: #79c0ff;">ref={ref}>{children}</color: #79c0ff;">style="color: #ff7b72;">div>;
}