Live cursors

Enable multiplayer cursors with <LiveCursors>

Open page in two windows

Open this page in two windows to see live cursors

How to use

Show each users' cursor on screen. Options for showing names, movement algorithm and element used for events.

---
import LiveCursors from 'astro-collab/LiveCursors.astro'
---
<!-- Just cursors shown -->
<LiveCursors />

<!-- Show names next to cursors -->
<LiveCursors names />

<!-- A quicker, but less smooth, animation -->
<LiveCursors movement="quick" />

<!-- A realistic, but delayed, animation -->
<LiveCursors movement="perfect" />

<!-- CSS selector of pointer event element, default: html -->
<LiveCursors selector="body" />

---
import 'astro-collab/live-cursors'
---
<!-- Just cursors shown -->
<live-cursor client:load />

<!-- Show names next to cursors -->
<live-cursor names client:load />

<!-- Use quicker, less smooth, animation -->
<live-cursor movement="quick" client:load />

<!-- CSS selector of pointer event element, default: body -->
<live-cursor selector="#app" client:load />

A minimal working example can be found here.

Customise

Customise with CSS parts:

<style is:global>
  live-cursor::part(cursor) {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
  }

  live-cursor::part(cursor_name) {
    font-weight: 500;
  }
</style>

All CSS parts:

cursors,
cursor,
cursor_svg,
cursor_name

Important note

All multiplayer components must be wrapped in a single LiveblocksRoom component, check the quick start guide for more info.

Components

@ctnicholasdev