63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 65:T24ca,"use client" import { useEffect, useState } from "react" import { useTheme } from "next-themes" import { cn } from "@/lib/utils" import { GridBeam, GridBeamCanvas, GridBeamContent, GridBeamDividers, useGridBeam, type GridBeamPaletteKey, } from "@/registry/default/ui/grid-beam" const DEMO_DATA = [ ["Project", "Status", "Lead", "Progress"], ["Quantum Core", "Active", "Aria Chen", "78%"], ["Nebula API", "Review", "Kai Tanaka", "92%"], ["Void Engine", "Active", "Zara Osei", "45%"], ["Pulse Sync", "Paused", "Lev Petrov", "61%"], ] as const /** Status → shadcn chart tokens (light & dark follow `globals.css` variables). */ const STATUS_BADGE_CLASS: Record = { Active: "border border-chart-2/25 bg-chart-2/10 text-chart-2", Review: "border border-chart-1/25 bg-chart-1/10 text-chart-1", Paused: "border border-chart-4/25 bg-chart-4/10 text-chart-4", } const PROGRESS_FILL: Record = { colorful: "linear-gradient(90deg, var(--chart-3), var(--chart-1))", ocean: "linear-gradient(90deg, var(--chart-2), var(--chart-1))", sunset: "linear-gradient(90deg, var(--chart-4), var(--chart-5))", mono: "linear-gradient(90deg, var(--muted-foreground), var(--foreground))", } const VARIANTS: GridBeamPaletteKey[] = ["colorful", "mono", "ocean", "sunset"] function pillClass(active: boolean) { return cn( "border-border font-inherit cursor-pointer rounded-full border px-3.5 py-1.5 text-xs transition-colors", active ? "bg-accent text-accent-foreground" : "text-muted-foreground fine-hover:hover:bg-muted/60 bg-transparent" ) } function beamThemeFromResolved(resolved: string | undefined): "dark" | "light" { return resolved === "dark" ? "dark" : "light" } /** Headless API: compose layers yourself (same animation as {@link GridBeam}). */ function HeadlessMetricsStrip({ variant, beamTheme, active, breathe, }: { variant: GridBeamPaletteKey beamTheme: "dark" | "light" active: boolean breathe: boolean }) { const { canvasRef, rows, cols } = useGridBeam({ rows: 2, cols: 3, colorVariant: variant, theme: beamTheme, active, breathe, duration: 4.2, strength: 0.85, }) return (

{[ { label: "Latency", value: "12ms", delta: "-3ms" }, { label: "Throughput", value: "2.4k", delta: "+180" }, { label: "Uptime", value: "99.97%", delta: "+0.02%" }, { label: "Requests", value: "847k", delta: "+12k" }, { label: "Errors", value: "0.03%", delta: "-0.01%" }, { label: "Cache Hit", value: "94.2%", delta: "+1.8%" }, ].map((item) => (

{item.label} {item.value} {item.delta}

))}

) } function DemoTableCell({ cell, isProgress, isStatus, progressFill, statusClass, }: { cell: string isProgress: boolean isStatus: boolean progressFill: string statusClass: string | undefined }) { if (isStatus && statusClass) { return ( {cell} ) } if (isProgress) { return (

{cell}

) } return cell } export default function GridBeamDemo() { const [variant, setVariant] = useState("colorful") const [isActive, setIsActive] = useState(true) const [breathe, setBreathe] = useState(true) const { resolvedTheme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) }, []) const beamTheme = beamThemeFromResolved(resolvedTheme) const progressFill = PROGRESS_FILL[variant] ?? "linear-gradient(90deg, var(--muted-foreground), var(--foreground))" return (

GridBeam

Soft glowing beams along grid dividers

{VARIANTS.map((v) => ( ))}

Composed `GridBeam`

{DEMO_DATA.flat().map((cell, i) => { const row = Math.floor(i / DEMO_DATA[0].length) const col = i % DEMO_DATA[0].length const isHeader = row === 0 const isStatus = col === 1 && !isHeader const isProgress = col === 3 && !isHeader const statusClass = isStatus ? STATUS_BADGE_CLASS[cell] : undefined return (

) })}

Headless{" "} `useGridBeam + Dividers / Canvas / Content`

) } 62:["$","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":[null,["$","$L63",null,{"namespace":"@registrydirectory","registryDependencies":["grid-beam"]}]]}],null]}],["$","$L64",null,{"files":[{"path":"registry/default/example/grid-beam-demo.tsx","content":"$65","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]

GridBeam

Composed GridBeam

Headless{" "} useGridBeam + Dividers / Canvas / Content

Composed `GridBeam`

Headless{" "} `useGridBeam + Dividers / Canvas / Content`