---
title: "Live Cursor — Framer component · Best of Framer"
description: "$19.00 · Framer component · by Nabeel · Cursors. About This component creates a real-time collaborative cursor tracking area on your canvas that shows multiple users' cursor positions…"
canonical: "https://framer.elliotli.dev/component/live-cursor"
---

[Home](/)/[Components](/components)/[Cursors](/components/category/cursors)/Live Cursor

# Live Cursor

[View on Framer](https://framer.com/marketplace/components/live-cursor/?via=elliot-li)

![Live Cursor preview image 1](https://framer.elliotli.dev/og/component/live-cursor/36abf3957562f7f2/1600x1200.jpg)

## Summary

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…

## Description

## 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](https://segmentui.com/uikit) 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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1gyfj0b2-FRJR9x3X7ysvIXpl0O4bVhuCBh2A7r)

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](mailto:hello@segmentui.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #9688

## Details

- **Author**: Nabeel
- **Price**: $19.00
- **Published**: 2025-08-18
- **Updated**: 2025-08-15
- **Added**: 2025-08-12
- **Categories**: Cursors

## More like this

-   [Ribbon Hero](/component/ribbon-hero) — Divyesh WebCraft · Free — 3D ribbon with smooth motion
-   [Spider Hunt](/component/spider-hunt) — Karim Saif · $6 — ٍpider that tracks your cursor
-   [Pixel Fluid](/component/pixel-fluid) — Jamik · $12 — Fluid cursor trail in pixels/ASCII
-   [CursorImageTrail](/component/cursorimagetrail) — princeee · $20 — Image Trail is a dynamic Framer component that creates an immersive hover experience by displaying a sequence of images that trail behind…