4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2a04,"use client"; import { useEffect, useRef, type CSSProperties } from "react"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { useGSAP } from "@gsap/react"; // A stack of tall photo cards that arrive one after another. The page pins a single stage; as you // scroll, the next card rises from the bottom while the card under it fades, lifts and tips back // into the screen, as if it were falling away into a room behind the page. // One pin and one scrubbed timeline run the whole thing (the first version pinned every card on its // own, which got heavy with a dozen cards). The animation is tied to the scrollbar, so it also // plays backwards when you scroll up. if (typeof window !== "undefined") gsap.registerPlugin(useGSAP, ScrollTrigger); export type Section3DCard = { /** The photo. */ image: string; /** Alt text for the photo. Falls back to the name. */ imageAlt?: string; /** A small label above the name, e.g. "01 / 08". */ number: string; /** The big line on the card. */ name: string; /** The line under the name. */ role: string; /** A short quote at the bottom of the card. Leave it out for no quote. */ quote?: string; }; export type Section3DProps = { /** The cards, in the order they arrive. */ cards: Section3DCard[]; /** The big heading of the opening screen. */ introTitle?: string; /** The paragraph under it. Pass an empty string to leave it out. */ introDescription?: string; /** How far a card tips back while the next one arrives, in degrees. */ tilt?: number; /** How far a card sinks away from you, in pixels. */ depth?: number; /** How far a card rises while it recedes, as a percentage of its own height. */ lift?: number; /** How much a receding card fades out, from 0 (stays solid) to 1 (fully gone). */ fade?: number; /** Depth of the 3D effect, in pixels. Smaller is more dramatic. */ perspective?: number; /** How much scrolling one hand-over takes, in screens. 1 moves the next card exactly with your scroll. */ scrollPerCard?: number; /** The start colour of the heading underline and the small line on each card. */ accent?: string; /** The end colour of those two gradients. */ accentEnd?: string; /** The colour behind the cards. Use a dark one: the text on the page is light. */ backdrop?: string; /** The scrolling element. Leave it out to use the page; give it a selector or an element for an inner scroller. */ scroller?: string | HTMLElement; /** Extra classes for the outer wrapper. */ className?: string; }; export function Section3D({ cards, introTitle = "Portraits", introDescription = "Eight photos in one stack. Scroll to bring the next one up.", tilt = 80, depth = 800, lift = 25, fade = 1, perspective = 1000, scrollPerCard = 1, accent = "#ff6b35", accentEnd = "#f7c59f", backdrop = "#160f03", scroller, className = "", }: Section3DProps) { const rootRef = useRef(null); const cardCount = cards.length; // The motion settings are read by the tweens when they (re)measure, so dragging a slider in a // playground doesn't rebuild the pin and throw the visitor back up the page const settings = useRef({ tilt, depth, lift, fade, scrollPerCard }); settings.current = { tilt, depth, lift, fade, scrollPerCard }; const trigger = useRef(null); useGSAP( () => { const root = rootRef.current; if (!root || cardCount === 0) return; const mm = gsap.matchMedia(); // Reduced motion: nothing is pinned or tipped. The cards are just a tall page, one after another. mm.add("(prefers-reduced-motion: no-preference)", () => { const stage = root.querySelector("[data-s3d-stage]"); const slots = gsap.utils.toArray("[data-s3d-slot]", root); const faces = gsap.utils.toArray("[data-s3d-card]", root); const line = root.querySelector("[data-s3d-line]"); if (!stage) return; // Inside an inner scroller, "a screen" means that scroller's height, not the window's const scrollEl = typeof scroller === "string" ? document.querySelector(scroller) : scroller; const syncHeight = (): void => { root.style.setProperty("--s3d-h", scrollEl ? `${scrollEl.clientHeight}px` : "100svh"); }; syncHeight(); ScrollTrigger.addEventListener("refreshInit", syncHeight); // The slow light that runs down the line at the bottom of the opening screen if (line) gsap.fromTo(line, { yPercent: -100 }, { yPercent: 100, duration: 2, ease: "sine.inOut", repeat: -1 }); // One timeline, one step per hand-over: card i+1 rises into view while card i falls back. // Every step is one unit long and the steps run back to back, so scrub keeps them in order. if (cardCount > 1) { const handOvers = gsap.timeline({ defaults: { ease: "none", duration: 1 }, scrollTrigger: { trigger: stage, scroller, start: "top top", // Measured on every refresh, so rotating a phone or resizing the window stays correct end: () => `+=${(cardCount - 1) * stage.offsetHeight * settings.current.scrollPerCard}`, pin: true, scrub: true, anticipatePin: 1, invalidateOnRefresh: true, }, }); trigger.current = handOvers.scrollTrigger ?? null; for (let i = 1; i < cardCount; i++) { // The new card starts just below the stage (its slot sits at top: 100%) and climbs to the top handOvers.fromTo(slots[i]!, { yPercent: 0 }, { yPercent: -100 }, i - 1); handOvers.fromTo( faces[i - 1]!, { opacity: 1, yPercent: 0, z: 0, rotationX: 0 }, { opacity: () => 1 - settings.current.fade, yPercent: () => -settings.current.lift, z: () => -settings.current.depth, rotationX: () => settings.current.tilt, transformOrigin: "50% 50%", force3D: true, }, i - 1, ); } } // A scroller that changes size (a resizable panel, for example) needs the pin measured again let measure: gsap.core.Tween | undefined; const observer = scrollEl ? new ResizeObserver(() => { measure?.kill(); measure = gsap.delayedCall(0.2, () => ScrollTrigger.refresh()); }) : null; if (scrollEl) observer?.observe(scrollEl); return () => { measure?.kill(); observer?.disconnect(); ScrollTrigger.removeEventListener("refreshInit", syncHeight); trigger.current = null; root.style.removeProperty("--s3d-h"); }; }); return () => mm.revert(); }, { scope: rootRef, dependencies: [cardCount, scroller], revertOnUpdate: true }, ); // New motion settings: measure the pin again, keeping the scroll position useEffect(() => { trigger.current?.refresh(); }, [tilt, depth, lift, fade, scrollPerCard]); const style = { backgroundColor: backdrop, "--s3d-h": "100svh" } as CSSProperties; const gradient = `linear-gradient(90deg, ${accent}, ${accentEnd})`; return (

{/* The opening screen. It scrolls like a normal page. */}

{introTitle}

{introDescription ?

{introDescription}

: null}

{/* The stage that gets pinned. The cards sit stacked inside it. */}

{card.number}
{card.name}

{card.role}

{card.quote ?
“{card.quote}”
: null}

); } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","gsap",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/gsap","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"gsap"}]]}]}],["$","li","@gsap/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40gsap%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@gsap/react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/dimaac/section-3d/section-3d.tsx","content":"$50","type":"registry:component","target":"components/dimaac/section-3d.tsx"}],"className":"h-[70svh] min-h-80"}]]}]

{introTitle}

{card.name}