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:T1d65,"use client"; import { useEffect, useRef } from "react"; import type { CSSProperties, ReactNode } from "react"; /** A comet of light that circles a card's border at an even pace, with its glow * bleeding onto the surface and just outside the edge. Wraps any children. */ export function BorderBeamCard({ label = "Border beam", speed = 4, children, color = "#ff2d2d", coreColor = "#ffffff", size = 22, borderWidth = 2, radius = 16, glow = 1, dual = false, reverse = false, surface = "#0b0c0f", className = "", }: { label?: string; /** Seconds per lap. */ speed?: number; children?: ReactNode; /** Tail colour of the beam. */ color?: string; /** Hot colour at the head of the beam. */ coreColor?: string; /** Beam length as a percentage of the perimeter. */ size?: number; borderWidth?: number; /** Corner radius in px. */ radius?: number; /** Glow strength, 0 to 2. */ glow?: number; /** A second beam travelling the other way. */ dual?: boolean; reverse?: boolean; /** Card surface colour. */ surface?: string; className?: string; }) { const rootRef = useRef(null); const hasChildren = children !== undefined && children !== null && children !== false; const safe = (c: string, fallback: string) => (/^[#a-zA-Z0-9(),.%\s/-]{1,48}$/.test(c) ? c : fallback); const tail = safe(color, "#ff2d2d"); const core = safe(coreColor, "#ffffff"); const bg = safe(surface, "#0b0c0f"); const bw = Math.min(8, Math.max(1, borderWidth)); const r = Math.max(0, radius); const len = Math.min(60, Math.max(4, size)); const lap = Math.max(0.5, speed); const g = Math.min(2, Math.max(0, glow)); // Sleep the animation while off screen. useEffect(() => { const el = rootRef.current; if (!el) return; if (typeof IntersectionObserver === "undefined") { el.dataset.live = "1"; return; } const io = new IntersectionObserver( (entries) => { for (const e of entries) el.dataset.live = e.isIntersecting ? "1" : "0"; }, { rootMargin: "120px" }, ); io.observe(el); return () => io.disconnect(); }, []); // Pointer light on the surface, in layout px (previews may be scaled). const onMove = (e: React.PointerEvent) => { const el = e.currentTarget; const rect = el.getBoundingClientRect(); if (!rect.width) return; const k = el.offsetWidth / rect.width; el.style.setProperty("--gbb-x", ((e.clientX - rect.left) * k).toFixed(1) + "px"); el.style.setProperty("--gbb-y", ((e.clientY - rect.top) * k).toFixed(1) + "px"); }; // Tail stacked from shorter and shorter dashes that share one head, so the // light fades behind the tip. [fraction of length, colour, opacity] const full: [number, string, number][] = [ ...Array.from({ length: 16 }, (_, i): [number, string, number] => [Math.pow((16 - i) / 16, 1.7), tail, 0.075]), [0.2, core, 0.2], [0.14, core, 0.26], [0.09, core, 0.32], [0.05, core, 0.9], ]; const soft: [number, string, number][] = [ [1, tail, 0.3], [0.55, tail, 0.45], [0.2, core, 0.5], ]; const beam = (segs: [number, string, number][], rev: boolean, delay: number, cls: string) => segs.map(([f, c, o], i) => { const l = len * f; // Every dash of a beam shares one head: the forward head is the dash end, the reverse head its start. const lead = rev ? 30 : len - l; const dash = "0 " + lead.toFixed(2) + " " + l.toFixed(2) + " " + (100 - lead - l).toFixed(2); return ( ); }); const ring = (segs: [number, string, number][], cls: string) => ( <> {beam(segs, reverse, 0, cls)} {dual ? beam(segs, !reverse, -lap / 2, cls) : null} ); const svgBase = (extra: CSSProperties): CSSProperties => ({ position: "absolute", left: bw / 2, top: bw / 2, width: "calc(100% - " + bw + "px)", height: "calc(100% - " + bw + "px)", overflow: "visible", pointerEvents: "none", ...extra, }); return (

{/* Light that escapes past the edge, behind the card */} {g > 0 ? ( ) : null}

{/* Light that bleeds onto the surface */} {g > 0 ? ( ) : null} {/* Pointer light */}

{hasChildren ? children : label}

{/* The beam itself, drawn over the edge */}

); } 63:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L64",null,{"files":[{"path":"components/viberdy/gradient-border-beam.tsx","content":"$65","type":"registry:component","target":"components/viberdy/gradient-border-beam.tsx"}],"className":"h-[70svh] min-h-80"}]]}]