"use client"; import { useEffect, useMemo, useRef, useState } from "react"; import { motion, useMotionValue, useSpring, useMotionTemplate, useAnimationFrame, } from "framer-motion"; import { Users } from "lucide-react"; import { cn } from "@/lib/utils"; type Collaborator = { name: string; color: string }; const DEFAULT_COLLABORATORS: Collaborator[] = [ { name: "Maya Rodriguez", color: "#5b8cff" }, { name: "Devin Park", color: "#2bb3a3" }, { name: "Iris Kaan", color: "#d1568a" }, ]; // Pick black or white text for a given pill color so labels stay readable. function readableText(hex: string) { const h = hex.replace("#", ""); const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h; const r = parseInt(full.slice(0, 2), 16); const g = parseInt(full.slice(2, 4), 16); const b = parseInt(full.slice(4, 6), 16); const lum = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255; return lum > 0.62 ? "#0b0b12" : "#ffffff"; } // The visual: a crisp pointer arrow plus a colored name pill. Reused by // both the ambient collaborator cursors and the viewer's own cursor. function CursorTag({ name, color }: Collaborator) { return (

{name}

); } // One collaborator cursor that drifts forever along a smooth, deterministic // Lissajous path derived from its index. No randomness, no timers. function AmbientCursor({ sizeRef, index, collaborator, dimmed, }: { sizeRef: React.RefObject<{ w: number; h: number }>; index: number; collaborator: Collaborator; dimmed: boolean; }) { const x = useMotionValue(0); const y = useMotionValue(0); const [ready, setReady] = useState(false); const p = useMemo(() => { const seed = (n: number) => { const v = Math.sin((index + 1) * n) * 43758.5453; return Math.abs(v - Math.floor(v)); }; return { speed: 0.00024 + seed(12.9898) * 0.00015, ratio: 1.3 + seed(78.233) * 0.9, phaseX: seed(37.719) * Math.PI * 2, phaseY: seed(9.174) * Math.PI * 2, ampX: 0.55 + seed(4.517) * 0.28, ampY: 0.5 + seed(6.311) * 0.3, }; }, [index]); useAnimationFrame((t) => { const { w, h } = sizeRef.current; if (!w || !h) return; const pad = 48; const rx = Math.max(0, w / 2 - pad); const ry = Math.max(0, h / 2 - pad); const nx = w / 2 + Math.sin(t * p.speed + p.phaseX) * rx * p.ampX; const ny = h / 2 + Math.sin(t * p.speed * p.ratio + p.phaseY) * ry * p.ampY; x.set(Math.round(nx)); y.set(Math.round(ny)); if (!ready) setReady(true); }); return ( ); } export function FollowingPointer({ name = "You", color = "#7c6cff", children, className, collaborators = DEFAULT_COLLABORATORS, }: { name?: string; color?: string; children: React.ReactNode; className?: string; collaborators?: Collaborator[]; }) { const ref = useRef(null); const sizeRef = useRef({ w: 0, h: 0 }); const [visible, setVisible] = useState(false); const x = useMotionValue(0); const y = useMotionValue(0); const springX = useSpring(x, { stiffness: 520, damping: 42, mass: 0.4 }); const springY = useSpring(y, { stiffness: 520, damping: 42, mass: 0.4 }); const spotlight = useMotionTemplate`radial-gradient(240px circle at ${springX}px ${springY}px, rgba(124,108,255,0.12), transparent 70%)`; useEffect(() => { const el = ref.current; if (!el) return; const measure = () => { sizeRef.current = { w: el.clientWidth, h: el.clientHeight }; }; measure(); const ro = new ResizeObserver(measure); ro.observe(el); return () => ro.disconnect(); }, []); function onMouseMove(e: React.MouseEvent) { const rect = ref.current?.getBoundingClientRect(); if (!rect) return; x.set(Math.round(e.clientX - rect.left)); y.set(Math.round(e.clientY - rect.top)); } return (

setVisible(true)} onMouseLeave={() => setVisible(false)} className={cn( "group relative cursor-none overflow-hidden rounded-2xl border border-line bg-panel", className )} > {/* Slow breathing brand glow, always alive */} {/* Faint dotted canvas */}

{/* Spotlight follows the real cursor on hover */} {children} {/* Idle collaborators drifting over the surface */} {collaborators.map((c, i) => ( ))} {/* Hint that fades once you take control */} Move your cursor to join the room {/* The viewer's own cursor */}

); } export default function Demo() { const collaborators = DEFAULT_COLLABORATORS; return (

Q3 launch canvas

Shared workspace · updated just now

{collaborators.length + 1} live

{[0, 1, 2].map((i) => (

))}

); }

Following Pointer