Live Cursor

About

This component creates a real-time collaborative cursor tracking area on your canvas that shows multiple users' cursor positions simultaneously on the screen with unique colored cursors similar to Figma cursor editing. Each cursor smoothly follows its user's movements and automatically fades out when inactive. Just drag and drop, no additional set up/subscription/API required

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library

Instructions

1. Copy and paste the LiveCursor component into your project file

2. Customize the appearance through the properties panel

3. Publish the page and open the URL

4. To test the component, open the same page in two browser windows side by side, or use different devices to view the same page

5. The component will automatically start tracking cursors when multiple users view the same page simultaneously, with each cursor appearing in a different color and fading out after inactivity

How It Works

The component comes pre-connected to a public Supabase database that tracks cursor positions per page in real-time, making it truly drag-and-drop ready. Through the property controls, you can customize:

1. Cursor Size: Control how large the cursor appears (range: 12-100 pixels)

2. Background Color: Set the background color of the container

The database connection handles all the real-time cursor tracking and page-specific user management automatically, so no additional configuration is required.

Note: The component uses a shared public Supabase instance with rate limiting and row-level security in place. While this isn't the most secure approach, it enables drag-and-drop functionality since we're only tracking basic interactions.

Support

For any queries and help setting up the component, contact hello@segmentui.com