50: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/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"],"RegistryDependencies"] 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:T151f,"use client"; import { useEffect, useId, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface CrosshairProps { children?: ReactNode; color?: string; /** Line width in px. */ thickness?: number; /** Show live x/y readouts on the lines. */ showCoords?: boolean; /** Distort the lines briefly when the pointer enters a target. */ glitch?: boolean; /** Elements that trigger the glitch. */ targetSelector?: string; /** Hide the native cursor inside the container. */ hideCursor?: boolean; className?: string; } const pad = (n: number) => String(Math.round(n)).padStart(4, "0"); export function Crosshair({ children, color = "#ffffff", thickness = 1, showCoords = true, glitch = true, targetSelector = "a, button", hideCursor = true, className, }: CrosshairProps) { const rootRef = useRef(null); const svgRef = useRef(null); const filterId = "crosshair-" + useId().replace(/[^\w-]/g, ""); useEffect(() => { const root = rootRef.current!; const svg = svgRef.current!; const q = (s: string) => svg.querySelector(s) as T; const hLine = q("[data-h]"); const vLine = q("[data-v]"); const ring = q("[data-ring]"); const xLabel = q("[data-x]"); const yLabel = q("[data-y]"); const turb = q("feTurbulence"); const disp = q("feDisplacementMap"); const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let x = 0; let y = 0; let raf = 0; let glitchAt = -1; let target: Element | null = null; const render = (now: number) => { raf = 0; hLine.setAttribute("y1", String(y)); hLine.setAttribute("y2", String(y)); vLine.setAttribute("x1", String(x)); vLine.setAttribute("x2", String(x)); ring.setAttribute("cx", String(x)); ring.setAttribute("cy", String(y)); xLabel.setAttribute("x", String(x + 8)); xLabel.textContent = `X ${pad(x)}`; yLabel.setAttribute("y", String(y - 8)); yLabel.textContent = `Y ${pad(y)}`; if (glitchAt >= 0) { const p = (now - glitchAt) / 520; if (p >= 1) { glitchAt = -1; disp.setAttribute("scale", "0"); } else { // Random frequency + seed per frame reads as a torn, flickering signal. const burst = Math.random() > 0.25 ? 1 : 0.15; disp.setAttribute("scale", String(36 * (1 - p) * burst)); turb.setAttribute("seed", String((Math.random() * 1000) | 0)); turb.setAttribute("baseFrequency", `${0.002 + Math.random() * 0.01} ${0.04 + Math.random() * 0.3}`); raf = requestAnimationFrame(render); } } }; const schedule = () => { if (!raf) raf = requestAnimationFrame(render); }; const onMove = (e: PointerEvent) => { const r = root.getBoundingClientRect(); x = e.clientX - r.left; y = e.clientY - r.top; svg.style.opacity = "1"; const hit = (e.target as Element).closest?.(targetSelector); const next = hit && root.contains(hit) ? hit : null; if (next !== target) { target = next; ring.setAttribute("r", target ? "14" : "5"); if (target && glitch && !reduced) glitchAt = performance.now(); } schedule(); }; const onLeave = () => { svg.style.opacity = "0"; target = null; }; root.addEventListener("pointermove", onMove, { passive: true }); root.addEventListener("pointerleave", onLeave); return () => { cancelAnimationFrame(raf); root.removeEventListener("pointermove", onMove); root.removeEventListener("pointerleave", onLeave); }; }, [glitch, targetSelector]); const text = { fill: color, fontSize: 10, fontFamily: "ui-monospace, monospace", letterSpacing: "0.08em", opacity: 0.7 }; return (

{children}

); } 4f:["$","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,["$","$L50",null,{"namespace":"@glint-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/crosshair.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]