Live cursors

A React component in Beamline's Content & display category.

Who else is working on this, and where: over any shared surface, each person's pointer in the colour their name always gets, with a name flag, gliding between the positions your realtime service sends; their selections outlined in the same colour, a short message beside the pointer when they type one (press / for your own), quieter when they go idle and fading when they leave. Positions are fractions of the surface, so every screen size agrees.

Use it for

A canvas, board, document or dashboard several people edit at once: show where each one is pointing and what they have selected.
Cursor chat: a quick word at the place it is about, without opening comments.

Not for

The faces of who is here (avatar-group, with a presence status on each Avatar).
Comments that stay (comment-thread).
A conversation (chat-thread).

Anatomy

surface: your content as children; the cursors are drawn over it without catching the pointer
cursor: an arrow in the person's colour and a flag with their name (and a short note: 'Viewing', 'Editing')
selection: a rectangle outlined and lightly filled in their colour, their name on its corner
message: a bubble beside the pointer while they type and for a few seconds after
your message: press / over the surface, type, Enter sends and Escape closes; it follows your pointer
a live line for assistive tech: who joined, who left, and messages

Variants

flags: always, moving (names show while the cursor moves or has a message)

States

moving
still
idle (dimmed)
joining
leaving
with message
typing your message

Keyboard

/ over the focused surface starts your message; Enter sends it, Escape closes it
Cursors are pictures, not stops; the live line says who joined, who left and what they said

Motion

Each cursor glides to the latest position on a critically damped spring (updates at 10–20 per second read as one smooth path), with a frame loop that runs only while a cursor is still travelling, so a still room costs nothing. A joining cursor scales in from its tip; a leaving one fades where it was. Name flags slide out as a cursor moves and fold after it rests. Reduced motion: cursors jump to each position and flags stay.

Props

Prop	Type	Default	Description
`people` (required)	`LivePerson[]`	—
`children`	`ReactNode`	—	The shared surface.
`onCursorMove`	`(at: { x: number; y: number } \| null) => void`	—	Your pointer as fractions of the surface (null when it leaves), at most once a frame, for your realtime service to broadcast.
`onMessage`	`(text: string) => void`	—	With it, / opens your cursor message.
`flags`	`"always" \| "moving"`	—	When names show. Default "always".
`label`	`string`	—	What the surface is, for assistive tech. Default "Shared canvas".
`className / classNames / style / ref`	`root`	—

Import

import { LiveCursors } from "@/components/live-cursors/live-cursors";

Get it

Live cursors is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent