52: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"] 53: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"] 54:T1f49,"use client"; /* eslint-disable @next/next/no-img-element */ import { useEffect, useRef, useState } from "react"; import { animate, motion, useMotionValue, useReducedMotion, useTransform, type MotionValue } from "motion/react"; import { ChevronLeft, ChevronRight } from "lucide-react"; export interface DepthCarouselItem { image: string; title: string; subtitle?: string; } export interface DepthCarouselProps { items: DepthCarouselItem[]; /** Card width in px. */ cardWidth?: number; /** Card height in px. */ cardHeight?: number; /** Horizontal px between card centers. */ spacing?: number; /** Px each step pushes a card back in z. */ depth?: number; /** Blur in px added per step from center. */ blur?: number; /** Y rotation in degrees of side cards. */ rotate?: number; /** Cards shown on each side. */ visible?: number; autoplay?: boolean; /** Ms between autoplay steps. */ autoplayDelay?: number; className?: string; } const spring = { type: "spring" as const, stiffness: 180, damping: 26 }; export function DepthCarousel({ items, cardWidth = 250, cardHeight = 330, spacing = 170, depth = 180, blur = 3, rotate = 18, visible = 2, autoplay = true, autoplayDelay = 3500, className, }: DepthCarouselProps) { const n = items.length; const pos = useMotionValue(0); const [index, setIndex] = useState(0); const drag = useRef<{ x: number; p: number; moved: boolean; t: number; vx: number; lx: number; card: number } | null>(null); const hovered = useRef(false); const reduce = useReducedMotion(); const mod = (v: number) => ((v % n) + n) % n; const go = (target: number) => { setIndex(mod(target)); animate(pos, target, reduce ? { duration: 0 } : spring); }; const step = (dir: number) => go(Math.round(pos.get()) + dir); // Autoplay reads the latest `go` via a ref so the interval never restarts. const stepRef = useRef(step); useEffect(() => { stepRef.current = step; }); useEffect(() => { if (!autoplay || reduce) return; const id = window.setInterval(() => !hovered.current && !drag.current && stepRef.current(1), autoplayDelay); return () => window.clearInterval(id); }, [autoplay, autoplayDelay, reduce]); const active = items[index]; return (

(hovered.current = true)} onPointerLeave={() => (hovered.current = false)} >

{ if (e.key === "ArrowRight") step(1); else if (e.key === "ArrowLeft") step(-1); else return; e.preventDefault(); }} onPointerDown={(e) => { const card = (e.target as HTMLElement).closest("[data-depth-index]"); e.currentTarget.setPointerCapture(e.pointerId); pos.stop(); drag.current = { x: e.clientX, p: pos.get(), moved: false, t: performance.now(), vx: 0, lx: e.clientX, card: card ? Number(card.dataset.depthIndex) : -1, }; }} onPointerMove={(e) => { const d = drag.current; if (!d) return; const now = performance.now(); d.vx = (e.clientX - d.lx) / Math.max(1, now - d.t); d.t = now; d.lx = e.clientX; if (Math.abs(e.clientX - d.x) > 4) d.moved = true; pos.set(d.p - (e.clientX - d.x) / spacing); }} onPointerUp={() => { const d = drag.current; drag.current = null; if (!d) return; // A tap on a side card brings it to the front. if (!d.moved && d.card >= 0) { let delta = mod(d.card - Math.round(pos.get())); if (delta > n / 2) delta -= n; go(Math.round(pos.get()) + delta); return; } go(Math.round(pos.get() - d.vx * 3)); }} onPointerCancel={() => { drag.current = null; go(Math.round(pos.get())); }} className="relative w-full cursor-grab touch-pan-y select-none rounded-3xl outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing" style={{ height: cardHeight + 40, perspective: 1200 }} > {items.map((item, i) => ( ))}

{active?.title}

{index + 1} / {n}

); } interface CardProps { item: DepthCarouselItem; i: number; n: number; pos: MotionValue; width: number; height: number; spacing: number; depth: number; blur: number; rotate: number; visible: number; current: boolean; } function Card({ item, i, n, pos, width, height, spacing, depth, blur, rotate, visible, current }: CardProps) { // Signed distance from the front slot, wrapped so the ring loops. const d = useTransform(pos, (p) => { let v = (((i - p) % n) + n) % n; if (v > n / 2) v -= n; return v; }); const transform = useTransform(d, (v) => { const a = Math.abs(v); const x = Math.sign(v) * spacing * (a - Math.max(0, a - 1) * 0.25); return `translate3d(${x}px, 0, ${-a * depth}px) rotateY(${-Math.max(-1, Math.min(1, v)) * rotate}deg)`; }); const filter = useTransform(d, (v) => `blur(${Math.abs(v) * blur}px) brightness(${1 - Math.min(Math.abs(v), 3) * 0.18})`); const opacity = useTransform(d, (v) => Math.max(0, Math.min(1, visible + 0.6 - Math.abs(v)))); const zIndex = useTransform(d, (v) => 100 - Math.round(Math.abs(v) * 10)); return (

{item.subtitle &&

{item.subtitle}

} ); } 51:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@glint-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/ui/depth-carousel.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]