Text Reveal on Scroll

"use client";
import { useRef, useState, useEffect } from "react";

export default function TextRevealScroll({ text }: { text: string }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [progress, setProgress] = useState(0);
  const words = text.split(" ");

  useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const handleScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = el;
      setProgress(scrollTop / (scrollHeight - clientHeight));
    };
    el.addEventListener("scroll", handleScroll);
    return () => el.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div ref={containerRef} style={{ overflowY: "auto", height: 400 }}>
      <div style={{ padding: "200px 0" }}>
        {words.map((word, i) => {
          const t = i / words.length;
          return (
            <span key={i} style={{
              opacity: t < progress ? 1 : 0.15,
              transition: "opacity 0.3s",
            }}>{word} </span>
          );
        })}
      </div>
    </div>
  );
}