50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1c73,"use client"; import { cn } from "@/lib/utils"; import { useCallback, useEffect, useRef } from "react"; export const INFINITE_IMAGE_FIELD_IMAGES: string[] = [ "https://plus.unsplash.com/premium_photo-1665311515452-a9f54c4266c9?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1433086966358-54859d0ed716?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1501854140801-50d01698950b?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1440342359743-84fcb8c21f21?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1448375240586-882707db888b?w=400&h=560&fit=crop&q=80", "https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?w=400&h=560&fit=crop&q=80", ]; export interface InfiniteImageFieldProps extends Omit, "children"> { className?: string; images?: string[]; imageWidth?: number; imageHeight?: number; gap?: number; maxSpeed?: number; smoothing?: number; borderRadius?: number; } function drawRoundedRect( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number ) { const clampedR = Math.min(r, w / 2, h / 2); ctx.beginPath(); ctx.moveTo(x + clampedR, y); ctx.lineTo(x + w - clampedR, y); ctx.quadraticCurveTo(x + w, y, x + w, y + clampedR); ctx.lineTo(x + w, y + h - clampedR); ctx.quadraticCurveTo(x + w, y + h, x + w - clampedR, y + h); ctx.lineTo(x + clampedR, y + h); ctx.quadraticCurveTo(x, y + h, x, y + h - clampedR); ctx.lineTo(x, y + clampedR); ctx.quadraticCurveTo(x, y, x + clampedR, y); ctx.closePath(); } export function InfiniteImageField({ className, images = INFINITE_IMAGE_FIELD_IMAGES, imageWidth = 200, imageHeight = 280, gap = 28, maxSpeed = 5, smoothing = 0.07, borderRadius = 0, ...rest }: InfiniteImageFieldProps) { const canvasRef = useRef(null); const loadedImagesRef = useRef([]); const dimsRef = useRef({ w: 0, h: 0 }); const camRef = useRef({ x: 0, y: 0 }); const velRef = useRef({ x: 0, y: 0 }); const mouseRef = useRef({ x: 0.5, y: 0.5 }); const isInsideRef = useRef(false); const rafRef = useRef(0); // Pre-load images useEffect(() => { const imgs = images.map((src) => { const img = new Image(); img.crossOrigin = "anonymous"; img.src = src; return img; }); loadedImagesRef.current = imgs; }, [images]); const draw = useCallback(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const { w: W, h: H } = dimsRef.current; if (W === 0 || H === 0) { rafRef.current = requestAnimationFrame(draw); return; } const dpr = window.devicePixelRatio || 1; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); const cellW = imageWidth + gap; const cellH = imageHeight + gap; const imgs = loadedImagesRef.current; const numImages = imgs.length; // Physics — cursor offset from center drives velocity const tx = isInsideRef.current ? (mouseRef.current.x - 0.5) * 2 * maxSpeed : 0; const ty = isInsideRef.current ? (mouseRef.current.y - 0.5) * 2 * maxSpeed : 0; velRef.current.x += (tx - velRef.current.x) * smoothing; velRef.current.y += (ty - velRef.current.y) * smoothing; camRef.current.x += velRef.current.x; camRef.current.y += velRef.current.y; const camX = camRef.current.x; const camY = camRef.current.y; ctx.clearRect(0, 0, W, H); // Compute visible cell range const colMin = Math.floor((camX - W / 2) / cellW) - 1; const colMax = Math.ceil((camX + W / 2) / cellW) + 1; const rowMin = Math.floor((camY - H / 2) / cellH) - 1; const rowMax = Math.ceil((camY + H / 2) / cellH) + 1; for (let row = rowMin; row <= rowMax; row++) { for (let col = colMin; col <= colMax; col++) { // Top-left corner in screen space const sx = col * cellW - camX + W / 2 - imageWidth / 2; const sy = row * cellH - camY + H / 2 - imageHeight / 2; // Deterministic image assignment — same cell always gets same image const imgIdx = Math.abs(col * 7 + row * 13 + ((col * row * 3) | 0)) % numImages; const img = imgs[imgIdx]; ctx.save(); drawRoundedRect(ctx, sx, sy, imageWidth, imageHeight, borderRadius); ctx.clip(); if (img && img.complete && img.naturalWidth > 0) { ctx.drawImage(img, sx, sy, imageWidth, imageHeight); } else { // Placeholder while loading — semi-transparent so background shows ctx.fillStyle = "rgba(0,0,0,0.15)"; ctx.fillRect(sx, sy, imageWidth, imageHeight); } ctx.restore(); // Subtle border overlay for glass-panel effect ctx.save(); drawRoundedRect(ctx, sx, sy, imageWidth, imageHeight, borderRadius); ctx.strokeStyle = "rgba(255,255,255,0.06)"; ctx.lineWidth = 1; ctx.stroke(); ctx.restore(); } } rafRef.current = requestAnimationFrame(draw); }, [imageWidth, imageHeight, gap, maxSpeed, smoothing, borderRadius]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const resize = () => { const dpr = window.devicePixelRatio || 1; const rect = canvas.getBoundingClientRect(); dimsRef.current = { w: rect.width, h: rect.height }; canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; }; resize(); const ro = new ResizeObserver(resize); ro.observe(canvas); const onMove = (e: MouseEvent) => { const rect = canvas.getBoundingClientRect(); mouseRef.current = { x: (e.clientX - rect.left) / rect.width, y: (e.clientY - rect.top) / rect.height, }; }; const onEnter = () => { isInsideRef.current = true; }; const onLeave = () => { isInsideRef.current = false; }; canvas.addEventListener("mousemove", onMove); canvas.addEventListener("mouseenter", onEnter); canvas.addEventListener("mouseleave", onLeave); rafRef.current = requestAnimationFrame(draw); return () => { cancelAnimationFrame(rafRef.current); ro.disconnect(); canvas.removeEventListener("mousemove", onMove); canvas.removeEventListener("mouseenter", onEnter); canvas.removeEventListener("mouseleave", onLeave); }; }, [draw]); return (

); } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://componentry.fun/r/infinite-image-field.json","proxyUrl":"https://shadcnregistry.com/r/componentry/infinite-image-field","itemId":"@componentry/infinite-image-field"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"components/ui/infinite-image-field.tsx","content":"$53","type":"registry:ui"}]}]]}],"$L54"]}]

Infinite Image Field

Installation

Files

components

Styles