ExodeUI React SDK

The official React Runtime for the ExodeUI Animation Engine. Seamlessly render and interact with high-performance animations, physics simulations, and state machines built with ExodeUI.

Installation

npm install exodeui
# or
yarn add exodeui

Basic Usage

import { ExodeUICanvas } from 'exodeui';

function App() {
  return (
    <div style={{ width: 800, height: 600 }}>
      <ExodeUICanvas 
        src="/animations/my-scene.json"
        autoPlay={true}
        fit="Contain"
        alignment="Center"
      />
    </div>
  );
}

Features

1. State Machine & Logic

ExodeUI supports complex interactive logic using a node-based State Machine.

• Inputs: Control the flow with Boolean, Number, and Trigger inputs.
• Logic Nodes: Combine inputs using AND, OR, NOT, XOR.
• Conditions: Create transitions based on input values (e.g., Speed > 10, IsHovered == true).

const [engine, setEngine] = useState<ExodeUIEngine | null>(null);

// ... inside your component
<ExodeUICanvas 
  src="/player_controller.json"
  onReady={setEngine}
/>

// Button controls
<button onClick={() => engine?.setInputBool('IsRunning', true)}>Run</button>
<button onClick={() => engine?.fireTrigger('Jump')}>Jump</button>

2. Physics Engine

Built-in 2D physics using Rapier.

• Dynamic Bodies: Objects that react to gravity and collisions.
• Static Bodies: Platforms and walls.
• Kinematic: Animated objects that push other bodies.
• Properties: Mass, Friction, Restitution (Bounciness), Density.

Physics is configured directly in the ExodeUI Editor.

3. Data Visualization (Line Graphs)

Render beautiful, animated line graphs with zero extra code.

• Line Graphs: Supports multiple datasets, smoothing (Catmull-Rom splines), fill areas, and points.
• Data Binding: Bind graph data to runtime inputs or variables.

// Example of injecting data via Inputs (if supported by your graph configuration)
// engine.setInputNumberArray('StockData', [10, 25, 15, 40, 35, 60]); 
// (Note: array input support depends on your specific version/setup)

API Reference

<ExodeUICanvas />

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | - | URL to the animation JSON file. | | artboard | object | - | Direct JSON data object (if imported). | | fit | 'Contain' \| 'Cover' \| 'Fill' | 'Contain' | Scaling strategy. | | alignment | 'Center' \| 'TopLeft' ... | 'Center' | Alignment within the canvas. | | autoPlay | boolean | true | Auto-start the animation loop. | | onReady | (engine: ExodeUIEngine) => void | - | Callback when engine is initialized. | | onTrigger | (name: string, animationName: string) => void | - | Listener for outgoing triggers (events). | | onInputUpdate | (nameOrId: string, value: any) => void | - | Listener for input value changes. |

useExodeUI Hook

A helper hook for easier engine management.

import { useExodeUI, ExodeUICanvas } from 'exodeui';

function Game() {
  const { setEngine, setInputBool, fireTrigger } = useExodeUI();

  return (
    <>
      <ExodeUICanvas src="/game.json" onReady={setEngine} />
      <div className="controls">
          <button onMouseDown={() => setInputBool('Fire', true)}>Shoot</button>
      </div>
    </>
  );
}

Advanced

Logic Nodes

The engine automatically evaluates logic nodes defined in the editor.

• AND / OR / XOR / NOT gates allow for complex condition evaluation without writing code.
• Inputs are strictly typed: Boolean, Number, Trigger (momentary boolean), Text.

Custom Fonts

Ensure any custom fonts used in the ExodeUI editor are loaded in your web page (e.g., via Google Fonts or @font-face) for correct rendering.

License

MIT