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:T10ae,"use client"; import { useEffect, useRef, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export interface FollowCursorProps { /** The area the label follows the cursor over. */ children: ReactNode; /** Text on the pill. */ label?: string; /** Spring pull toward the cursor (0-1). */ stiffness?: number; /** Velocity kept per frame (0-1). Higher is bouncier. */ damping?: number; /** Lean the pill into horizontal motion. */ tilt?: boolean; /** Hide the system cursor over the area (mouse only). */ hideCursor?: boolean; className?: string; } export function FollowCursor({ children, label = "View project", stiffness = 0.12, damping = 0.7, tilt = true, hideCursor = true, className, }: FollowCursorProps) { const root = useRef(null); const pill = useRef(null); useEffect(() => { const el = root.current!; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const s = { x: 0, y: 0, vx: 0, vy: 0, scale: 0 }; const goal = { x: 0, y: 0, scale: 0 }; let down = false; let raf = 0; const frame = () => { if (!pill.current) return void (raf = 0); // unmounted if (reduced) { s.x = goal.x; s.y = goal.y; s.vx = s.vy = 0; } else { s.vx = (s.vx + (goal.x - s.x) * stiffness) * damping; s.vy = (s.vy + (goal.y - s.y) * stiffness) * damping; s.x += s.vx; s.y += s.vy; } const targetScale = goal.scale * (down ? 0.82 : 1); s.scale += (targetScale - s.scale) * (reduced ? 1 : 0.2); const lean = tilt && !reduced ? Math.max(-18, Math.min(18, s.vx * 1.2)) : 0; pill.current!.style.transform = `translate(${s.x}px,${s.y}px) translate(-50%,-50%) rotate(${lean}deg) scale(${s.scale})`; const moving = Math.abs(s.vx) + Math.abs(s.vy) > 0.05 || Math.abs(targetScale - s.scale) > 0.002; raf = moving ? requestAnimationFrame(frame) : 0; }; const kick = () => { if (!raf) raf = requestAnimationFrame(frame); }; const local = (e: PointerEvent) => { const r = el.getBoundingClientRect(); return [e.clientX - r.left, e.clientY - r.top]; }; const onEnter = (e: PointerEvent) => { if (e.pointerType !== "mouse") return; [goal.x, goal.y] = local(e); // Pop in from where the cursor entered instead of flying across the card. if (s.scale < 0.05) [s.x, s.y] = [goal.x, goal.y]; goal.scale = 1; kick(); }; const onMove = (e: PointerEvent) => { if (e.pointerType !== "mouse") return; [goal.x, goal.y] = local(e); goal.scale = 1; kick(); }; const onLeave = () => { goal.scale = 0; down = false; kick(); }; const onDown = () => { down = true; kick(); }; const onUp = () => { down = false; kick(); }; el.addEventListener("pointerenter", onEnter); el.addEventListener("pointermove", onMove, { passive: true }); el.addEventListener("pointerleave", onLeave); el.addEventListener("pointerdown", onDown); el.addEventListener("pointerup", onUp); return () => { cancelAnimationFrame(raf); el.removeEventListener("pointerenter", onEnter); el.removeEventListener("pointermove", onMove); el.removeEventListener("pointerleave", onLeave); el.removeEventListener("pointerdown", onDown); el.removeEventListener("pointerup", onUp); }; }, [stiffness, damping, tilt]); return (

{children}

{label}

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