"use client"; import { useEffect, useRef, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Check } from "lucide-react"; import { cn } from "@/lib/utils"; type Pt = readonly [number, number]; interface CursorEvent { at: number; kind: "click" | "bubble"; } interface CursorSpec { name: string; role: string; color: string; duration: number; phase: number; message: string; path: readonly Pt[]; events: readonly CursorEvent[]; } interface Ripple { id: number; x: number; y: number; color: string; } // Deterministic, art-directed loops. Fractions of the surface (0..1). const CURSORS: readonly CursorSpec[] = [ { name: "Maya", role: "Design", color: "#7c6cff", duration: 17, phase: 0, message: "tightening the header grid", path: [ [0.19, 0.31], [0.31, 0.23], [0.45, 0.34], [0.37, 0.53], [0.22, 0.58], [0.14, 0.43], ], events: [ { at: 0.14, kind: "bubble" }, { at: 0.58, kind: "click" }, ], }, { name: "Devon", role: "Eng", color: "#5b8cff", duration: 21, phase: 0.35, message: "this gradient is perfect", path: [ [0.7, 0.29], [0.82, 0.4], [0.79, 0.59], [0.66, 0.65], [0.58, 0.5], [0.64, 0.35], ], events: [ { at: 0.3, kind: "click" }, { at: 0.72, kind: "bubble" }, ], }, { name: "Priya", role: "PM", color: "#22c9a0", duration: 19, phase: 0.6, message: "shipping the build tonight", path: [ [0.41, 0.71], [0.54, 0.79], [0.67, 0.73], [0.6, 0.59], [0.46, 0.61], ], events: [ { at: 0.22, kind: "click" }, { at: 0.83, kind: "bubble" }, ], }, { name: "Kai", role: "Brand", color: "#f45d90", duration: 15, phase: 0.15, message: "left a note on the CTA", path: [ [0.3, 0.45], [0.52, 0.41], [0.71, 0.5], [0.59, 0.68], [0.36, 0.65], [0.24, 0.52], ], events: [ { at: 0.1, kind: "bubble" }, { at: 0.5, kind: "click" }, { at: 0.88, kind: "click" }, ], }, ]; const ARROW = "M0.928548 2.18278C0.619075 1.37094 1.42087 0.577818 2.2293 0.900312L14.9877 6.98956C15.8074 7.31651 15.7383 8.49329 14.8836 8.72269L9.85908 9.24973L8.31593 15.4901C8.09106 16.3705 6.85115 16.351 6.65913 15.4634L0.928548 2.18278Z"; const EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]; function catmull(a: number, b: number, c: number, d: number, t: number): number { const t2 = t * t; const t3 = t2 * t; return ( 0.5 * (2 * b + (-a + c) * t + (2 * a - 5 * b + 4 * c - d) * t2 + (-a + 3 * b - 3 * c + d) * t3) ); } export function CursorPresence({ className }: { className?: string }) { const surfaceRef = useRef(null); const sizeRef = useRef<{ w: number; h: number }>({ w: 0, h: 0 }); const groupRefs = useRef>([]); const posRef = useRef>( CURSORS.map(() => ({ x: 0, y: 0 })) ); const lastPRef = useRef(CURSORS.map(() => -1)); const idRef = useRef(0); const timeoutsRef = useRef([]); const [ripples, setRipples] = useState([]); const [pressed, setPressed] = useState(() => CURSORS.map(() => false) ); const [bubbles, setBubbles] = useState<(string | null)[]>(() => CURSORS.map(() => null) ); useEffect(() => { const el = surfaceRef.current; if (!el) return; const measure = () => { sizeRef.current = { w: el.offsetWidth, h: el.offsetHeight }; }; measure(); const media = typeof window !== "undefined" ? window.matchMedia("(prefers-reduced-motion: reduce)") : null; const reduced = media?.matches ?? false; function fireEvent(i: number, spec: CursorSpec, ev: CursorEvent) { if (ev.kind === "click") { const pos = posRef.current[i]; const id = idRef.current++; setRipples((prev) => [ ...prev, { id, x: pos.x, y: pos.y, color: spec.color }, ]); timeoutsRef.current.push( window.setTimeout(() => { setRipples((prev) => prev.filter((r) => r.id !== id)); }, 720) ); setPressed((prev) => { const next = [...prev]; next[i] = true; return next; }); timeoutsRef.current.push( window.setTimeout(() => { setPressed((prev) => { const next = [...prev]; next[i] = false; return next; }); }, 150) ); } else { setBubbles((prev) => { const next = [...prev]; next[i] = spec.message; return next; }); timeoutsRef.current.push( window.setTimeout(() => { setBubbles((prev) => { const next = [...prev]; next[i] = null; return next; }); }, 2600) ); } } function detectEvents(i: number, spec: CursorSpec, p: number) { const last = lastPRef.current[i]; lastPRef.current[i] = p; if (last < 0) return; for (const ev of spec.events) { const crossed = last <= p ? ev.at > last && ev.at <= p : ev.at > last || ev.at <= p; if (crossed) fireEvent(i, spec, ev); } } const compute = (elapsed: number, runEvents: boolean) => { const { w, h } = sizeRef.current; if (w <= 0 || h <= 0) return; for (let i = 0; i < CURSORS.length; i++) { const spec = CURSORS[i]; const p = (((elapsed / spec.duration + spec.phase) % 1) + 1) % 1; const pts = spec.path; const n = pts.length; const u = p * n; const seg = Math.floor(u) % n; const t = u - Math.floor(u); const a = pts[(seg - 1 + n) % n]; const b = pts[seg]; const c = pts[(seg + 1) % n]; const d = pts[(seg + 2) % n]; const x = Math.round(catmull(a[0], b[0], c[0], d[0], t) * w); const y = Math.round(catmull(a[1], b[1], c[1], d[1], t) * h); posRef.current[i] = { x, y }; const node = groupRefs.current[i]; if (node) node.style.transform = `translate3d(${x}px, ${y}px, 0)`; if (runEvents) detectEvents(i, spec, p); } }; let raf = 0; const start = performance.now(); const loop = (now: number) => { compute((now - start) / 1000, true); raf = requestAnimationFrame(loop); }; const ro = new ResizeObserver(() => { measure(); if (reduced) compute(0, false); }); ro.observe(el); if (reduced) { compute(0, false); } else { raf = requestAnimationFrame(loop); } const timeouts = timeoutsRef.current; return () => { cancelAnimationFrame(raf); ro.disconnect(); timeouts.forEach((t) => clearTimeout(t)); timeoutsRef.current = []; }; }, []); return (

{/* Dotted design grid, faded toward edges */}

{/* Ambient brand glow, breathing slowly */}

{/* Mock canvas content, kept quiet so the cursors lead */}

Hero

{/* Header: document + live collaborators */}

Realtime canvas All changes saved

{CURSORS.map((c) => ( {c.name.charAt(0)} ))}

Editing now

{/* Click ripples */} {ripples.map((r) => ( ))} {/* Live cursors */} {CURSORS.map((c, i) => (

{ groupRefs.current[i] = node; }} className="pointer-events-none absolute left-0 top-0 z-20 will-change-transform" > {c.name} {bubbles[i] && ( {bubbles[i]} )}

))}

); } export default function Demo() { return (

); }

Cursor Presence