Widgets

PresenceLayer

Collaborator cursors over a shared surface, fed by an event stream.

Collaborator cursors over a shared surface — as in Figma and multiplayer apps. Fed by the same event stream as useEventStream.

Installation

terminal

npx @toimetdev/pathlogs-ui add presence-layer

Example

Общая поверхность

Айгерим

Данияр

Ольга

Three cursors circle around — the stream is «replayed» frame by frame to show the smoothing at work.

Props

Prop	Type	Default	Description
`events`*	`PresenceEvent[]`	—	The stream of presence events: actorId, name, cursor, selection, at.
`selfId`	`string`	—	Your own actor — their cursor is not drawn.
`ttlMs`	`number`	`15000`	How long a silence before a cursor is removed.
`smoothing`	`number`	`0.2`	Catch-up smoothness (0..1): lower is smoother and slower.
`children`	`ReactNode`	—	The surface beneath the layer.

events*PresenceEvent[]

The stream of presence events: actorId, name, cursor, selection, at.

selfIdstring

Your own actor — their cursor is not drawn.

ttlMsnumber

defaults to: 15000

How long a silence before a cursor is removed.

smoothingnumber

defaults to: 0.2

Catch-up smoothness (0..1): lower is smoother and slower.

childrenReactNode

The surface beneath the layer.

Smoothing and expiry

The state, separately

tsx

import {
  applyPresence,   // apply an event (stale ones are ignored)
  interpolate,     // advance cursors towards their targets by one frame
  pruneStale,      // remove those long silent
  colorFor,        // a stable colour from an id
} from "@/components/ui/presence-layer/presence";