VSM Editor

{{ model.elements.length }} elements · {{ model.duration }}ms · {{ model.fps }}fps
snapshot: {{ scopeLabel }}
frame {{ frame }}/{{ frameCount }} · {{ Math.round(playhead) }}ms
{{ frameCount }} frames · scrub snaps to the frame grid · ◀ ▶ step one frame

Open an .eaf to begin — or try the sample.

Scrub the timeline · snapshot poses as states · wire triggers · test · export

New here? Read the quickstart · about VSM

Your session auto-saves in this browser as you work.

Quickstart — author a state machine

Capture poses from your animation as states, wire them with triggers, test, then export.

  1. Open an .eaf (or Load sample). The timeline auto-fills one state per keyframe — the grey ticks.
  2. Scrub to a pose worth keeping: drag the playhead, step with ‹ ›, or hit ▶ to play it through.
  3. Optional — click a shape on the stage to capture just that element, shift-click to group several; click empty space for the whole scene. The “snapshot:” chip shows the current scope.
  4. + add state captures the current frame as a new state. Rename with ✎ or double-click; single-click selects.
  5. Wire transitions on the selected state: pick a → to state, set the on trigger, duration & easing. ▶ preview plays one.
  6. Triggers click · hover · unhover · scroll · pointerdown · pointerup auto-wire in the export & live test. Custom names (press, toggle…) you fire from your own code. after ⏱ fires by itself N ms after entering the state — perfect for “play, then return to default”.
  7. Optional — emit on enter fires a named event to your host code each time the state is entered.
  8. ▶ test exercises the machine with the real runtime, right on the stage.
  9. Export — .vsm.json (the spec), SVG, or a self-contained JS module you drop into any site. Then follow the embed guide.