51: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"] 52: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"] 53:T13ab,"use client"; import { useEffect, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; const SHAPES = { arrow: { hot: [3, 2], body: , }, ghost: { hot: [12, 12], body: ( <> ), }, dot: { hot: [12, 12], body: }, }; export interface GhostCursorProps { children?: ReactNode; /** Color of the live cursor. */ color?: string; /** Tint of the trailing ghosts. */ ghostColor?: string; /** Number of ghost copies. */ count?: number; /** Frames of delay between consecutive ghosts. */ spacing?: number; /** Cursor size in px. */ size?: number; shape?: keyof typeof SHAPES; /** Hide the native cursor inside the container. */ hideCursor?: boolean; className?: string; } export function GhostCursor({ children, color = "#ffffff", ghostColor = "#a78bfa", count = 6, spacing = 4, size = 28, shape = "arrow", hideCursor = true, className, }: GhostCursorProps) { const rootRef = useRef(null); const layerRef = useRef(null); const { hot, body } = SHAPES[shape] ?? SHAPES.arrow; useEffect(() => { const root = rootRef.current!; const layer = layerRef.current!; const els = Array.from(layer.children) as HTMLElement[]; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const len = count * spacing + 1; const hx = (hot[0] / 24) * size; const hy = (hot[1] / 24) * size; let hist: { x: number; y: number }[] = []; const target = { x: 0, y: 0 }; let inside = false; let raf = 0; const loop = (now: number) => { hist.unshift({ ...target }); if (hist.length > len) hist.length = len; const t = now / 1000; // Index 0 is the live cursor; ghosts read older positions and drift a little, like smoke. els.forEach((el, i) => { const p = hist[Math.min(hist.length - 1, (count - i) * spacing)]; const g = count - i; const drift = reduced ? 0 : g * 1.6; const x = p.x - hx + Math.sin(t * 2.1 + g) * drift; const y = p.y - hy + Math.cos(t * 1.7 + g * 1.3) * drift - (reduced ? 0 : g * 2.2); el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${1 - g * 0.035})`; }); const settled = hist.every((p) => p.x === target.x && p.y === target.y); raf = inside || !settled ? requestAnimationFrame(loop) : 0; }; const onMove = (e: PointerEvent) => { const r = root.getBoundingClientRect(); target.x = e.clientX - r.left; target.y = e.clientY - r.top; if (!inside) { inside = true; layer.style.opacity = "1"; if (!hist.length || reduced) hist = [{ ...target }]; } if (reduced) hist = [{ ...target }]; if (!raf) raf = requestAnimationFrame(loop); }; const onLeave = () => { inside = false; layer.style.opacity = "0"; }; root.addEventListener("pointermove", onMove, { passive: true }); root.addEventListener("pointerleave", onLeave); return () => { cancelAnimationFrame(raf); root.removeEventListener("pointermove", onMove); root.removeEventListener("pointerleave", onLeave); }; }, [count, spacing, size, hot]); return (

{children}

{Array.from({ length: count + 1 }, (_, i) => { const g = count - i; const live = g === 0; return ( ); })}

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