Parallax layers

"use client";

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

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

gsap.registerPlugin(useGSAP, ScrollTrigger);

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

type ParallaxLayersProps = React.ComponentProps<"div"> & {
  /** Furthest any layer travels from rest, as a fraction of the frame height. */
  range?: number;
};

/**
 * A frame of stacked layers that drift at different rates as it crosses the window. Every layer
 * hangs past the frame by exactly the distance it can travel, so no edge ever shows, and each one
 * passes through its rest position when the frame is centred. Reduced motion is that rest position.
 */
function ParallaxLayers({ range = 0.12, className, style, children, ...props }: ParallaxLayersProps) {
  const root = React.useRef<HTMLDivElement>(null);

  useGSAP(
    () => {
      const media = gsap.matchMedia();
      media.add(MOTION, () => {
        const frame = root.current;
        if (!frame) return;
        const timeline = gsap.timeline({
          defaults: { ease: "none", duration: 1 },
          scrollTrigger: {
            trigger: frame,
            start: "top bottom",
            end: "bottom top",
            scrub: true,
            invalidateOnRefresh: true,
          },
        });
        gsap.utils.toArray<HTMLElement>("[data-slot=parallax-layer]").forEach((layer) => {
          const travel = () => Number(layer.dataset.depth) * range * frame.offsetHeight;
          timeline.fromTo(layer, { y: travel }, { y: () => -travel() }, 0);
        });
      });
      return () => media.revert();
    },
    { scope: root, dependencies: [range] },
  );

  return (
    <div
      ref={root}
      data-slot="parallax-layers"
      className={cn("relative isolate overflow-hidden", className)}
      style={{ "--parallax-range": range, ...style } as React.CSSProperties}
      {...props}
    >
      {children}
    </div>
  );
}

type ParallaxLayerProps = React.ComponentProps<"div"> & {
  /**
   * How far this layer travels: 0 rides with the frame, 1 moves the full range with the scroll,
   * -1 moves the full range against it. Values past 1 are capped.
   */
  depth?: number;
};

/** One plane. It fills the frame plus the distance it can travel, so it never shows an edge. */
function ParallaxLayer({ depth = 0, className, style, children, ...props }: ParallaxLayerProps) {
  const capped = Math.max(-1, Math.min(1, depth));

  return (
    <div
      data-slot="parallax-layer"
      data-depth={capped}
      className={cn(
        "absolute inset-x-0 top-[calc(var(--parallax-range)*var(--parallax-depth)*-100%)] bottom-[calc(var(--parallax-range)*var(--parallax-depth)*-100%)]",
        className,
      )}
      style={{ "--parallax-depth": Math.abs(capped), ...style } as React.CSSProperties}
      {...props}
    >
      {children}
    </div>
  );
}

export { ParallaxLayers, ParallaxLayer };