RealtimeCursor
Infinite-canvas cursor tracking with spring physics and unique user coloring.
Modular Build
Interactive Preview
Initialising Operative...
Architecture
Component Architecture
RealtimeCursor/
Prop Usage
| Prop | Type | Default | Description |
|---|---|---|---|
channelIdrequired | string | — | Supabase Realtime channel for cursor positions. |
userIdrequired | string | — | Local user ID. |
userNamerequired | string | — | Display name shown next to cursor. |
className | string | — | Class applied to the cursor canvas container. |
Usage
import { RealtimeCursor } from '@/ui/features/RealtimeCursor';
// Render over a relative-positioned container
<div className="relative w-full h-screen">
<RealtimeCursor
channelId="canvas:room1"
userId={user.id}
userName={user.name}
/>
{/* your canvas content */}
</div>