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:T11f0,"use client"; import { useEffect, useId, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface BlobCursorProps { children?: ReactNode; color?: string; /** Number of trailing blobs. */ count?: number; /** Diameter of the lead blob in px. */ size?: number; /** 0 = blobs move together, 1 = long lazy tail. */ lag?: number; /** Blur radius of the goo filter; higher melts blobs together from further away. */ goo?: number; blendMode?: "difference" | "normal" | "screen" | "exclusion"; /** Hide the native cursor inside the container. */ hideCursor?: boolean; className?: string; } export function BlobCursor({ children, color = "#c6ff3d", count = 4, size = 96, lag = 0.5, goo = 14, blendMode = "difference", hideCursor = true, className, }: BlobCursorProps) { const rootRef = useRef(null); const blobs = useRef<(HTMLDivElement | null)[]>([]); const filterId = "blob-goo-" + useId().replace(/[^\w-]/g, ""); useEffect(() => { const root = rootRef.current!; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const target = { x: root.offsetWidth / 2, y: root.offsetHeight / 2 }; const pos = Array.from({ length: count }, () => ({ ...target })); let raf = 0; let last = 0; let visible = true; const loop = (now: number) => { const dt = Math.min((now - (last || now)) / 16.67, 3); last = now; const t = now / 1000; pos.forEach((p, i) => { const k = reduced ? 1 : 1 - Math.pow(1 - 0.38 / (1 + i * lag * 2.2), dt); p.x += (target.x - p.x) * k; p.y += (target.y - p.y) * k; // A slow orbit keeps the goo breathing while the pointer rests. const wob = reduced || i === 0 ? 0 : size * (0.22 + i * 0.06); const s = size * Math.max(0.3, 1 - i * 0.17); const x = p.x + Math.cos(t * 1.3 + i * 2.1) * wob - s / 2; const y = p.y + Math.sin(t * 1.7 + i * 1.3) * wob - s / 2; const el = blobs.current[i]; if (el) el.style.transform = `translate3d(${x}px, ${y}px, 0)`; }); raf = visible ? requestAnimationFrame(loop) : 0; }; const onMove = (e: PointerEvent) => { const r = root.getBoundingClientRect(); target.x = e.clientX - r.left; target.y = e.clientY - r.top; }; const io = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; if (visible && !raf) raf = requestAnimationFrame(loop); }); io.observe(root); root.addEventListener("pointermove", onMove, { passive: true }); return () => { cancelAnimationFrame(raf); io.disconnect(); root.removeEventListener("pointermove", onMove); }; }, [count, size, lag]); return (

{children}

{Array.from({ length: count }, (_, i) => { const s = size * Math.max(0.3, 1 - i * 0.17); return (

{ blobs.current[i] = el; }} style={{ position: "absolute", left: 0, top: 0, width: s, height: s, borderRadius: "50%", background: color, willChange: "transform", }} >

); })}

); } 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/blob-cursor.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]