Logic Architecture
Canonical Definition
A computational model where an interactive interface component exists in exactly one of a finite number of deterministic states at any given time, transitioning in response to events.
Detailed Explanation & Context
State Machine UI is an architectural approach that models interactive components as formal finite state machines (FSM). Rather than managing boolean flags (like isLoading, isHovered, isSuccess, hasError) that can produce invalid combinations, a state machine explicitly defines allowed states and valid transitions. ExodeUI embeds visual state graphs directly on the motion canvas.
Mathematical Model / Governing Formula
S × E → S' (Current State × Event Trigger = Next State)Key Takeaways
- Prevents impossible UI states (e.g. displaying a loading spinner and error message simultaneously).
- Makes interactive micro-interactions self-documenting and deterministic.
- Compiles directly to clean XState configurations or lightweight React switch statements.
Implementation Syntax (TYPESCRIPT)
type AuthState = 'idle' | 'typing' | 'validating' | 'success' | 'error';
type AuthEvent = { type: 'SUBMIT' } | { type: 'RESET' };Related Glossary Terms
Pillar Guides & Tools
Apply in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.