Live visitor cursors in real time
Multiplayer cursors on a portfolio site. WebSocket via Nitro, SVG avatars through own API, random nicknames and an interactive online bar.
Challenge
A portfolio is a static page, the visitor is alone. I wanted to add a sense of presence - people seeing each other on the site. The solution had to be lightweight, no external services, same stack as the site.
Technical details
Solution
I set up a WebSocket server right in Nitro via defineWebSocketHandler - nothing extra needed. Each visitor gets a random nickname, color, and an SVG avatar via @nextorders/avatar at /api/avatar/[seed]. Cursor positions sent over WebSocket with 50ms throttling. Cursors filtered by page - you only see people on the same page. An online bar at the bottom shows all visitor avatars.
Result
The site feels alive - you see other visitors' cursors with avatars and names. Auto-reconnect on connection loss. The solution is fully self-contained - Nitro's built-in WebSocket, no external dependencies.