51: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"] 52: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"] 53:T1862,"use client"; import { useRef } from "react"; import Image from "next/image"; import { animate, motion, useMotionValue, useReducedMotion, useSpring, useTransform, type MotionValue, } from "motion/react"; import { cn } from "@/lib/utils"; export type DockGalleryItem = { title: string; image: { src: string; alt?: string }; href?: string; /** Small badge in the card's top-right corner. */ icon?: React.ReactNode; }; export type DockGalleryProps = Omit, "children"> & { items: DockGalleryItem[]; /** Pinned above the row, e.g. a brand, intro copy and nav. */ header?: React.ReactNode; /** Card width (px) far from the focus. */ minWidth?: number; /** Card width (px) at the focus. */ maxWidth?: number; /** How many cards either side of the focus are magnified. */ spread?: number; /** Card width ÷ height. */ aspectRatio?: number; }; const SIZE_SPRING = { stiffness: 320, damping: 32, mass: 0.6 }; const FOCUS_SPRING = { type: "spring", stiffness: 220, damping: 30 } as const; export function DockGallery({ items, header, minWidth = 96, maxWidth = 200, spread = 3, aspectRatio = 3 / 4, className, ...props }: DockGalleryProps) { const reduceMotion = useReducedMotion(); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); const restIndex = (items.length - 1) / 2; // The magnified spot as a fractional card index: 3.5 sits between the 4th and 5th card. // It starts in the middle, so even the server render shows the centred pyramid. const focus = useMotionValue(restIndex); const moveFocus = (target: number) => { if (reduceMotion) focus.set(target); else animate(focus, target, FOCUS_SPRING); }; // Pointer x → fractional index, read from the cards' current boxes (one read per move). const indexAt = (x: number) => { const boxes = cardRefs.current.map((card) => card?.getBoundingClientRect()); for (let i = 0; i < boxes.length; i++) { const box = boxes[i]; if (!box) continue; // Card i spans i - 0.5 … i + 0.5; the gap before it sits exactly at i - 0.5. if (x < box.left) return i - 0.5; if (x <= box.right) return i - 0.5 + (x - box.left) / box.width; } return boxes.length - 0.5; }; return (

{header &&

{header}

}

{ if (event.pointerType === "touch") return; // Follows the pointer directly; each card's size spring smooths the motion. focus.stop(); focus.set(Math.min(Math.max(indexAt(event.clientX), 0), items.length - 1)); }} onPointerLeave={() => moveFocus(restIndex)} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) moveFocus(restIndex); }} className="mt-auto flex items-end justify-center gap-3 overflow-hidden px-4 pt-10 pb-3 [mask-image:linear-gradient(to_right,transparent,black_8%,black_92%,transparent)]" > {items.map((item, index) => ( { cardRefs.current[index] = card; }} item={item} index={index} focus={focus} minWidth={minWidth} maxWidth={maxWidth} spread={spread} aspectRatio={aspectRatio} reduceMotion={!!reduceMotion} onFocusCard={() => moveFocus(index)} /> ))}

); } function DockCard({ ref, item, index, focus, minWidth, maxWidth, spread, aspectRatio, reduceMotion, onFocusCard, }: { ref: React.Ref; item: DockGalleryItem; index: number; focus: MotionValue; minWidth: number; maxWidth: number; spread: number; aspectRatio: number; reduceMotion: boolean; onFocusCard: () => void; }) { // Cosine falloff: full size at the focus, easing to minWidth `spread` cards away. // Big, smaller, smaller… on both sides, with no hard steps between neighbours. const targetWidth = useTransform(focus, (value) => { const t = Math.max(0, 1 - Math.abs(index - value) / spread); return minWidth + (maxWidth - minWidth) * ((1 - Math.cos(t * Math.PI)) / 2); }); const springWidth = useSpring(targetWidth, SIZE_SPRING); const width = reduceMotion ? targetWidth : springWidth; const height = useTransform(width, (value) => value / aspectRatio); // Labels and badges quieten with distance, so the focused card leads. const emphasis = useTransform(width, [minWidth, maxWidth], [0.55, 1]); const card = ( {item.image.alt

{item.icon && ( {item.icon} )} ); return (

{item.title} {item.href ? ( {item.title} {card} ) : ( card )}

); } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/registry/ui/dock-gallery.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]