Scroll text reveal

import { useRef } from 'react';
import {
  motion,
  useReducedMotion,
  useScroll,
  useTransform,
  type MotionValue
} from 'motion/react';

export function TextReveal({ text }: { text: string }) {
  const ref = useRef<HTMLElement>(null);
  const reduceMotion = useReducedMotion();
  // 0 when the section's top reaches the top of the viewport, 1 when its
  // bottom reaches the bottom: the whole time the paragraph is pinned.
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start start', 'end end']
  });
  const words = text.split(' ');

  return (
    <section ref={ref} className='relative h-[300vh]'>
      <div className='sticky top-0 flex h-screen items-center px-6'>
        <p className='mx-auto max-w-3xl text-4xl font-semibold tracking-tight'>
          {reduceMotion ? (
            text
          ) : (
            <>
              {/* Screen readers get the sentence once, not word by word. */}
              <span className='sr-only'>{text}</span>
              <span aria-hidden>
                {words.map((word, index) => (
                  <Word
                    key={index}
                    progress={scrollYProgress}
                    range={[index / words.length, (index + 1) / words.length]}
                  >
                    {word}
                  </Word>
                ))}
              </span>
            </>
          )}
        </p>
      </div>
    </section>
  );
}

function Word({
  children,
  progress,
  range
}: {
  children: string;
  progress: MotionValue<number>;
  range: [number, number];
}) {
  // Each word owns one slice of the scroll and brightens across it.
  const opacity = useTransform(progress, range, [0.18, 1]);
  return <motion.span style={{ opacity }}>{children} </motion.span>;
}