Live Cursors

Open sourceReal-time demo

Real-time collaborative cursors over WebSockets: throttled pointer streams, broadcast fan-out, and Bézier-smoothed rendering with perfect-cursors and GPU-friendly SVG transforms.

View Source Code

pointer update throttle: ~50ms
interpolated cursor motion: Bézier
broadcast fan-out per update: O(n)

Tech stack

Node.js
WebSocket (ws)
UUID
React
TypeScript
perfect-cursors
react-use-websocket

Overview

Live Cursors is a real-time collaborative system where multiple users share cursor positions over WebSockets with low latency. The application focuses on efficiently handling high-frequency input streams (mouse movements) and rendering them smoothly across clients.

The system combines throttled event streaming, broadcast-based WebSocket architecture, and client-side interpolation using Bézier smoothing to deliver fluid cursor motion without overwhelming network or CPU resources.

What it does

Streams cursor positions between multiple users in real time
Broadcasts user state to all connected clients via WebSockets
Applies throttling to reduce network load from high-frequency events
Renders smooth cursor motion using interpolation (perfect-cursors)
Maintains unique user sessions using UUID-based identification

Technical breakdown

Frontend

Frontend is built with React + Vite using TypeScript. WebSocket communication is handled via react-use-websocket, while cursor rendering uses perfect-cursors for Bézier interpolation. SVG + CSS transforms are used for GPU-accelerated rendering and smooth animations.

Backend

Backend is a stateful WebSocket server built with Node.js and ws. Each client connects with a username, receives a UUID, and sends throttled cursor updates. The server maintains in-memory state and broadcasts updates to all connected clients in real time.

Technical challenges

01
Handling high-frequency cursor events
Raw mousemove events generate excessive network traffic. Throttling (~50ms) was implemented to reduce bandwidth while maintaining responsiveness.
02
Achieving smooth real-time rendering
Direct coordinate updates caused jittery motion. Bézier interpolation via perfect-cursors was used to smooth transitions between points.
03
Managing WebSocket connection lifecycle
Handling disconnects, reconnects, and stale users required proper cleanup and state synchronization to avoid ghost cursors.
04
Preventing performance bottlenecks
Frequent updates from multiple users could trigger excessive re-renders. Optimizations ensured minimal React updates and efficient DOM rendering.

Who it is for

Designed for developers exploring real-time systems, collaborative applications, and performance optimization techniques using WebSockets and client-side rendering.