Multi Cursor Choreography

How It Works

Everything hangs off one data table:

1. The actor table — a literal ACTORS array: per actor a name, a color, and a waypoint schedule ({ x, y, at, dur } legs plus action beats). All coordinates and times are hand-authored constants — the choreography is data: deterministic, seekable, and auditable for collisions before a single frame renders.
2. Legs as explicit fromTos — each leg tweens the actor wrapper from the previous waypoint to the next at an absolute position. Gaps between legs are rests: the cursor sits still exactly where it landed.
3. Actions — a leg can end in a grab (press dip; the payload rides the next leg in lockstep — cursor-drag.md mechanics at chorus intensity), a drop (tl.set identity swap + tiny settle pop), or a hover (a highlight fades in under the tip, once, then holds).
4. The interleaved beat grid — actions land on alternating beats (~1.2 / 2.6 / 4.0 s): at any moment at most one action lands while the others glide or rest. Each actor owns a home zone of the canvas; only one actor at a time leaves its zone, so paths never cross near-simultaneously. (Short specimens under ~5s can compress beat spacing to ~0.3–0.9s — zones still prevent collisions; the ≥1s spacing is for ambience-length shots.)
5. Ambience staging — cursors may already be mid-canvas at t=0 (the team was working before we arrived — the collaborative-canvas idiom), or enter off-frame on staggered starts. The canvas group may slowly translate-pan under the ensemble (element translate, not a camera).

Recipe

Variations

• Ambient collaborative canvas (the Hook register) — the default: actors mid-canvas at t=0, canvas slowly panning, a headline building over the top (waterfall-entry.md). The demo is set-dressing for the words; keep every action small and the beat grid loose.
• One labeled editor (N = 1, still ensemble-styled) — a single labeled teammate cursor performs one visible edit (deletes and retypes a headline word via discrete-text-sequence.md, or drops one component). The name tag is the point: a person did this.
• Featured beat inside the ensemble — one actor briefly becomes the lead: full cursor-drag.md grab-carry-drop with chrome while the others explicitly REST for that window. Freeze the chorus; two things moving with intent at once splits the eye.
• Staggered entrances — cursors enter from off-frame at ENTER_AT + i * ENTER_STAGGER, each gliding to its zone (“the team assembles”); entry vectors from different edges, per the house cursor entry law.

Values

Critical Constraints

• The table is the choreography — all waypoints, times, and actions are literal data. If you can’t verify non-collision by reading the at columns, the schedule is too clever.
• Every leg is an explicit fromTo with the previous waypoint as the from-state, immediateRender: false on all but each actor’s initial placement — chained .to()s on shared properties capture stale starts under seek.
• Interleave, never chord — at most one action landing at any moment; simultaneous travel is fine (that’s the liveness), simultaneous payoffs compete.
• Chorus intensity — every action is a quieter version of its solo rule: smaller dips, subtler snaps, no ripple bursts; save full treatment for a featured beat.
• Rest is stillness — between legs a cursor holds exactly where it landed: no idle drift, no yoyo wander on any actor.
• Payload lockstep — a carried chip’s tween matches its actor’s leg exactly (position, duration, ease), per the cursor-drag law.
• The wrapper moves, never the parts — arrow + name tag are one element; tweening them separately shears the actor apart under seek.
• Camera locked — no viewport zoom/pan tweens; the only large-scale motion is the linear canvas-group translate. Never zoom to an actor (that’s a solo-cursor shot).
• Actors are people — human-speed glides, pauses, one thing at a time; pointer-events: none on all actors. Check tl.duration() — ensembles accumulate long tails from late rests.

See also

cursor-drag (full-treatment featured beat) · cursor-click-ripple (chorus click — press only, skip the ripple) · discrete-text-sequence (a labeled actor’s retype edit) · viewport-change (the canvas-group translate math) · spring-pop-entrance (components popping in as drop results).