TextReveal.tsx

"use client";
import {
  motion,
  useMotionValueEvent,
  useScroll,
  useTransform,
} from "motion/react";
import { useRef, useState } from "react";
const PARAGRAPH =
  "In a world that rarely slows down, we often forget the quiet beauty hidden in everyday moments. A single breath, a drifting cloud, a soft beam of light slipping through a window—all of these carry stories we overlook. When we pause, the ordinary begins to unfold into something remarkable. Colors feel deeper, shadows stretch with intention, and even the smallest movements seem to whisper their own rhythm. This project is a reminder to notice what we often dismiss: the gentle pulse of life surrounding us at every second. Through shifting words and flowing motion, the animation invites you to step into a space where time feels lighter and thoughts move more freely. It encourages reflection, creativity, and a sense of calm curiosity. Sometimes, meaning isn’t found in grand gestures, but in the subtle patterns that shape our daily existence, waiting patiently to be seen.";
const paragraphArray = PARAGRAPH.split(" ");
export default function TextReveal() {
  const containerRef = useRef(null);
  const [allowedIndex, setAllowedIndex] = useState(0);
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end center"],
  });
  const indexHighlight = useTransform(
    scrollYProgress,
    [0, 1],
    [0, paragraphArray.length]
  );
  useMotionValueEvent(indexHighlight, "change", (value) => {
    setAllowedIndex(Math.floor(value));
  });
  return (
    <div className="w-full min-h-screen h-full bg-neutral-950 text-neutral-50 py-200 font-playfair-display">
      <div
        ref={containerRef}
        className="max-w-4xl mx-auto text-5xl leading-18 tracking-tight flex flex-wrap gap-3"
      >
        {paragraphArray.map((word, index) => {
          return (
            <div
              key={index}
              className={
                index < allowedIndex ? "text-neutral-50" : "text-neutral-600"
              }
            >
              {word}
            </div>
          );
        })}
      </div>
    </div>
  );
}