Runtime & Delivery
Motion Compiler
Canonical Definition
In ExodeUI, the build step that turns an open .exode file into a smaller .bexode file for production. It does not generate React, Swift or Flutter source code.
Detailed Explanation & Context
A motion compiler prepares an animation file for shipping. In ExodeUI, you design in an open .exode JSON file; for production, the scene can be compiled into a smaller .bexode file. A runtime package for your framework then plays it on a canvas, and your code controls it through inputs and events. Other tools work differently: some generate code, others ship their own binary format.
Mathematical Model / Governing Formula
.exode (open JSON) → .bexode (compiled) → runtime plays it in your appKey Takeaways
- Generates human-readable, reviewable code that lives directly in your Git repo.
- Keeps the editable source (.exode) separate from the shipped file (.bexode).
- The same compiled file plays in every supported framework runtime.
Implementation Syntax (TSX)
// Playing an ExodeUI file in React (exodeui package)
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import button from './button.exode'; // read by exodePlugin() from 'exodeui/vite-plugin'
export function SubmitButton({ loading }) {
const { setEngine, setInputBool } = useExodeUI();
useEffect(() => { setInputBool('Loading', loading); }, [loading, setInputBool]);
return <ExodeUICanvas artboard={button} onReady={setEngine} />;
}Related Glossary Terms
Pillar Guides & Tools
Apply Motion Compiler in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.