Design Systems
Motion Components
Canonical Definition
Self-contained, interactive UI components that encapsulate visual styling, spring physics, gesture listeners, and state machine logic in a single reusable unit.
Detailed Explanation & Context
Motion Components are the modular building blocks of a living design system. While traditional UI component libraries (such as Chakra UI or Shadcn) primarily define HTML structure and static CSS styling, Motion Components incorporate native gesture tracking, physics-driven entrance/exit dynamics, and multi-state branch transitions.
Mathematical Model / Governing Formula
Motion Component = Visual Geometry + Physics Springs + State Machine LogicKey Takeaways
- Encapsulate complete interaction behavior without external glue code.
- Ready to drop into production React and SwiftUI projects.
- Fully accessible with automatic keyboard and screen reader support.
Implementation Syntax (JSX)
import { ExodeUICanvas } from 'exodeui';
export function SettingsToggle() {
return <ExodeUICanvas src="/toggle.bexode" inputs={{ checked: darkMode }} onTrigger={(name) => name === 'toggle' && setDarkMode(!darkMode)} />;
}Related Glossary Terms
Pillar Guides & Tools
Apply Motion Components in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.