Live Cursors App
Real-time collaborative tools require low-latency cursor broadcasting with smooth interpolation to avoid jitter. This canvas demonstrates WebSocket-driven multi-user cursor tracking with client-side motion smoothing.
A Node.js WebSocket server (ws library) broadcasts cursor position events to all connected clients in a shared room. Each client emits its cursor coordinates on mousemove, throttled to 30 events per second to avoid flooding the channel.
On the receiving end, each remote cursor position is smoothed using linear interpolation (lerp) applied on each animation frame via requestAnimationFrame. This decouples the rendering loop from the network event rate, producing fluid motion even at lower broadcast frequencies.
Rooms are identified by URL hash, enabling multiple isolated canvases. The server holds no persistent state — disconnecting a client immediately removes their cursor from all peers via a broadcast close event.