Line mask reveal

"use client";

import * as React from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { SplitText } from "gsap/SplitText";

import { cn } from "@/lib/utils";

gsap.registerPlugin(useGSAP, SplitText);

const MOTION = "(prefers-reduced-motion: no-preference)";

/** Room for descenders inside each line's mask, in em, so `leading-none` headings keep their tails. */
const BLEED = 0.16;

type LineMaskRevealProps = React.ComponentProps<"h2"> & {
  /** The element to render. */
  as?: "h1" | "h2" | "h3" | "h4" | "p" | "div";
  /** Seconds each line takes to rise. */
  duration?: number;
  /** Seconds to wait after the heading enters view. */
  delay?: number;
};

/**
 * Lines of a heading slide up from behind a mask the first time it enters view. The markup is the plain
 * heading, so with no script or under reduced motion the text is simply there. The split only exists
 * while the entrance plays: before that it re-splits on resize, after that the text is plain again.
 */
function LineMaskReveal({ as = "h2", duration = 1.1, delay = 0, className, children, ...props }: LineMaskRevealProps) {
  const Tag = as as React.ElementType;
  const root = React.useRef<HTMLElement>(null);

  useGSAP(
    () => {
      const media = gsap.matchMedia();
      media.add(MOTION, (_, contextSafe) => {
        const element = root.current;
        if (!element || !contextSafe) return;
        let alive = true;
        let seen = false;
        let entrance: gsap.core.Tween | undefined;
        const watcher = new IntersectionObserver(
          (entries) => {
            if (!entries.some((e) => e.isIntersecting)) return;
            watcher.disconnect();
            seen = true;
            entrance?.play();
          },
          { threshold: 0.1 },
        );
        const start = contextSafe(() => {
          if (!alive) return;
          SplitText.create(element, {
            type: "lines",
            mask: "lines",
            tag: "span",
            aria: "none",
            autoSplit: true,
            onSplit(self: SplitText) {
              // Span wrappers stay valid inside any tag, but they are inline, and inline boxes ignore transforms.
              gsap.set(self.lines, { display: "block" });
              gsap.set(self.masks, { display: "block", paddingBottom: `${BLEED}em`, marginBottom: `${-BLEED}em` });
              entrance = gsap.from(self.lines, {
                yPercent: 100 + BLEED * 125,
                duration,
                delay,
                ease: "power3.out",
                stagger: Math.min(0.12, 0.6 / self.lines.length),
                paused: true,
                onComplete: () => void self.revert(),
              });
              if (seen) entrance.play();
              return entrance;
            },
          });
          watcher.observe(element);
        }) as () => void;
        // Lines are measured, so the split waits for the real font. Until then the text stays as it is.
        void document.fonts.ready.then(start);
        return () => {
          alive = false;
          watcher.disconnect();
        };
      });
      return () => media.revert();
    },
    { scope: root, dependencies: [duration, delay] },
  );

  return (
    <Tag ref={root} data-slot="line-mask-reveal" className={cn("m-0", className)} {...props}>
      {children}
    </Tag>
  );
}

export { LineMaskReveal };