50: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"] 51: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"] 52:T27a3,"use client"; import { useRef, useState } from "react"; import { gsap } from "gsap"; import { Flip } from "gsap/Flip"; import { useGSAP } from "@gsap/react"; // A deck of photos stacked on a diagonal. Click it (or press an arrow key, or swipe) and the front // card slides away while the rest step forward and a fresh card settles in at the back. // GSAP Flip does the stepping: React moves the cards to their new spots, Flip then plays the // move backwards-to-forwards, so the animation always starts exactly where the cards were. if (typeof window !== "undefined") gsap.registerPlugin(Flip); export type StackedCard = { /** Image address. */ image: string; /** What the photo shows, for screen readers. */ alt?: string; }; export type StackedCardSliderProps = { /** The cards, front card first. Each click brings the next one to the front. */ cards: StackedCard[]; /** Width of a card, in pixels. It shrinks on its own if the box is narrower. */ cardWidth?: number; /** How far each card behind sticks out up and to the right, in pixels. */ offsetStep?: number; /** Card width divided by card height. 0.67 is a 2:3 portrait. */ aspectRatio?: number; /** How many cards show in the stack at once (the rest wait invisibly behind the last one). */ visibleCards?: number; /** How long one step takes, in seconds. */ duration?: number; /** The GSAP ease of the step, e.g. "sine.inOut" or "expo.inOut". */ ease?: string; /** Corner radius of the cards, in pixels. */ radius?: number; /** Called with the index (in `cards`) of the new front card as every step starts. */ onChange?: (index: number) => void; /** Extra classes for the outer box. Give it a size (it fills its parent); the stack sits in the middle of it. */ className?: string; /** Extra classes for each card image, e.g. a different shadow. */ cardClassName?: string; }; type View = { /** Which card is at the front */ front: number; /** The card that is flying away right now, drawn as a copy on top of everything */ leaving: number | null; }; type Pending = { /** Where the cards were before the step */ state: Flip.FlipState; /** +1 = forward, -1 = back */ step: 1 | -1; }; export function StackedCardSlider({ cards, cardWidth = 300, offsetStep = 20, aspectRatio = 0.67, visibleCards = 5, duration = 0.5, ease = "sine.inOut", radius = 6, onChange, className = "", cardClassName = "", }: StackedCardSliderProps) { const boxRef = useRef(null); const cardRefs = useRef<(HTMLImageElement | null)[]>([]); const leavingRef = useRef(null); const [view, setView] = useState({ front: 0, leaving: null }); // The step that was asked for and is waiting for React to move the cards const pending = useRef(null); const busy = useRef(false); // Read when a step starts, so a new duration or ease needs no rebuild const settings = useRef({ duration, ease, onChange }); settings.current = { duration, ease, onChange }; const touchStart = useRef<{ x: number; y: number } | null>(null); const swiped = useRef(false); const count = cards.length; // If the list changes length, start again from the first card const front = count === 0 ? 0 : view.front % count; const shown = Math.max(1, Math.min(count, Math.round(visibleCards))); const total = offsetStep * (shown - 1); const cardHeight = `calc(var(--stack-card-width) / ${aspectRatio})`; const { contextSafe } = useGSAP( () => { busy.current = false; return () => { busy.current = false; pending.current = null; }; }, { scope: boxRef }, ); // Runs right after React has moved the cards to their new spots useGSAP( () => { const job = pending.current; if (!job) return; pending.current = null; const els = cardRefs.current.slice(0, count).filter((el): el is HTMLImageElement => el !== null); const { duration: time, ease: curve } = settings.current; const finish = () => { busy.current = false; }; // The card flying away leaves toward the bottom left and fades out if (leavingRef.current) { gsap.to(leavingRef.current, { xPercent: -20, yPercent: 20, opacity: 0, transformOrigin: "bottom left", duration: time, ease: "expo.out", onComplete: () => setView((current) => ({ ...current, leaving: null })), }); } Flip.from(job.state, { targets: els, // The cards never change size, so move them with transforms only scale: true, duration: time, ease: curve, // The one card that was not measured before the step is the one that arrives onEnter: (entering) => gsap.from(entering, job.step === 1 ? { yPercent: 20, opacity: 0, duration: time, ease: "expo.out" } : { xPercent: -20, yPercent: 20, opacity: 0, transformOrigin: "bottom left", duration: time, ease: "expo.out" }), onComplete: finish, onInterrupt: finish, }); }, { scope: boxRef, dependencies: [view.front] }, ); const go = contextSafe((step: 1 | -1) => { if (busy.current || count < 2) return; const next = (front + step + count) % count; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; settings.current.onChange?.(next); if (reduced) { setView({ front: next, leaving: null }); return; } busy.current = true; const els = cardRefs.current.slice(0, count); // The card that arrives has no "before", so it is left out of the measurement const arriving = step === 1 ? front : next; const measured = els.filter((el, index): el is HTMLImageElement => el !== null && index !== arriving); pending.current = { state: Flip.getState(measured, { props: "opacity,filter" }), step }; setView({ front: next, leaving: step === 1 ? front : null }); }); const onKeyDown = (event: React.KeyboardEvent) => { if (event.key === "ArrowRight" || event.key === "ArrowDown") { event.preventDefault(); go(1); } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") { event.preventDefault(); go(-1); } }; // A swipe goes forward (to the left) or back (to the right); a plain tap is a click const onPointerDown = (event: React.PointerEvent) => { touchStart.current = { x: event.clientX, y: event.clientY }; swiped.current = false; }; const onPointerUp = (event: React.PointerEvent) => { const start = touchStart.current; touchStart.current = null; if (!start) return; const dx = event.clientX - start.x; const dy = event.clientY - start.y; if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy)) { swiped.current = true; go(dx < 0 ? 1 : -1); } }; const onClick = (event: React.MouseEvent) => { if (swiped.current) { swiped.current = false; return; } go(event.shiftKey ? -1 : 1); }; const spot = (rank: number) => { const slot = Math.min(rank, shown - 1); return { left: slot * offsetStep, top: total - slot * offsetStep }; }; const imageStyle = { width: "var(--stack-card-width)", height: cardHeight, borderRadius: radius, } as const; return (

{cards[front] ? `${cards[front]!.alt ?? `Card ${front + 1}`}, card ${front + 1} of ${count}` : ""}

); } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@dimaac","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/dimaac/stacked-card-slider/stacked-card-slider.tsx","content":"$52","type":"registry:component","target":"components/dimaac/stacked-card-slider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]