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:T27df,"use client"; import { useRef } from "react"; import { gsap } from "gsap"; import { useGSAP } from "@gsap/react"; // A zig-zag column of pictures that slide past each other as you scroll. Every picture has its own // speed: a fast one climbs the screen quicker than the page scrolls, a slow one lags behind, so // neighbours overlap and part again. A quick scroll also leans the pictures over (skew). // // It does NOT take over the page's scroll. The page scrolls natively; we only read where it is and // nudge each picture with a transform. The nudge is computed from the picture's own position, so // a picture sits exactly where the layout puts it when it is level with the middle of the screen // and drifts away from that spot as it travels. Pictures that are already on screen when the page // loads start at rest, so the first screen looks the way the layout was drawn. export type ScrollingGalleryImage = { /** The image address. */ src: string; /** Alt text for the picture. Use an empty string for a purely decorative one. */ alt: string; /** How fast this picture travels compared with the scroll. 1 moves with the page, above 1 climbs quicker, below 1 lags behind. */ speed?: number; }; export type ScrollingGalleryProps = { /** The pictures, top to bottom. */ images: ScrollingGalleryImage[]; /** How strongly the pictures drift from their spot. 0 turns the parallax off, 1 is each picture's own speed, 2 doubles it. */ parallax?: number; /** The most a picture leans, in degrees, when the page scrolls fast. 0 never leans. */ skew?: number; /** How long a picture takes to catch up with the scroll, in seconds. A little lag feels soft. 0 follows the scroll exactly. */ smoothing?: number; /** Width of each picture as a percent of the gallery. On a phone-wide gallery it grows to about half so the pictures stay big, and it never gets too wide for the zig-zag to fit. */ size?: number; /** How far apart the left and right pictures sit, as a percent of a picture's width. 0 stacks them in one column. */ stagger?: number; /** Space between the pictures in the column, in pixels. */ gap?: number; /** Width divided by height of each picture. 1 is square, 0.8 is a 4:5 portrait. */ aspectRatio?: number; /** The element that scrolls, or a selector for it. Leave it out to follow the window. */ scroller?: HTMLElement | string | null; /** An id for the outer box. */ id?: string; /** Extra classes for the outer box. */ className?: string; /** Extra classes for each picture, e.g. a radius or a shadow. */ imageClassName?: string; }; function resolveScroller(scroller: ScrollingGalleryProps["scroller"]): HTMLElement | null { if (!scroller) return null; if (typeof scroller === "string") return document.querySelector(scroller); return scroller; } const clamp = (min: number, max: number, value: number) => Math.min(max, Math.max(min, value)); export function ScrollingGallery({ images, parallax = 1, skew = 8, smoothing = 0.6, size = 26, stagger = 40, gap = 0, aspectRatio = 1, scroller = null, id, className = "", imageClassName = "", }: ScrollingGalleryProps) { const rootRef = useRef(null); const rowRefs = useRef<(HTMLLIElement | null)[]>([]); const imageRefs = useRef<(HTMLImageElement | null)[]>([]); // Read on every frame, so moving these sliders doesn't rebuild anything const live = useRef({ parallax, skew }); live.current = { parallax, skew }; // The speeds are read when measuring and on every frame, so a changed speed lands without a rebuild const speeds = useRef([]); speeds.current = images.map((image) => image.speed ?? 1); useGSAP( () => { const root = rootRef.current; const rows = rowRefs.current.slice(0, images.length).filter((row): row is HTMLLIElement => row !== null); const pictures = imageRefs.current.slice(0, images.length).filter((image): image is HTMLImageElement => image !== null); if (!root || rows.length === 0 || rows.length !== pictures.length) return; // Reduced motion: nothing below runs, the pictures stay where the layout puts them const mm = gsap.matchMedia(); mm.add("(prefers-reduced-motion: no-preference)", () => { const scrollElement = resolveScroller(scroller); const readScroll = () => (scrollElement ? scrollElement.scrollTop : window.scrollY); // The visible part of whatever scrolls: its top edge and height, in window coordinates const readView = () => { if (!scrollElement) return { top: 0, height: window.innerHeight }; return { top: scrollElement.getBoundingClientRect().top, height: scrollElement.clientHeight }; }; const moveY = pictures.map((picture) => gsap.quickTo(picture, "y", { duration: Math.max(smoothing, 0.0001), ease: "power3.out" })); const lean = gsap.quickTo(pictures, "skewY", { duration: 0.5, ease: "power3.out" }); // Where each row's middle sits in the root, and the distance from the middle of the screen // at which that row is "at rest" (its drift is zero there). That is the middle of the screen, // unless the row is already on screen when the page is at the top: then it rests where it starts. let middles: number[] = []; let restOffsets: number[] = []; const measure = () => { const view = readView(); const rootTop = root.getBoundingClientRect().top; const scrollTopInContent = rootTop - view.top + readScroll(); middles = rows.map((row) => { const box = row.getBoundingClientRect(); return box.top - rootTop + box.height / 2; }); restOffsets = middles.map((middle) => { const middleAtScrollZero = scrollTopInContent + middle; const startsOnScreen = middleAtScrollZero >= 0 && middleAtScrollZero <= view.height; return startsOnScreen ? middleAtScrollZero - view.height / 2 : 0; }); }; measure(); let lastScroll = readScroll(); let velocity = 0; // pixels per second, smoothed. Positive means scrolling down. let visible = true; const tick = (_time: number, deltaMs: number) => { const dt = Math.min(deltaMs, 50) / 1000; if (dt <= 0) return; const scrolled = readScroll(); const rawVelocity = (scrolled - lastScroll) / dt; lastScroll = scrolled; // Wheel ticks arrive in bursts, so smooth them velocity += (rawVelocity - velocity) * (1 - Math.exp(-dt * 10)); if (!visible) return; const { parallax: strength, skew: maxSkew } = live.current; const view = readView(); const rootTop = root.getBoundingClientRect().top - view.top; rows.forEach((_, index) => { const fromMiddle = rootTop + middles[index]! - view.height / 2 - restOffsets[index]!; // Bounded, so a picture far away never flies off const travelled = clamp(-view.height, view.height, fromMiddle); moveY[index]!(((speeds.current[index] ?? 1) - 1) * strength * travelled); }); // Scrolling down leans the pictures one way, up the other. About 900px a second leans fully. lean(clamp(-maxSkew, maxSkew, (-velocity / 900) * maxSkew)); }; gsap.ticker.add(tick); // The gallery changing size (a resize, a new gap or size) moves every row, so measure again const resizeObserver = new ResizeObserver(measure); resizeObserver.observe(root); window.addEventListener("resize", measure); // Images and fonts above the gallery can push it down after the first measure window.addEventListener("load", measure); // No work while the gallery is off screen const visibility = new IntersectionObserver(([entry]) => { visible = entry?.isIntersecting ?? true; }, { rootMargin: "200px 0px" }); visibility.observe(root); return () => { gsap.ticker.remove(tick); resizeObserver.disconnect(); visibility.disconnect(); window.removeEventListener("resize", measure); window.removeEventListener("load", measure); gsap.killTweensOf(pictures); gsap.set(pictures, { clearProps: "transform" }); }; }); return () => mm.revert(); }, { scope: rootRef, dependencies: [images.length, scroller, smoothing], revertOnUpdate: true }, ); // The two columns sit `stagger` percent of a picture apart, so each row moves half of that. // The widest the zig-zag may make a picture is the width at which it still fits the box. const widest = 100 / (1 + stagger / 100); // In a box narrower than about 620px the picture grows to roughly half of it (the 4 is how fast // it ramps up), so phones don't get thumbnails. In a wider box this is 0 and `size` rules. const phoneFloor = "clamp(0px, calc((620px - 100%) * 4), 52%)"; return (

{ rowRefs.current[index] = row; }} className="flex justify-center" >
{ imageRefs.current[index] = picture; }} src={image.src} alt={image.alt} loading="lazy" decoding="async" draggable={false} className={`block w-full object-cover will-change-transform ${imageClassName}`} style={{ aspectRatio }} />

); } 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/scrolling-gallery/scrolling-gallery.tsx","content":"$52","type":"registry:component","target":"components/dimaac/scrolling-gallery.tsx"}],"className":"h-[70svh] min-h-80"}]]}]