51: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"] 52:T14fb,"use client"; /* eslint-disable @next/next/no-img-element */ import { useEffect, useRef, type PointerEvent } from "react"; export interface ChromaGridItem { image: string; title: string; subtitle?: string; handle?: string; /** Accent used for the card gradient and hover border. */ color?: string; url?: string; } export interface ChromaGridProps { items: ChromaGridItem[]; /** Spotlight radius in px. */ radius?: number; /** Cursor follow smoothing, 0-1 (higher = snappier). */ smoothing?: number; /** Grid columns on wide screens. */ columns?: number; className?: string; } export function ChromaGrid({ items, radius = 280, smoothing = 0.12, columns = 3, className }: ChromaGridProps) { const root = useRef(null); const target = useRef({ x: 0, y: 0, r: 0 }); const kick = useRef(() => {}); useEffect(() => { const el = root.current!; const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches; const cur = { x: el.clientWidth / 2, y: el.clientHeight / 2, r: 0 }; target.current = { ...cur }; let raf = 0; // Ease the spotlight towards the pointer; the loop stops itself once settled. const tick = () => { const t = target.current; const k = reduce ? 1 : smoothing; cur.x += (t.x - cur.x) * k; cur.y += (t.y - cur.y) * k; cur.r += (t.r - cur.r) * (reduce ? 1 : 0.08); el.style.setProperty("--cx", `${cur.x}px`); el.style.setProperty("--cy", `${cur.y}px`); el.style.setProperty("--cr", `${cur.r}px`); raf = Math.abs(t.x - cur.x) + Math.abs(t.y - cur.y) + Math.abs(t.r - cur.r) > 0.3 ? requestAnimationFrame(tick) : 0; }; kick.current = () => { if (!raf) raf = requestAnimationFrame(tick); }; return () => { cancelAnimationFrame(raf); kick.current = () => {}; }; }, [smoothing]); const moveTo = (x: number, y: number, r: number) => { target.current = { x, y, r }; kick.current(); }; const onMove = (e: PointerEvent) => { const b = e.currentTarget.getBoundingClientRect(); moveTo(e.clientX - b.left, e.clientY - b.top, radius); }; const onCardMove = (e: PointerEvent) => { const b = e.currentTarget.getBoundingClientRect(); e.currentTarget.style.setProperty("--mx", `${e.clientX - b.left}px`); e.currentTarget.style.setProperty("--my", `${e.clientY - b.top}px`); }; const mask = "radial-gradient(circle var(--cr) at var(--cx) var(--cy), transparent 0%, transparent 15%, rgba(0,0,0,.1) 45%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.6) 75%, rgba(0,0,0,.85) 88%, #000 100%)"; return (

moveTo(target.current.x, target.current.y, 0)} className={`relative grid w-full gap-3 max-sm:!grid-cols-2 ${className ?? ""}`} style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`, maxWidth: columns * 260, ["--cr" as string]: "0px" }} > {items.map((item) => { const Tag = item.url ? "a" : "article"; return ( { const b = e.currentTarget.getBoundingClientRect(); const g = root.current!.getBoundingClientRect(); moveTo(b.left - g.left + b.width / 2, b.top - g.top + b.height / 2, radius); }} onBlur={() => moveTo(target.current.x, target.current.y, 0)} className="group relative flex flex-col overflow-hidden rounded-2xl border border-transparent p-2 outline-none transition-[border-color] duration-300 hover:border-[var(--accent)] focus-visible:border-[var(--accent)]" style={{ ["--accent" as string]: item.color ?? "#8b5cf6", background: `linear-gradient(160deg, ${item.color ?? "#8b5cf6"}, #0a0a0a 70%)`, }} > {/* Per-card glare that follows the pointer. */}

); })} {/* Grayscale everything except a soft hole around the spotlight. */}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L51",null,{"files":[{"path":"registry/ui/chroma-grid.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]