Parallax

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useEffect, useRef } from "react";4 5/**6 * Moves its children against the scroll, at a rate you choose.7 *8 * Driven by one rAF loop writing a transform, not by a scroll handler. A9 * handler that writes styles on every scroll event forces layout inside the10 * scroll itself, which is the classic way to make a page feel heavy — and11 * scroll fires far more often than the compositor can paint, so most of that12 * work is discarded anyway.13 *14 * The offset is derived from the element's position relative to the VIEWPORT15 * CENTRE rather than from absolute scrollY. That makes the effect independent16 * of where the element sits in the document: it is neutral when centred and17 * symmetric either side, so the same speed value looks the same at the top of18 * a page and at the bottom.19 */20 21export interface ParallaxProps {22  children: React.ReactNode;23  /** Negative moves against the scroll, positive with it. */24  speed?: number;25  axis?: "y" | "x";26  /** Caps the travel so content cannot drift out of its container. */27  clamp?: number;28  still?: boolean;29  className?: string;30}31 32export function Parallax({33  children,34  speed = -0.2,35  axis = "y",36  clamp = 180,37  still = false,38  className = "",39}: ParallaxProps) {40  const hostRef = useRef<HTMLDivElement>(null);41  const moverRef = useRef<HTMLDivElement>(null);42 43  useEffect(() => {44    const host = hostRef.current;45    const mover = moverRef.current;46    if (!host || !mover) return;47 48    const reduced =49      still ||50      (typeof matchMedia === "function" &&51        matchMedia("(prefers-reduced-motion: reduce)").matches);52    if (reduced) return;53 54    let frame = 0;55    let last = Number.NaN;56    let visible = true;57 58    // Only runs while the element is on screen. A page with a dozen of these59    // would otherwise keep measuring all of them forever.60    const observer = new IntersectionObserver(61      ([entry]) => {62        visible = entry.isIntersecting;63      },64      { rootMargin: "20% 0px" },65    );66    observer.observe(host);67 68    const tick = () => {69      if (visible) {70        const box = host.getBoundingClientRect();71        // Distance from the viewport centre: neutral when centred, so the72        // same speed reads identically anywhere in the document.73        const fromCentre = box.top + box.height / 2 - window.innerHeight / 2;74        const raw = fromCentre * speed;75        const offset = Math.max(-clamp, Math.min(clamp, raw));76 77        // Only touch the DOM when the value actually changed — sub-pixel78        // churn would invalidate the layer every frame for no visible gain.79        const rounded = Math.round(offset * 100) / 100;80        if (rounded !== last) {81          last = rounded;82          mover.style.transform =83            axis === "y"84              ? `translate3d(0, ${rounded}px, 0)`85              : `translate3d(${rounded}px, 0, 0)`;86        }87      }88      frame = requestAnimationFrame(tick);89    };90 91    frame = requestAnimationFrame(tick);92 93    return () => {94      cancelAnimationFrame(frame);95      observer.disconnect();96      mover.style.transform = "";97    };98  }, [speed, axis, clamp, still]);99 100  return (101    <div ref={hostRef} className={className}>102      <div ref={moverRef} className="will-change-transform">103        {children}104      </div>105    </div>106  );107}108