"use client"; import React, { useEffect, useRef, useState } from "react"; import { motion, useMotionValue, useMotionValueEvent, useReducedMotion, useSpring, useTransform, type MotionValue, } from "motion/react"; export interface DepthGalleryProps { /** One plane per item — the camera flies through them front to back. */ items: React.ReactNode[]; /** Z distance between planes in px. */ spacing?: number; /** Scrollable ancestor when embedded; defaults to the window. */ scrollContainerRef?: React.RefObject; /** Show the 01 / 05 progress HUD. */ hud?: boolean; /** Camera-scrub spring stiffness. */ stiffness?: number; /** Camera-scrub spring damping. */ damping?: number; /** Camera-scrub spring mass. */ mass?: number; className?: string; } function hash(n: number) { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); } function smoothstep(from: number, to: number, value: number) { const t = Math.min(1, Math.max(0, (value - from) / (to - from))); return t * t * (3 - 2 * t); } /** * A scroll-scrubbed Z-flythrough — plates hang scattered in 3D space and the * scrollbar is the dolly: far plates loom out of the fog, near ones sweep * past the camera. */ export function DepthGallery({ items, spacing = 420, scrollContainerRef, hud = true, stiffness = 90, damping = 24, mass = 0.65, className, }: DepthGalleryProps) { const targetRef = useRef(null); const reduced = useReducedMotion(); const [vh, setVh] = useState(null); const n = items.length; useEffect(() => { const el = scrollContainerRef?.current; if (!el) return; const measure = () => setVh(el.clientHeight); measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, [scrollContainerRef]); const raw = useMotionValue(0); useEffect(() => { const container = scrollContainerRef?.current ?? null; const scroller: HTMLElement | Window = container ?? window; const update = () => { const el = targetRef.current; if (!el) return; const viewport = container ? container.clientHeight : window.innerHeight; const total = el.offsetHeight - viewport; const top = container ? el.getBoundingClientRect().top - container.getBoundingClientRect().top : el.getBoundingClientRect().top; raw.set(total > 0 ? Math.min(1, Math.max(0, -top / total)) : 0); }; update(); scroller.addEventListener("scroll", update, { passive: true }); window.addEventListener("resize", update); return () => { scroller.removeEventListener("scroll", update); window.removeEventListener("resize", update); }; }, [scrollContainerRef, raw, vh, n]); const progress = useSpring(raw, { stiffness, damping, mass }); const cameraX = useTransform(progress, [0, 0.25, 0.5, 0.75, 1], [-22, 16, -12, 18, 0]); const cameraY = useTransform(progress, [0, 0.3, 0.65, 1], [10, -8, 8, 0]); const cameraPitch = useTransform(progress, [0, 0.3, 0.65, 1], [2.5, -1.5, 1.8, 0]); const cameraBank = useTransform(progress, [0, 0.25, 0.5, 0.75, 1], [-1.6, 1.2, -0.8, 1.3, 0]); const [current, setCurrent] = useState(1); useMotionValueEvent(progress, "change", (p) => { setCurrent(Math.min(n, Math.max(1, Math.round(p * (n - 1)) + 1))); }); if (reduced) { return (

{items.map((item, i) => (

{item}

))}

); } const vhUnit = vh ? `${vh}px` : "100dvh"; return (

{items.map((item, i) => ( {item} ))} {hud && (

{String(current).padStart(2, "0")} / {String(n).padStart(2, "0")}

)}

); } function Plane({ i, n, spacing, progress, children, }: { i: number; n: number; spacing: number; progress: MotionValue; children: React.ReactNode; }) { const sx = (hash(i) - 0.5) * 180; const sy = (hash(i + 50) - 0.5) * 100; const transform = useTransform(progress, (p) => { const z = (p * (n - 1) - i) * spacing; return `translate(-50%, -50%) translate3d(${sx}px, ${sy}px, ${z}px)`; }); const opacity = useTransform(progress, (p) => { const z = (p * (n - 1) - i) * spacing; if (z >= 0) return 1 - smoothstep(0, spacing * 0.72, z); return 0.08 + 0.92 * (1 - smoothstep(0, spacing * 3.2, -z)); }); return ( {children} ); } export default DepthGallery;