All Systems Operational
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.
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.
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 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.
Raw mousemove events generate excessive network traffic. Throttling (~50ms) was implemented to reduce bandwidth while maintaining responsiveness.
Direct coordinate updates caused jittery motion. Bézier interpolation via perfect-cursors was used to smooth transitions between points.
Handling disconnects, reconnects, and stale users required proper cleanup and state synchronization to avoid ghost cursors.
Frequent updates from multiple users could trigger excessive re-renders. Optimizations ensured minimal React updates and efficient DOM rendering.
Designed for developers exploring real-time systems, collaborative applications, and performance optimization techniques using WebSockets and client-side rendering.
Analytics and exploration platform for the Lighter.xyz ecosystem, covering dashboards, a block explorer, exchange statistics, multi-venue funding comparison, and protocol announcements. Redis-backed caching and a split between live and cached data paths keep the UI responsive.
Backend service for Lighter.xyz that ingests perpetuals liquidation events over WebSockets, deduplicates noisy replay batches, aggregates notional USD into per-minute buckets in Upstash Redis, and serves a rolling 24 hour liquidation total over HTTP.