Settle Text

"use client";

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

// Big headline rows. As a row scrolls into view it slides in from the side while its letters
// drop in from above and below (every other letter from the opposite side) and settle into the
// word. The next row slides in from the other side, so the page zig-zags as you scroll.

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

export type SettleTextProps = {
  /** The headlines, one per row. */
  lines: string[];
  /** Scroll smoothing in seconds: how long the text takes to catch up with the scrollbar. 0 follows it exactly. */
  scrub?: number;
  /** How far a row slides in from the side, as a percent of its width. 0 means no slide. */
  offset?: number;
  /** How much later each letter settles than the one before it, as a fraction of the row's scroll. */
  letterStagger?: number;
  /** How far, in pixels, the letters start above or below their place. */
  drop?: number;
  /** Slide every other row in from the opposite side, and settle its letters from the other end. */
  alternate?: boolean;
  /** The element that scrolls (an element or a CSS selector). The default is the window. */
  scroller?: HTMLElement | string | null;
  /** Extra classes for the outer box. */
  className?: string;
  /** Extra classes for every row. Sets the row height (85svh by default) and can set a background. */
  rowClassName?: string;
  /** Extra classes per row, repeating if there are more rows than entries. Handy for a background per row. */
  rowClassNames?: string[];
  /** Extra classes for the headline text, e.g. a font size or a font. */
  headingClassName?: string;
};

export function SettleText({
  lines,
  scrub = 1,
  offset = 100,
  letterStagger = 0.04,
  drop = 150,
  alternate = true,
  scroller = null,
  className = "",
  rowClassName = "h-[85svh]",
  rowClassNames = [],
  headingClassName = "text-[clamp(2.5rem,13vw,9rem)]",
}: SettleTextProps) {
  const boxRef = useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      const box = boxRef.current;
      if (!box) return;

      // Reduced motion: nothing is split or moved, the headlines just sit there, readable.
      const mm = gsap.matchMedia();
      mm.add("(prefers-reduced-motion: no-preference)", () => {
        const splits: SplitText[] = [];

        gsap.utils.toArray<HTMLElement>("[data-settle-row]", box).forEach((row, rowIndex) => {
          const track = row.querySelector<HTMLElement>("[data-settle-track]");
          const heading = row.querySelector<HTMLElement>("[data-settle-heading]");
          if (!track || !heading) return;

          // Each letter becomes its own inline-block, so it can move on its own.
          // SplitText also keeps the whole word readable for screen readers.
          const split = SplitText.create(heading, { type: "chars", charsClass: "settle-char" });
          splits.push(split);
          const letters = split.chars as HTMLElement[];
          const count = letters.length;
          if (count === 0) return;

          // Odd rows go the other way: they slide in from the left and settle their last letter first.
          const flipped = alternate && rowIndex % 2 === 1;
          const side = flipped ? -1 : 1;

          // The row's scroll is one timeline of length 1. The letters start at 0.1 and all
          // finish by 1, so each letter's trip is whatever is left after the stagger.
          // The stagger is capped so every letter still has a short trip.
          const step = count > 1 ? Math.min(letterStagger, 0.7 / (count - 1)) : 0;
          const trip = 0.9 - step * (count - 1);

          const timeline = gsap.timeline({
            defaults: { ease: "none" },
            scrollTrigger: {
              trigger: row,
              ...(scroller ? { scroller } : {}),
              start: "top bottom",
              end: "top top",
              scrub: scrub > 0 ? scrub : true,
            },
          });

          timeline.fromTo(track, { xPercent: offset * side }, { xPercent: 0, duration: 1 }, 0);
          letters.forEach((letter, index) => {
            const order = flipped ? count - 1 - index : index;
            const from = index % 2 === 0 ? -drop : drop;
            timeline.fromTo(letter, { y: from }, { y: 0, duration: trip }, 0.1 + order * step);
          });
        });

        return () => splits.forEach((split) => split.revert());
      });

      return () => mm.revert();
    },
    { scope: boxRef, dependencies: [lines.join("\n"), scrub, offset, letterStagger, drop, alternate, scroller], revertOnUpdate: true },
  );

  return (
    <div ref={boxRef} className={`w-full ${className}`}>
      {lines.map((line, index) => (
        <div
          key={`${index}-${line}`}
          data-settle-row=""
          className={`flex w-full items-center overflow-hidden ${rowClassName} ${rowClassNames.length ? (rowClassNames[index % rowClassNames.length] ?? "") : ""}`}
        >
          <div data-settle-track="" className="flex w-full justify-center will-change-transform">
            <h2 data-settle-heading="" className={`m-0 font-extrabold leading-[0.92] tracking-[-0.03em] whitespace-nowrap ${headingClassName}`}>
              {line}
            </h2>
          </div>
        </div>
      ))}
    </div>
  );
}