Recipe
User presence + cursor design
Real-time collaborative cursors and presence indicators for multiplayer editing surfaces. Built on WebSockets with zero layout thrash.
Cursor layer
Render a transparent overlay above the editing surface. Each remote cursor is an absolutely-positioned div with the user's name, a caret triangle, and a color from a deterministic palette keyed by user ID.
Presence avatars
Stacked avatar row in the toolbar showing connected users. Use ring colors matching cursor assignments. Animate enter/exit with CSS transitions on transform and opacity.
Performance notes
- •Throttle cursor broadcasts to 60 Hz max
- •Use CSS containment on cursor layer
- •Debounce presence join/leave by 500ms