Text Highlighter

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

export default function TextHighlighter({ 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" }}>
      {words.map((word, i) => {
        const wordProgress = i / words.length;
        const opacity = wordProgress < progress ? 1 : 0.15;
        return <span key={i} style={{ color: `rgba(255,255,255,${opacity})`, transition: "color 0.3s" }}>{word} </span>;
      })}
    </div>
  );
}