Parallax

npm install motion clsx tailwind-merge

import { clsx, type ClassValue } from "clsx";
import { extendTailwindMerge } from "tailwind-merge";

/* tailwind-merge must know the site's type scale (globals.css) is a font size, not a text color — otherwise
   cn("text-h6 text-muted-foreground") drops text-h6. */
const twMerge = extendTailwindMerge({
  extend: { classGroups: { "font-size": [{ text: ["display", "h1", "h2", "h3", "h4", "h5", "h6"] }] } },
});

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

/*
 * Parallax — content that drifts against the page while the frame scrolls past (from the Nitip "Parallax" image band).
 * Put an image, a video or anything else inside; the frame keeps its own size and clips the oversized layer.
 * The transform is written straight to the element in a passive scroll listener, as Framer does, so it never lags a
 * frame behind and never goes stale when images load late.
 *
 * Deviation from Framer: Framer ties the shift to the whole page scroll, which drifts further the longer the page is.
 * Here the shift is bounded to one pass of the frame through the viewport (`speed` % of the frame height), so the
 * effect is the same at any page length and no gap can appear. Static with reduced motion.
 */

export type ParallaxProps = {
  children: React.ReactNode;
  /** How far the content travels over one pass, as a percentage of the frame height. */
  speed?: number;
  direction?: "vertical" | "horizontal";
  className?: string;
};

export function Parallax({ children, speed = 20, direction = "vertical", className }: ParallaxProps) {
  const frame = React.useRef<HTMLDivElement>(null);
  const layer = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    const frameEl = frame.current;
    const layerEl = layer.current;
    if (!frameEl || !layerEl) return;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      layerEl.style.transform = "";
      return;
    }

    let distance = 0;
    const update = () => {
      const rect = frameEl.getBoundingClientRect();
      const span = window.innerHeight + rect.height;
      /* 0 as the frame enters at the bottom, 1 as it leaves at the top. */
      const progress = span ? Math.min(1, Math.max(0, (window.innerHeight - rect.top) / span)) : 0;
      const shift = (0.5 - progress) * distance;
      layerEl.style.transform =
        direction === "vertical" ? `translate3d(0, ${shift}px, 0)` : `translate3d(${shift}px, 0, 0)`;
    };
    const measure = () => {
      const rect = frameEl.getBoundingClientRect();
      distance = ((direction === "vertical" ? rect.height : rect.width) * speed) / 100;
      update();
    };

    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(frameEl);
    window.addEventListener("resize", measure);
    window.addEventListener("scroll", update, { passive: true });
    return () => {
      observer.disconnect();
      window.removeEventListener("resize", measure);
      window.removeEventListener("scroll", update);
    };
  }, [speed, direction]);

  /* The layer is oversized by `speed` so its edges never come into view. */
  const inset =
    direction === "vertical"
      ? { top: `-${speed / 2}%`, bottom: `-${speed / 2}%`, left: 0, right: 0 }
      : { left: `-${speed / 2}%`, right: `-${speed / 2}%`, top: 0, bottom: 0 };

  return (
    <div ref={frame} className={cn("relative overflow-hidden", className)}>
      <div ref={layer} style={{ position: "absolute", ...inset }} className="will-change-transform *:size-full">
        {children}
      </div>
    </div>
  );
}