Theme 003 · Product UI as the stage

Multiplayer Cursors

A shared design-tool canvas where the cast are named cursors: one human on call, and a teal cursor labelled Acme Pulse that quietly inspects every chart frame. When the camera switches to follow mode we literally watch the agent work, and the human flies over to make the call.

readability ●●●trust ●●●effort med

Metrics board / 38 dashboardsS

38 dashboards. Nobody on checkout.

Signups

Active users

p95 latency

Error rate

Revenue

Events/sec

Retention

Checkout ⚠

Funnel v2

Cohorts

Deploys

+26 more

Sam · on call

1 · HOOK0:00–0:08

A lone grey cursor drifts left, away from the checkout frame (bezier glide, sine.inOut 0.8 s) while the headline types into a canvas text layer; on the bar-2 downbeat the checkout frame's border flushes coral for one beat and nobody notices.

Metrics board / 38 dashboardsS

Acme Pulse joined the board

Acme Pulse

888 × 228 · Text layer

Acme Pulse

Sam · on call

oh, hi Pulse

2 · REVEAL0:08 (drop)

On the drop a teal cursor streaks in from the right edge (0.5 s expo.out with slight overshoot) dragging the Acme Pulse text layer; the selection box snaps 1.06→1 on the downbeat and a second avatar pops into the stack on the next beat.

Checkout conversion

Acme Pulse

Signups ✓

p95 · 212 ms ✓

Acme Pulse09:44

Checkout conversion −18%

since 09:42 · after deploy #2231

Roll backAcknowledge

Sam · on call

Following Acme Pulse

3 · PROOF MOMENT0:12–0:32

The camera eases into Pulse's viewport with a 0.2 s lag and the teal follow-mode border draws on; Pulse's cursor boxes the drop (snap 1.06→1, 0.18 s), drops a coral comment pin on the snare, and Sam's ink cursor glides in from bottom-left to click Roll back on the downbeat.

Metrics board / all quietS

Acme Pulse

You ship. Pulse watches.

Start free

Sam · on call

Acme Pulse

watching 14 metrics

acme.example/pulse · no card needed

4 · CTA0:36–0:45

Both cursors glide in from opposite sides and park beside the CTA frame (0.7 s sine.inOut, 0.1 s apart); the ink selection snaps onto “Start free” on the final downbeat while Pulse's cursor-chat bubble types “watching 14 metrics”.

COMPONENT KIT

Named cursor + label pill — the characters: ink “Sam · on call” and teal “Acme Pulse”.
Selection box with handles — what a character is inspecting; snaps on beats.
Avatar stack — who is present; Pulse joining is the reveal.
Comment pin + thread — the anomaly and the human's options.
Cursor-chat bubble — short live remarks (“watching 14 metrics”).
Follow-mode frame — teal border + “Following Acme Pulse” = watching the agent work.

MOTION · MUSIC

Interpolated cursor glide — bezier paths with 4–6 % overshoot, 0.6–0.9 s sine.inOut, never linear; arrival is quantised to the beat (every 1 s at 120 BPM).
Selection snap — box scales 1.06→1 in 0.18 s on a snare, handles pop 0.03 s later.
Follow-cam — the camera eases to the agent's viewport with a 0.2 s lag (power2.out 0.8 s) so the move feels like a person catching up; border draws on in 1 beat.

WHY / RISK · ADAPT IT

Why: it makes the agent and the human visible as co-workers on one canvas; follow mode is a native, already-understood way to say “watch what the agent is doing”. Risk: more than 2–3 cursors reads as chaos, and tiny chart frames die at feed size, so zoom until one frame fills half the square.

Adapt to your product: swap the chart frames for your own screens or objects and name the agent cursor after your feature; the comment thread carries your product's single most important alert.

References: Figma — multiplayer editing · Building Figma-style multiplayer cursors · tldraw — camera & follow user