Engineering Workflow
Motion Export
Canonical Definition
How a design tool hands animation over to production: as video, as a playback file such as Lottie, as code, or as an interactive runtime file.
Detailed Explanation & Context
Motion export is the bridge where visual design artifacts become runnable software assets. In ExodeUI, motion export does not mean rendering an MP4 video or an After Effects bodymovin JSON file; it means shipping the .exode file (or its compiled .bexode) and playing it with a runtime package in React, SwiftUI, Flutter and other frameworks. The file is JSON, so it can be versioned in Git.
Mathematical Model / Governing Formula
Exode Canvas → 1-Click Export → React / SwiftUI / Flutter / Web ComponentsKey Takeaways
- Ships an interactive file rather than a video render.
- Zero translation lag between designers and front-end engineers.
- Inputs and events stay the contract between design and code.
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 Export in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.