Realtime Cursor

Installation

Folder structure

1import { cn } from '@/lib/utils'
2import { MousePointer2 } from 'lucide-react'
3
4export const Cursor = ({
5  className,
6  style,
7  color,
8  name,
9}: {
10  className?: string
11  style?: React.CSSProperties
12  color: string
13  name: string
14}) => {
15  return (
16    <div className={cn('pointer-events-none', className)} style={style}>
17      <MousePointer2 color={color} fill={color} size={30} />
18
19      <div
20        className="mt-1 px-2 py-1 rounded text-xs font-bold text-white text-center"
21        style={{ backgroundColor: color }}
22      >
23        {name}
24      </div>
25    </div>
26  )
27}

Introduction

The Realtime Cursors component lets users share their cursor position with others in the same room—perfect for real-time collaboration. It handles all the setup and boilerplate for you, so you can add it to your app with minimal effort.

Features

• Broadcast cursor position to other users in the same room
• Customizable cursor appearance
• Presence detection (automatically joins/leaves users)
• Low-latency updates using Supabase Realtime
• Room-based isolation for scoped collaboration

Usage

The Realtime Cursor component is designed to be used in a room. It can be used to build real-time collaborative applications. Add the <RealtimeCursors /> component to your page and it will render realtime cursors from other users in the room.

'use client'
import { RealtimeCursors } from '@/components/realtime-cursors'
 
export default function Page() {
  return (
    <div className="w-full min-h-screen">
      <RealtimeCursors roomName="macrodata_refinement_office" username="Mark Scout" />
    </div>
  )
}

Props

Further reading

• Realtime Broadcast
• Realtime authorization

Smoother cursors

While our Realtime Cursor component aims to keep things simple and lightweight, you may want to add smoother cursor animations for a more polished experience. Libraries like perfect-cursors can be integrated to add sophisticated interpolation between cursor positions. This is especially useful when dealing with network latency, as it creates fluid cursor movements even when position updates are received at longer intervals (e.g., every 50-80ms). The library handles the complex math of creating natural-looking cursor paths while maintaining performance.