How to Build Interactive Vector State Machines in React
Step-by-step tutorial on building interactive vector state machines in React with ExodeUI. Connect mouse events, inputs, and spring physics without heavy re-renders.
Core Takeaway
To build interactive vector state machines in React, create your vector assets and define states (Idle, Hover, Active, Success) within ExodeUI's visual editor. Export the .exode file into your public assets folder, install the exodeui npm package, and render the ExodeUICanvas component with declarative inputs. State transitions and spring physics evaluate natively inside the canvas without triggering heavy React component re-renders.
Why State Machines Beat Boolean Spaghetti in React
Traditional React animations often rely on multiple useState flags (isHovered, isPressed, isLoading, isComplete). As interaction states multiply, combinations of conflicting flags inevitably create impossible UI states, such as a button appearing both disabled and hovered. A finite state machine (FSM) guarantees that a component exists in exactly one state at any moment, eliminating erratic glitches.
- Deterministic transitions: A component can only move to states allowed by its current configuration.
- Spring physics integration: States remember incoming velocity, so rapidly interrupted clicks feel natural.
- Zero re-render overhead: Visual properties interpolate inside the ExodeUI canvas loop rather than triggering React VDOM reconciliations.
Designing the State Machine in ExodeUI
Inside ExodeUI, vector layers are grouped into symbols with dedicated state layers. You define inputs—such as boolean flags (active), numeric metrics (progress 0-100), or discrete triggers (click). Transitions between states are configured with spring constants: stiffness determines response snap, damping prevents jarring oscillations, and mass models physical weight.
- Create states: Add Idle, Pressed, Active, and Error states in the visual timeline.
- Wire transitions: Connect states using input condition rules (e.g. when active == true).
- Set spring physics: Choose between bouncy, snappy, or smooth spring presets.
Wiring the State Machine to React Props
Embedding the state machine in React is straightforward using the official exodeui package. Pass input variables directly into the inputs prop. When local state or API responses update, ExodeUI smoothly animates to the matching state without extra boilerplate.
Production Implementation Snippet
import React, { useState } from 'react';
import { ExodeUICanvas } from 'exodeui';
export function InteractiveToggle() {
const [enabled, setEnabled] = useState(false);
return (
<div className="flex items-center gap-3 p-4 bg-neutral-900 rounded-xl">
<ExodeUICanvas
src="/assets/toggle_machine.exode"
inputs={{ active: enabled }}
onEvent={(event) => {
if (event === 'click') setEnabled((prev) => !prev);
}}
style={{ width: 64, height: 36 }}
/>
<span className="text-white font-medium">
{enabled ? 'Active State' : 'Idle State'}
</span>
</div>
);
}