4f: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"] 50: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"] 51:T4f16,"use client"; import { useRef, useState, useSyncExternalStore, type ReactNode } from "react"; import { gsap } from "gsap"; import { Observer } from "gsap/Observer"; import { useGSAP } from "@gsap/react"; // A full-bleed image slider. The next photo opens over the old one through a clip-path while the // old one slowly zooms back, a framed copy of the photo in the middle opens from the opposite edge, // and the counter and title roll to the new slide. Every layer is in the page from the start; the // slider only moves clip-paths and transforms, so a change never waits for React or an image. if (typeof window !== "undefined") gsap.registerPlugin(Observer, useGSAP); export type ClipSliderSlide = { /** The photo, shown full-bleed and in the frame */ src: string; /** Rolled in at the bottom left. Leave every title out to hide the line. */ title?: string; /** Describes the photo for screen readers. Empty means the photo is decoration. */ alt?: string; }; export type ClipSliderProps = { /** The slides, in order. Two or more to slide; it loops at both ends. */ slides: ClipSliderSlide[]; /** How long one change takes, in seconds. */ duration?: number; /** How far the incoming photo is zoomed in before it settles to 1. The old photo zooms half as far. */ zoom?: number; /** The GSAP ease of a change. */ ease?: string; /** Which way the photos open: up and down, or sideways. */ direction?: "vertical" | "horizontal"; /** Seconds between automatic changes. 0 turns it off (it's always off with reduced motion). */ autoplay?: number; /** Show the rolling "01 / 06" counter. */ showCounter?: boolean; /** Show the framed copy of the photo in the middle. */ showFrame?: boolean; /** How visitors change slides: the wheel (and swipes on touch), arrow buttons, or both. Arrow keys always work. */ controls?: "wheel" | "buttons" | "both"; /** Names the slider for screen readers. */ label?: string; /** Called with the new slide's index when a change starts. */ onChange?: (index: number) => void; /** Extra classes for the outer box. Give it a size (it fills it). */ className?: string; /** Content laid over the slides (a logo, a nav). Its own links and buttons stay clickable. */ children?: ReactNode; }; // A clip-path that hides the layer by squashing it against one edge, so opening it to OPEN // sweeps the photo in from that edge const OPEN = "inset(0% 0% 0% 0%)"; const closedAt = { top: "inset(0% 0% 100% 0%)", bottom: "inset(100% 0% 0% 0%)", left: "inset(0% 100% 0% 0%)", right: "inset(0% 0% 0% 100%)" } as const; // prefers-reduced-motion, live function subscribeToMotion(onChange: () => void) { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); } const prefersReducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches; // The layers that exist (the frame's are missing when it's hidden) const present = (...elements: (HTMLElement | undefined)[]) => elements.filter((element): element is HTMLElement => element !== undefined); const pad = (n: number) => String(n).padStart(2, "0"); type Step = 1 | -1; type SliderApi = { go: (step: Step) => void; togglePause: () => void }; export function ClipSlider({ slides, duration = 1.25, zoom = 1.35, ease = "power3.inOut", direction = "vertical", autoplay = 0, showCounter = true, showFrame = true, controls = "both", label = "Image slider", onChange, className = "", children, }: ClipSliderProps) { const boxRef = useRef(null); const progressRef = useRef(null); const api = useRef(null); // Kept across rebuilds (new props), so the slider stays on the slide it's showing const currentRef = useRef(0); const [index, setIndex] = useState(0); const [paused, setPaused] = useState(false); const reducedMotion = useSyncExternalStore(subscribeToMotion, prefersReducedMotion, () => false); // Read when a change starts, so tweaking them never rebuilds the slider const settings = useRef({ duration, zoom, ease, direction, onChange }); settings.current = { duration, zoom, ease, direction, onChange }; const count = slides.length; const slideKey = slides.map((slide) => slide.src).join("|"); const hasTitles = slides.some((slide) => slide.title); const autoplaying = autoplay > 0 && !reducedMotion && count > 1; useGSAP( (_context, contextSafe) => { const box = boxRef.current; if (!box || !contextSafe || count === 0) return; const all = (name: string) => Array.from(box.querySelectorAll(`[data-clip-${name}]`)); const layers = all("slide"); const photos = all("photo"); const frames = all("frame"); const framePhotos = all("frame-photo"); const numbers = all("number"); const titles = all("title"); let current = Math.min(currentRef.current, count - 1); currentRef.current = current; setIndex(current); let busy = false; let gestureReady = true; let inView = true; let userPaused = false; let top = 1; let timer: gsap.core.Tween | null = null; // Lay out the slide we're on: open and on top. Every other layer waits, hidden. layers.forEach((layer, i) => gsap.set(layer, { clipPath: i === current ? OPEN : closedAt.bottom, visibility: i === current ? "visible" : "hidden", zIndex: i === current ? 1 : 0, opacity: 1 })); frames.forEach((frame, i) => gsap.set(frame, { clipPath: i === current ? OPEN : closedAt.top, visibility: i === current ? "visible" : "hidden", zIndex: i === current ? 1 : 0, opacity: 1 })); gsap.set(photos, { scale: 1 }); if (framePhotos.length) gsap.set(framePhotos, { xPercent: 0, yPercent: 0 }); // The counter and the title roll: the current one in its box, the rest waiting below it const rolling = [numbers, titles].filter((list) => list.length === count); rolling.forEach((list) => gsap.set(list, { y: 0, yPercent: (i: number) => (i === current ? 0 : 110) })); // The autoplay clock is a tween on the progress line: when the line is full, the slider moves on const startClock = contextSafe(() => { timer?.kill(); timer = null; if (!autoplaying) return; timer = gsap.fromTo(progressRef.current ?? {}, { scaleX: 0 }, { scaleX: 1, duration: autoplay, ease: "none", onComplete: () => go(1) }); if (userPaused || !inView) timer.pause(); }); const go = contextSafe((step: Step) => { if (busy || count < 2) return; busy = true; timer?.kill(); const from = current; const to = (current + step + count) % count; current = to; currentRef.current = to; setIndex(to); settings.current.onChange?.(to); const { duration: time, zoom: zoomIn, ease: easing, direction: way } = settings.current; const vertical = way === "vertical"; // Next opens the photo from the bottom (or right) and the frame from the top (or left); back is the mirror const photoEdge = vertical ? (step === 1 ? "bottom" : "top") : step === 1 ? "right" : "left"; const frameEdge = vertical ? (step === 1 ? "top" : "bottom") : step === 1 ? "left" : "right"; const shift = vertical ? "yPercent" : "xPercent"; top += 1; const finish = () => { gsap.set(present(layers[from], frames[from]), { visibility: "hidden" }); gsap.set(photos[from]!, { scale: 1 }); if (framePhotos[from]) gsap.set(framePhotos[from], { xPercent: 0, yPercent: 0 }); busy = false; startClock(); }; // Reduced motion: no sweeping or zooming, a short cross-fade and the numbers swap in place if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) { gsap.set(present(layers[to], frames[to]), { zIndex: top, visibility: "visible", clipPath: OPEN, opacity: 0 }); gsap.set(photos[to]!, { scale: 1 }); rolling.forEach((list) => gsap.set(list, { yPercent: (i: number) => (i === to ? 0 : 110) })); gsap.to(present(layers[to], frames[to]), { opacity: 1, duration: 0.35, ease: "power1.out", onComplete: finish }); return; } gsap.set(layers[to]!, { zIndex: top, visibility: "visible", clipPath: closedAt[photoEdge] }); gsap.set(photos[to]!, { scale: zoomIn }); if (frames[to]) { gsap.set(frames[to], { zIndex: top, visibility: "visible", clipPath: closedAt[frameEdge] }); gsap.set(framePhotos[to]!, { xPercent: 0, yPercent: 0, [shift]: -step * 50 }); } rolling.forEach((list) => gsap.set(list[to]!, { yPercent: step * 110 })); const timeline = gsap.timeline({ defaults: { duration: time, ease: easing }, onComplete: finish }); timeline .to(layers[to]!, { clipPath: OPEN }, 0) .to(photos[to]!, { scale: 1 }, 0) // The old photo drifts further in while it's covered, so the new one seems to push past it .to(photos[from]!, { scale: 1 + (zoomIn - 1) / 2 }, 0); if (frames[to] && frames[from]) { timeline .to(frames[to], { clipPath: OPEN }, 0) .to(framePhotos[to]!, { [shift]: 0 }, 0) .to(framePhotos[from]!, { [shift]: step * 50 }, 0); } rolling.forEach((list) => timeline.to(list[from]!, { yPercent: -step * 110 }, 0).to(list[to]!, { yPercent: 0 }, 0)); }); const togglePause = contextSafe(() => { userPaused = !userPaused; setPaused(userPaused); if (userPaused) timer?.pause(); else if (inView) timer?.resume(); }); api.current = { go, togglePause }; startClock(); // The wheel and touch swipes. wheelSpeed -1 makes wheel-down and swipe-up both "up" (next). // One change per gesture: a trackpad keeps sending wheel events long after the flick, so the // next change waits until the wheel has been still for a moment. let observer: Observer | null = null; if (controls !== "buttons" && count > 1) { const fromGesture = (step: Step) => { if (!gestureReady || busy) return; gestureReady = false; go(step); }; observer = Observer.create({ target: box, type: "wheel,touch", wheelSpeed: -1, tolerance: 10, preventDefault: true, ignore: box.querySelectorAll("[data-clip-ui]"), onUp: () => fromGesture(1), onDown: () => fromGesture(-1), onLeft: () => fromGesture(1), onRight: () => fromGesture(-1), onStopDelay: 0.18, onStop: () => { gestureReady = true; }, onRelease: () => { gestureReady = true; }, }); } // Arrow keys work when focus is inside the slider, or on the page itself while the slider fills // most of the screen (so a full-screen slider answers the keyboard straight away). From the page, // PageUp/PageDown are left alone, and on the first or last slide the arrows hand back to the page // when it can scroll, so a keyboard user is never stuck on a hero slider that loops forever. const onKeyDown = (event: KeyboardEvent) => { if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return; const target = event.target instanceof Element ? event.target : null; const inside = target !== null && box.contains(target); const onPage = target === null || target === document.body || target === document.documentElement; if (!inside && !(onPage && inView)) return; if (target?.closest("input, textarea, select, [contenteditable]")) return; const forward = inside ? ["ArrowDown", "ArrowRight", "PageDown"] : ["ArrowDown", "ArrowRight"]; const back = inside ? ["ArrowUp", "ArrowLeft", "PageUp"] : ["ArrowUp", "ArrowLeft"]; const step: Step | 0 = forward.includes(event.key) ? 1 : back.includes(event.key) ? -1 : 0; if (!step) return; if (!inside) { const atEnd = step === 1 ? current === count - 1 : current === 0; const pageScrolls = document.documentElement.scrollHeight > window.innerHeight + 1; if (atEnd && pageScrolls) return; } event.preventDefault(); go(step); }; window.addEventListener("keydown", onKeyDown); // Off screen: the autoplay clock stops, and the keys stop answering const visibility = new IntersectionObserver( ([entry]) => { inView = (entry?.intersectionRatio ?? 1) >= 0.5; if (!inView) timer?.pause(); else if (!userPaused) timer?.resume(); }, { threshold: [0, 0.5, 1] }, ); visibility.observe(box); return () => { observer?.kill(); window.removeEventListener("keydown", onKeyDown); visibility.disconnect(); timer?.kill(); api.current = null; }; }, { scope: boxRef, dependencies: [slideKey, count, controls, autoplay, autoplaying, showFrame, showCounter, hasTitles], revertOnUpdate: true }, ); const showButtons = controls !== "wheel" && count > 1; const vertical = direction === "vertical"; const current = slides[index]; return (

{/* isolate keeps the slides' growing z-index inside this layer, under the frame and the text */}

{slides.map((slide, i) => (

))}

{/* Shade on the top, left and bottom so overlaid text reads on any photo, even a pale sky */}

{showFrame && count > 0 ? ( // The framed copy is decoration: the full-bleed photo already carries the alt text ) : null} {children ?

{children}

: null}

{/* Every title sits in the same grid cell, so the line is as wide as the longest one */} {hasTitles ? ( ) : ( )}

{showCounter && count > 0 ? ( ) : null} {autoplaying ? ( ) : null} {count > 1 ? ( // With wheel-only controls the buttons stay hidden until a keyboard user tabs to them

{([-1, 1] as const).map((step) => ( ))}

) : null}

{current ? `Slide ${index + 1} of ${count}${current.title ? `: ${current.title}` : ""}` : ""}

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