Line Reveal

"use client";

import { createElement, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/SplitText";
import { useGSAP } from "@gsap/react";

// A heading or paragraph that rises line by line out of a mask when it scrolls into view.
// Optionally the words start faint and fill in as you scroll, like reading along with your finger.
// The text stays real text: selectable, and read out as one sentence by screen readers.

if (typeof window !== "undefined") gsap.registerPlugin(useGSAP, ScrollTrigger, SplitText);

export type LineRevealProps = {
  /** The text to show. Plain text only (the lines are cut from it). */
  children: string;
  /** The tag to render: a page title, a section title or a paragraph. */
  as?: "h1" | "h2" | "p";
  /** Delay between one line starting and the next, in seconds. */
  stagger?: number;
  /** How long each line takes to rise, in seconds. */
  duration?: number;
  /** Fill the words in one by one as you scroll through the text. */
  highlight?: boolean;
  /** The colour a word turns when it is filled in. Empty keeps the text colour. */
  highlightColor?: string;
  /** When the reveal starts: "<element edge> <viewport edge>", e.g. "top 85%". */
  start?: string;
  /** The scrolling element. Leave it out to use the page; give it a selector or an element for an inner scroller. */
  scroller?: string | HTMLElement;
  /** Extra classes: put the font size, weight and colour here. */
  className?: string;
};

export function LineReveal({
  children,
  as = "p",
  stagger = 0.08,
  duration = 1,
  highlight = false,
  highlightColor = "#ff5a36",
  start = "top 85%",
  scroller,
  className = "",
}: LineRevealProps) {
  const textRef = useRef<HTMLElement>(null);

  useGSAP(
    () => {
      const element = textRef.current;
      if (!element) return;

      // The text is hidden until it is split, so you never see it jump. Show it again either way.
      element.style.visibility = "visible";

      // Reduced motion: leave the text exactly as written, fully readable
      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;

      let fill: gsap.core.Tween | undefined;

      const split = SplitText.create(element, {
        type: highlight ? "lines,words" : "lines",
        mask: "lines",
        linesClass: "line-reveal-line",
        // Re-cut the lines when the width changes or the web font arrives
        autoSplit: true,
        onSplit(self) {
          // The mask clips to the line box, which cuts the tails of g, y and p. Give it a little room.
          self.masks.forEach((mask) => {
            const box = mask as HTMLElement;
            box.style.paddingBottom = "0.14em";
            box.style.marginBottom = "-0.14em";
          });

          // This runs again after every re-split, so drop the old fill first
          fill?.scrollTrigger?.kill();
          fill?.kill();

          if (highlight) {
            const color = highlightColor || getComputedStyle(element).color;
            // Words start faint and fill in as the scrollbar moves (scrub), one after another
            fill = gsap.fromTo(
              self.words,
              { opacity: 0.18 },
              {
                opacity: 1,
                color,
                ease: "none",
                stagger: 0.12,
                duration: 0.4,
                scrollTrigger: { trigger: element, scroller, start, end: "bottom 45%", scrub: 0.4 },
              },
            );
          }

          // Returning the tween lets SplitText keep it in step when it re-splits
          return gsap.from(self.lines, {
            yPercent: 115,
            rotate: 3,
            transformOrigin: "0% 100%",
            duration,
            ease: "power4.out",
            stagger,
            scrollTrigger: { trigger: element, scroller, start, toggleActions: "play none none none" },
          });
        },
      });

      return () => {
        fill?.scrollTrigger?.kill();
        fill?.kill();
        split.revert();
      };
    },
    { scope: textRef, dependencies: [children, as, stagger, duration, highlight, highlightColor, start, scroller], revertOnUpdate: true },
  );

  // The key makes React build a fresh element when the text or tag changes, because SplitText
  // rewrites the inside of the old one.
  return createElement(as, { ref: textRef, key: `${as}:${children}`, className, style: { visibility: "hidden" } }, children);
}