Scroll Stack

"use client";

import * as React from "react";
import { useScroll } from "motion/react";

function subscribeReducedMotion(callback: () => void) {
  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
  mq.addEventListener("change", callback);
  return () => mq.removeEventListener("change", callback);
}

/** SSR-safe: hydrates as "no preference", then follows the media query. */
function usePrefersReducedMotion() {
  return React.useSyncExternalStore(
    subscribeReducedMotion,
    () => window.matchMedia("(prefers-reduced-motion: reduce)").matches,
    () => false,
  );
}

export interface ScrollStackItem {
  /** Stable key for the card. */
  id: string;
  /** Card content. */
  content: React.ReactNode;
}

export interface ScrollStackProps extends Omit<React.OlHTMLAttributes<HTMLOListElement>, "children"> {
  /** Cards to stack. Alternatively pass each card as a child. */
  items?: ScrollStackItem[];
  /** Each child becomes one card (used when `items` is not given). */
  children?: React.ReactNode;
  /** Scrollable ancestor that the stack scrolls inside. Defaults to the window. */
  container?: React.RefObject<HTMLElement | null>;
  /** Distance from the top of the scroll area where the first card pins, in px. */
  top?: number;
  /** Extra top offset per card, so earlier cards peek out above later ones, in px. */
  stackOffset?: number;
  /** How much a card shrinks for each card that lands on top of it (0.04 = 4%). */
  scaleStep?: number;
  /** Darken cards as they are covered. */
  dim?: boolean;
  /** Space between cards before they stack, in px. */
  gap?: number;
  /** Corner radius of the card shells, in px. */
  radius?: number;
  /** Show a small "01 / 05" counter on each card. */
  showIndex?: boolean;
  /** Accent used by the counter marker. */
  accent?: string;
  /** Classes added to every card shell. */
  cardClassName?: string;
}

const clamp01 = (n: number) => (n < 0 ? 0 : n > 1 ? 1 : n);

/**
 * Cards pin with `position: sticky` at incrementally larger top offsets, so they pile up as the
 * page (or a scrollable container) scrolls. Covered cards scale down and dim in proportion to how
 * far the following cards have travelled. Without JavaScript it is still a plain sticky stack;
 * the scale/dim effect is layered on top through CSS variables written outside React renders.
 */
export function ScrollStack({
  items,
  children,
  container,
  top = 16,
  stackOffset = 16,
  scaleStep = 0.04,
  dim = true,
  gap = 32,
  radius = 20,
  showIndex = true,
  accent = "#FF7448",
  cardClassName = "",
  className = "",
  style,
  ...props
}: ScrollStackProps) {
  const reduceMotion = usePrefersReducedMotion();
  const listRef = React.useRef<HTMLOListElement>(null);
  const cardRefs = React.useRef<(HTMLLIElement | null)[]>([]);
  const { scrollY } = useScroll(container ? { container } : undefined);

  const cards: { key: React.Key; content: React.ReactNode }[] = items
    ? items.map((item) => ({ key: item.id, content: item.content }))
    : React.Children.toArray(children).map((child, i) => ({
        key: React.isValidElement(child) && child.key != null ? child.key : i,
        content: child,
      }));
  const count = cards.length;

  React.useEffect(() => {
    const list = listRef.current;
    if (!list) return;
    const scroller = container?.current ?? null;
    const els = cardRefs.current.slice(0, count);

    // Natural (un-stuck) geometry, measured from layout rather than from the sticky elements'
    // live positions: the list's top inside the scroll area and every card's height.
    let listTop = 0;
    let heights: number[] = [];

    const measure = () => {
      const rect = list.getBoundingClientRect();
      // Compensate for CSS transforms on ancestors (e.g. a zoomed preview stage).
      const ratio = list.offsetHeight ? rect.height / list.offsetHeight || 1 : 1;
      if (scroller) {
        const box = scroller.getBoundingClientRect();
        listTop = (rect.top - box.top) / ratio - scroller.clientTop + scroller.scrollTop;
      } else {
        listTop = rect.top / ratio + window.scrollY;
      }
      heights = els.map((el) => el?.offsetHeight ?? 0);
    };

    const update = () => {
      const y = scrollY.get();
      // arrival[j]: 0 → 1 while card j travels from just below card j-1 to its pinned slot.
      const arrival: number[] = new Array(count).fill(0);
      let natural = 0;
      for (let j = 0; j < count; j++) {
        if (j > 0) {
          natural += heights[j - 1] + gap;
          const pinnedAt = listTop + natural - (top + j * stackOffset);
          const travel = Math.max(1, heights[j - 1] + gap - stackOffset);
          arrival[j] = clamp01((y - (pinnedAt - travel)) / travel);
        }
      }
      let covered = 0;
      for (let i = count - 1; i >= 0; i--) {
        const el = els[i];
        if (el) el.style.setProperty("--ss-depth", reduceMotion ? "0" : covered.toFixed(4));
        covered += arrival[i];
      }
    };

    measure();
    update();
    const unsubscribe = scrollY.on("change", update);
    const ro = new ResizeObserver(() => {
      measure();
      update();
    });
    ro.observe(list);
    if (scroller) ro.observe(scroller);
    window.addEventListener("resize", measure);
    return () => {
      unsubscribe();
      ro.disconnect();
      window.removeEventListener("resize", measure);
      for (const el of els) el?.style.removeProperty("--ss-depth");
    };
  }, [container, scrollY, count, top, stackOffset, gap, reduceMotion]);

  return (
    <ol
      ref={listRef}
      className={`flex flex-col ${className}`}
      style={{
        gap,
        ["--ss-step" as string]: reduceMotion ? 0 : scaleStep,
        ["--ss-accent" as string]: accent,
        ...style,
      }}
      {...props}
    >
      {cards.map((card, i) => (
        <li
          key={card.key}
          ref={(node) => {
            cardRefs.current[i] = node;
          }}
          className="sticky"
          style={{ top: top + i * stackOffset }}
        >
          <div
            className={`relative origin-top overflow-hidden border border-zinc-900/10 bg-white text-zinc-900 shadow-[0_-10px_30px_-18px_rgba(0,0,0,0.28),0_1px_2px_rgba(0,0,0,0.04)] [scale:calc(1_-_var(--ss-depth,0)_*_var(--ss-step,0))] dark:border-white/10 dark:bg-zinc-900 dark:text-zinc-100 dark:shadow-[0_-10px_30px_-18px_rgba(0,0,0,0.9)] ${cardClassName}`}
            style={{ borderRadius: radius }}
          >
            {showIndex && (
              <span
                aria-hidden="true"
                className="pointer-events-none absolute right-4 top-4 z-10 flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-[0.14em] tabular-nums text-zinc-500 dark:text-zinc-400"
              >
                <span className="h-1.5 w-1.5 rounded-full bg-[var(--ss-accent)]" />
                {String(i + 1).padStart(2, "0")} / {String(count).padStart(2, "0")}
              </span>
            )}
            {card.content}
            {dim && (
              // Covered cards darken; capped so their top edge stays legible.
              <span
                aria-hidden="true"
                className="pointer-events-none absolute inset-0 bg-zinc-950 [opacity:min(calc(var(--ss-depth,0)_*_0.16),0.5)] dark:bg-black"
              />
            )}
          </div>
        </li>
      ))}
    </ol>
  );
}