2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T3470,"use client"; import React, { useCallback, useEffect, useRef } from "react"; import { useReducedMotion } from "motion/react"; import { cn } from "@/lib/utils"; export type GridItem = { id: string | number; title: string; subtitle?: string; imageUrl?: string; imageAlt?: string; category?: string; customContent?: React.ReactNode; }; export type InfiniteGridProps = React.HTMLAttributes & { items?: GridItem[]; columns?: number; gapVw?: number; cardWidthVw?: number; enableLiquidBlobs?: boolean; onItemClick?: (item: GridItem) => void; cardClassName?: string; itemClassName?: string; }; export function InfiniteGridCard({ item, className, aspectRatio = "1 / 1" }: { item: GridItem; className?: string; aspectRatio?: string }) { return (

{item.customContent ? ( item.customContent ) : ( <>

{item.imageUrl ? ( // eslint-disable-next-line @next/next/no-img-element {item.imageAlt

) : null}

{item.title}

{item.subtitle ? (

{item.subtitle}

) : null}

)}

); } /** * Endlessly tiling product grid panned by drag or horizontal scroll, with * inertia coast and velocity skew. Hosts in a fixed-height frame so page * scroll passes over vertical wheel gestures; static grid under reduced motion. */ export function InfiniteGrid({ items = [], columns = 4, gapVw = 2.5, cardWidthVw = 24, enableLiquidBlobs = true, onItemClick, className, cardClassName, itemClassName, ...props }: InfiniteGridProps) { const reduceMotion = useReducedMotion() ?? false; const containerRef = useRef(null); const gridMatrixRef = useRef(null); const singleBlockRef = useRef(null); const currentPos = useRef({ x: 0, y: 0 }); const targetPos = useRef({ x: 0, y: 0 }); const velocity = useRef({ vx: 0, vy: 0 }); const blockDim = useRef({ w: 0, h: 0 }); const isDragging = useRef(false); const dragStart = useRef({ x: 0, y: 0 }); const dragStartTarget = useRef({ x: 0, y: 0 }); const lastPointer = useRef({ x: 0, y: 0, time: 0 }); const dragDistance = useRef(0); const isInitialized = useRef(false); const still = reduceMotion || items.length === 0; const measureAndCenter = useCallback(() => { const block = singleBlockRef.current; const container = containerRef.current; if (!block || !container) return; const rect = block.getBoundingClientRect(); const cw = container.clientWidth; const ch = container.clientHeight; if (rect.width > 0 && rect.height > 0 && cw > 0 && ch > 0) { blockDim.current = { w: rect.width, h: rect.height }; if (!isInitialized.current) { const initX = -rect.width + (cw - rect.width) / 2; const initY = -rect.height + (ch - rect.height) / 2; currentPos.current = { x: initX, y: initY }; targetPos.current = { x: initX, y: initY }; if (gridMatrixRef.current) { gridMatrixRef.current.style.transform = `translate3d(${initX.toFixed(2)}px, ${initY.toFixed(2)}px, 0)`; } isInitialized.current = true; } } }, []); useEffect(() => { if (still) return; measureAndCenter(); const container = containerRef.current; const ro = container ? new ResizeObserver(measureAndCenter) : null; if (container && ro) ro.observe(container); let rafId = 0; const renderLoop = () => { const { w, h } = blockDim.current; if (!isDragging.current) { if (Math.abs(velocity.current.vx) > 0.01 || Math.abs(velocity.current.vy) > 0.01) { velocity.current.vx *= 0.95; velocity.current.vy *= 0.95; targetPos.current.x += velocity.current.vx; targetPos.current.y += velocity.current.vy; } } const lerpFactor = isDragging.current ? 0.16 : 0.09; currentPos.current.x += (targetPos.current.x - currentPos.current.x) * lerpFactor; currentPos.current.y += (targetPos.current.y - currentPos.current.y) * lerpFactor; if (w > 0 && h > 0) { while (currentPos.current.x < -w * 1.75) { currentPos.current.x += w; targetPos.current.x += w; dragStartTarget.current.x += w; } while (currentPos.current.x > -w * 0.25) { currentPos.current.x -= w; targetPos.current.x -= w; dragStartTarget.current.x -= w; } while (currentPos.current.y < -h * 1.75) { currentPos.current.y += h; targetPos.current.y += h; dragStartTarget.current.y += h; } while (currentPos.current.y > -h * 0.25) { currentPos.current.y -= h; targetPos.current.y -= h; dragStartTarget.current.y -= h; } } const skewX = Math.max(Math.min(velocity.current.vx * 0.08, 3), -3); const skewY = Math.max(Math.min(velocity.current.vy * 0.08, 3), -3); if (gridMatrixRef.current) { gridMatrixRef.current.style.transform = `translate3d(${currentPos.current.x.toFixed(2)}px, ${currentPos.current.y.toFixed(2)}px, 0) skew(${skewX.toFixed(2)}deg, ${skewY.toFixed(2)}deg)`; } rafId = requestAnimationFrame(renderLoop); }; rafId = requestAnimationFrame(renderLoop); return () => { cancelAnimationFrame(rafId); ro?.disconnect(); }; }, [measureAndCenter, still]); useEffect(() => { const el = containerRef.current; if (!el || still) return; // Horizontal-dominant gestures pan the grid; vertical ones scroll the page. const onWheel = (e: WheelEvent) => { if (Math.abs(e.deltaX) < Math.abs(e.deltaY)) return; e.preventDefault(); const sensitivity = 0.45; const deltaX = -e.deltaX * sensitivity; const deltaY = -e.deltaY * sensitivity; velocity.current.vx = velocity.current.vx * 0.3 + deltaX * 0.7; velocity.current.vy = velocity.current.vy * 0.3 + deltaY * 0.7; targetPos.current.x += deltaX; targetPos.current.y += deltaY; }; el.addEventListener("wheel", onWheel, { passive: false }); return () => el.removeEventListener("wheel", onWheel); }, [still]); const handlePointerDown = (e: React.PointerEvent) => { if (still) return; if (e.button !== 0 && e.pointerType === "mouse") return; isDragging.current = true; dragDistance.current = 0; dragStart.current = { x: e.clientX, y: e.clientY }; dragStartTarget.current = { ...targetPos.current }; lastPointer.current = { x: e.clientX, y: e.clientY, time: e.timeStamp }; velocity.current = { vx: 0, vy: 0 }; containerRef.current?.setPointerCapture?.(e.pointerId); }; const handlePointerMove = (e: React.PointerEvent) => { if (!isDragging.current || still) return; const multiplier = 0.85; const dx = (e.clientX - dragStart.current.x) * multiplier; const dy = (e.clientY - dragStart.current.y) * multiplier; dragDistance.current += Math.hypot(e.movementX, e.movementY); const now = e.timeStamp; const dt = Math.max(now - lastPointer.current.time, 1); const vx = ((e.clientX - lastPointer.current.x) / dt) * 12; const vy = ((e.clientY - lastPointer.current.y) / dt) * 12; velocity.current = { vx: velocity.current.vx * 0.25 + vx * 0.75, vy: velocity.current.vy * 0.25 + vy * 0.75 }; lastPointer.current = { x: e.clientX, y: e.clientY, time: now }; targetPos.current.x = dragStartTarget.current.x + dx; targetPos.current.y = dragStartTarget.current.y + dy; }; const handlePointerUp = (e: React.PointerEvent) => { if (!isDragging.current) return; isDragging.current = false; const el = containerRef.current; if (el && typeof el.hasPointerCapture === "function" && el.hasPointerCapture(e.pointerId)) { el.releasePointerCapture(e.pointerId); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (still) return; const step = Math.max(80, window.innerWidth * 0.08); if (e.key === "ArrowLeft") { targetPos.current.x += step; e.preventDefault(); } else if (e.key === "ArrowRight") { targetPos.current.x -= step; e.preventDefault(); } else if (e.key === "ArrowUp") { targetPos.current.y += step; e.preventDefault(); } else if (e.key === "ArrowDown") { targetPos.current.y -= step; e.preventDefault(); } }; if (items.length === 0) return null; const blobs = enableLiquidBlobs && !reduceMotion; const block = (blockId: number, center: boolean, hidden: boolean) => (

{items.map((item) => (

{ if (dragDistance.current < 6) onItemClick?.(item); }} style={{ width: `${cardWidthVw}vw`, userSelect: "none" }} className={cn("select-none", itemClassName)} >

))}

); return (

{blobs ? (

) : null} {still ? (

{items.map((item) => (

))}

) : (

{[0, 1, 2, 3, 4, 5, 6, 7, 8].map((blockId) => block(blockId, blockId === 4, blockId !== 4))}

)}

); } export default InfiniteGrid; 31:T82c,"use client"; import { useState } from "react"; import { DemoPage, DemoSection, DemoGrid, DemoCell } from "../../_shared/variant-frame"; import { productFixture } from "../../../lib/commerce/fixtures/product"; import { cheapestVariant, formatMoney } from "../../../lib/commerce/select"; import { InfiniteGrid, type GridItem } from "./infinite-grid"; function toItems(slug: string | undefined, count: number): GridItem[] { const fx = productFixture(slug); return fx.products.slice(0, count).map((p) => { const cheapest = p.variants.length > 0 ? cheapestVariant(p) : undefined; const image = p.images.find((im) => im.hasArt !== false) ?? p.featuredImage; return { id: p.handle, title: p.title, subtitle: cheapest ? formatMoney(cheapest.price) : "Coming soon", imageUrl: image.src, imageAlt: image.alt, category: p.collection, }; }); } export function InfiniteGridDemo({ brand }: { brand?: string }) { const [last, setLast] = useState(null); const items = toItems(brand, 8); return ( setLast(String(item.id))} /> setLast(String(item.id))} className="h-[50vh] min-h-[320px]" /> ); } export default InfiniteGridDemo; 32:T666,import type { BlockMeta } from "../../../lib/block-meta"; export const infiniteGridMeta: BlockMeta = { slug: "infinite-grid", title: "Infinite grid", description: "Endlessly tiling product wall panned by drag or horizontal scroll, with inertia coast and velocity skew. Lives in a fixed-height frame, keeps vertical page scroll, adds arrow-key panning, and holds still under reduced motion.", group: "gallery", kobraDeps: [], files: [ "blocks/gallery/infinite-grid/infinite-grid.tsx", ], props: [ { name: "items", type: "GridItem[]", description: "{ id, title, subtitle?, imageUrl?, imageAlt?, category?, customContent? }. Tiled 9x across the wrap matrix." }, { name: "columns", type: "number", default: "4", description: "Columns per repeated block." }, { name: "gapVw", type: "number", default: "2.5", description: "Gap between cards in viewport-width units." }, { name: "cardWidthVw", type: "number", default: "24", description: "Card width in viewport-width units." }, { name: "enableLiquidBlobs", type: "boolean", default: "true", description: "Soft animated background blobs." }, { name: "onItemClick", type: "(item: GridItem) => void", description: "Fires only on near-stationary clicks (< 6px drag)." }, { name: "cardClassName", type: "string", description: "Forwarded to each card." }, { name: "itemClassName", type: "string", description: "Applied to each card wrapper." }, ], tags: ["grid", "canvas", "drag", "products", "infinite"], status: "ready", origin: { name: "uselayouts", url: "https://uselayouts.com/docs/components/infinite-grid", license: "MIT" }, }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#gallery","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Gallery"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Infinite grid"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Infinite grid"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"Endlessly tiling product wall panned by drag or horizontal scroll, with inertia coast and velocity skew. Lives in a fixed-height frame, keeps vertical page scroll, adds arrow-key panning, and holds still under reduced motion."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"infinite-grid","group":"gallery","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/gallery/infinite-grid/infinite-grid.tsx","code":"$30"},{"path":"blocks/gallery/infinite-grid/demo.tsx","code":"$31"},{"path":"blocks/gallery/infinite-grid/meta.ts","code":"$32"}]}],"props":"$L33"}],"$L34"]}]