Vector State Machine

Make any vector animation interactive.

A tiny, zero-dependency state machine for SVG. Author in your vector tool, scrub the timeline, drop markers → states, wire triggers, and export a drop-in package. No WASM, no runtime renderer — just clean SVG in the DOM.

👆 click the button — the path morphs and the colour shifts, driven by the state machine

Open the editor → Embed guide Live demo Vue example

tip  In the editor, hit Load sample to scrub this exact button, then ▶ test and Export.

How it works

1

Author

Design & animate in Expressive Animator — keep the .eaf file.

2

Mark states

Open it in the editor, scrub the timeline, snapshot poses as states.

3

Wire triggers

Connect states — click, hover… — emit events back to your app. Test live on the stage.

4

Export & embed

One self-contained JS file, or SVG + .vsm.json. Embed guide →

🪶 Lightweight

~2 KB core. Drop it on any page; it drives the SVG you already have.

🔀 Real states

default → A → default → B, with triggers, conditions, and emitted events back to your app.

🧩 Framework-agnostic

Vanilla JS, Vue, React — same core. Local-cache persistence built in.

✏️ Authorable

Import an Expressive Animator .eaf, scrub, mark states, export SVG + .vsm.json.

Embed in one snippet

<!-- the editor exports a self-contained button.js (16 KB, 0 deps) -->
<div id="btn"></div>
<script type="module">
  import mount from './button.js';
  const m = mount('#btn', { persist: { key: 'btn' } });
  m.on('onPress', () => addToCart());
  btn.onclick = () => m.fire('press');
</script>