ScrollTypography

"use client";

import { useRef, type ReactNode, type RefObject } from "react";
import { motion, useReducedMotion, useScroll, useTransform, type MotionValue } from "motion/react";

type ScrollTypographyProps = {
  text: string;
  className?: string;
  /** Opacity of words not reached yet, 0 to 1. */
  dim?: number;
  /** Scrolling box to follow. Leave out to follow the page. */
  container?: RefObject<HTMLElement | null>;
};

function Word({ children, progress, range, dim }: { children: ReactNode; progress: MotionValue<number>; range: [number, number]; dim: number }) {
  const opacity = useTransform(progress, range, [dim, 1]);
  return <motion.span style={{ opacity }}>{children}</motion.span>;
}

/* ScrollTypography: words light up one by one as the paragraph scrolls up the screen, so the reading pace follows the scroll. */
export function ScrollTypography({ text, className = "", dim = 0.15, container }: ScrollTypographyProps) {
  const reduce = useReducedMotion();
  const ref = useRef<HTMLParagraphElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, container, offset: ["start 0.85", "end 0.4"] });
  const words = text.split(" ");

  return (
    <p ref={ref} className={className}>
      <span className="sr-only">{text}</span>
      <span aria-hidden>
        {words.map((word, i) => (
          <span key={i}>
            <Word progress={scrollYProgress} range={[i / words.length, (i + 1) / words.length]} dim={reduce ? 1 : dim}>
              {word}
            </Word>
            {i < words.length - 1 && " "}
          </span>
        ))}
      </span>
    </p>
  );
}