"use client"; import * as React from "react"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; export type LiveCursor = { id: string; name: string; color: string; /** Position in px relative to the container (or 0–1 when `relative`). */ x: number; y: number; /** Optional chat bubble next to the cursor. */ message?: string; }; export type LiveCursorsProps = { cursors: LiveCursor[]; /** Treat x/y as fractions of the container size. */ relative?: boolean; /** Report the local pointer so you can broadcast it (fractions when `relative`). */ onMove?: (pos: { x: number; y: number } | null) => void; children?: React.ReactNode; className?: string; }; export function CursorArrow({ color, name, message }: { color: string; name: string; message?: string }) { return (

{name} {message ? {message} : null}

); } /** Multiplayer cursor layer: smooth spring-following pointers with name tags. */ export function LiveCursors({ cursors, relative, onMove, children, className }: LiveCursorsProps) { const ref = React.useRef(null); const [size, setSize] = React.useState({ w: 1, h: 1 }); React.useLayoutEffect(() => { const el = ref.current; if (!el || !relative) return; const ro = new ResizeObserver(([e]) => setSize({ w: e!.contentRect.width, h: e!.contentRect.height })); ro.observe(el); return () => ro.disconnect(); }, [relative]); return (

{ if (!onMove) return; const r = e.currentTarget.getBoundingClientRect(); const x = e.clientX - r.left; const y = e.clientY - r.top; onMove(relative ? { x: x / r.width, y: y / r.height } : { x, y }); }} onPointerLeave={() => onMove?.(null)} > {children} {cursors.map((c) => ( ))}

); }

Live Cursors

Installation

Exports