127 Components
Multiplayer Cursors
MotionFigma-style real-time collaboration canvas with animated multiplayer cursor pointers, user name tags, color badges, interactive live cursor chat bubbles, and click ripple wave broadcasts.
Multiplayer Canvas4 live presences
Hover to move your live pointer • Click to send waves • Type cursor chat
Elena Rostova
Loving this component architecture! ✨
Marcus Chen
Checking the token contracts
Sarah Jenkins
Ready for review 🚀
Figma Real-Time Protocol•WebRTC Presence
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/multiplayer-cursors.json"
Props
TypeScript props supported by <MultiplayerCursors />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialCollaborators | Collaborator[] | — | Array of collaborator objects containing id, name, color, coordinates, and messages. |
| showGrid | boolean | true | Whether to render a Figma-style radial dot grid background. |
| className | string | — | Additional CSS classes to apply to the root container. |
| overlayOnly | boolean | — | Render cursors as an transparent overlay without outer card container |
Key Features
- Authentic Figma-geometry SVG cursor arrows paired with colored user name badges.
- Integrated live cursor chat bubble broadcasts with spring scale and fade animations.
- Click wave propagation displaying expanding ripple rings from pointer interactions.
- Simulated autonomous collaborator wander motion with pause and resume toggles.
- Instant collaborator addition and customizable presence status indicators.
Keyboard & Accessibility
- Announces presence joined and chat message broadcasts for screen reader users via aria-live.
- Supports keyboard shortcut triggers and accessible input forms for sending chat messages.
- Respects reduced-motion preferences by turning off wandering trajectories.