Motion Knowledge Hub
Master Interactive UI Motion
Comprehensive, production-grade guides on physics-driven animation, finite state machines, and design-to-code architecture. Free for designers, developers, and product teams.
Motion Development Environment
The Comprehensive Guide to Motion Development Environments (MDE)
A complete developer guide to Motion Development Environments (MDE). Learn how MDEs replace the broken handoff between design tools and production code.
What Is UI Animation? Principles, Patterns & Production
A complete guide to UI animation: what it is, the 12 core motion principles for digital interfaces, when and how to use it for engagement and usability.
Micro-Interactions: 15 Examples and How to Design Them
Micro-interactions explained: a definition, Dan Saffer's four parts, 15 real examples grouped by type, design rules and how to build them in CSS, Framer Motion, GSAP or ExodeUI.
Figma & Migration Engineering
Exporting Figma Animation to React Native: The Complete Guide
How to turn Figma animations into React Native motion with Reanimated springs, and when a runtime file is the better option.
Converting Figma Prototype Animations to Flutter Physics Widgets
Learn how to export Figma prototype animations into native Flutter SpringSimulation and AnimationController code with zero handoff debt.
Optimizing Lottie in React: Reducing Bundle Size & CPU Consumption
Discover how to optimize Lottie animations in React apps, reduce JavaScript bundle impact, and migrate static JSONs to interactive ExodeUI state machines.
Physics & Mathematical Dynamics
Spring Animation: The Physics of Natural UI Motion
Learn how spring animation works in UI design. Understand stiffness, damping, mass, and velocity. Build natural physics-based animations for React and SwiftUI.
Mastering Spring Physics in Framer Motion & ExodeUI
Complete guide to spring physics in Framer Motion. Master stiffness, damping, mass, and restDelta, and discover visual authoring with ExodeUI.
State Machine & Logic Architecture
State Machine UI: Building Deterministic, Bug-Free Interfaces
Learn how visual state machines eliminate impossible UI states, simplify complex interactive components, and create deterministic, bug-free interfaces in React.
State Machine UI Architecture: Moving Beyond Rive WebAssembly
Explore state machine UI architecture. How visual state machines, layout and physics ship from one file into React, Vue and native apps.
Design-to-Code Pipelines
Design to Code: Eliminating the Handoff Translation Tax
Learn how modern design-to-code workflows eliminate the costly translation tax between designers and developers. Explore automated code output, open formats, and AI-ready pipelines.
AI & Agentic UI
Open Design vs Claude Design: Free AI UI Generation, Open UI Standards & Shippable Runtimes
Open Design vs Claude Design: how open-source BYOK workspaces, Open UI web standards, and ExodeUI's open runtime compare for interactive UI without token walls.
A2UI Explained: What the Agent-to-UI Protocol Does (and Doesn't) Do
A2UI is a declarative JSON protocol that lets AI agents describe interfaces for a client to render. How it works, which renderers exist, and what it does not do.
Claude Animation: How to Make Animations with Claude and Ship Them to Your App
How to make animation with Claude: Claude Design, Claude Motion, artifacts and Claude Code, what each one outputs, and how to get a Claude-made animation into a real app.
Rive MCP: How to Connect Claude Code, Cursor and Codex to Rive
How the Rive MCP server works, how to connect Claude Code and Cursor to the Rive editor, what the AI can and cannot do, and how it compares with Rive's built-in agent and the Rive CLI.
Design Workflow & Scale
What Is a Motion System? A Practical Guide for UI Teams
A motion system is the shared rules, tokens and components that decide how a product moves. What belongs in one, how to manage it, and where ExodeUI fits.
One File for UI Design: How a Single Open File Replaces Handoff
A one-file UI design workflow keeps layout, states, motion, logic and data bindings in a single open file. What it changes, what it does not solve, and how ExodeUI uses it.
How to Speed Up UI Design Without Losing Quality
How to speed up UI design without losing quality: fix handoff, reuse interaction states, design motion in the same file, and measure the loop. Where ExodeUI fits.
Design Once, Run Everywhere: One UI File Across Web, iOS and Android
What it really takes to design once and run a UI on web, iOS and Android: shared layout and motion, platform-specific parts, testing, and where ExodeUI fits.
Motion Architecture & Runtime Logic
Why Linear Timeline Animations Fail in Product UI
Linear timeline animations replay one fixed path. Product UI needs branches, interruption and input velocity. Here is where timelines break and what to use instead.
Lottie vs State Machine Runtimes: What Runs Your UI?
Lottie now supports state machines in dotLottie packages. Rive and ExodeUI take different approaches. Compare what each runtime can actually run.
Interactive Mascot UI: Designing States Beyond the Idle Loop
How to design an interactive mascot that reacts to input instead of looping forever: states, timing, accessibility, performance and handoff.
Error and Success States: Designing Them as State Machines
How to design error, success, partial success and retry states as explicit UI states, with better feedback and fewer impossible combinations.
Beyond After Effects: Animating Product UI for Production
After Effects is excellent for sequences and illustration. Product UI needs states, input and runtime playback. Where AE fits, where it stops, and how to hand off.
How to Decouple Animation Logic from Application Code
Keep interaction states, springs and timing out of component code without losing control. A practical architecture for file-based animation and code.
AI-Assisted Motion & Agentic UI
UI Animations via MCP: How AI Tools Edit Motion Safely
What MCP changes for animation work, how an animation server exposes states and springs to Claude Code or Cursor, and how to review the result.
Generative UI and Interactive Motion: Keeping Generated Interfaces Usable
How motion works when an AI model assembles the interface: approved components, state logic, accessibility and a fixed frame around generated areas.
AI Coding Assistants Need Better Design Handoff, Not More Screenshots
Screenshot-to-code is a demo. Production handoff needs structured components, tokens, states and motion. What to give Claude Code, Cursor or Copilot.
AI Animation Variants: Generate Options Without Losing Your Brand
How to use AI to generate motion variants for review, which parameters to vary, and how to keep the winning option consistent with your motion system.
Prompt-Driven Motion Design: A Structure That Gets Usable Results
A repeatable prompt structure for UI motion: object, trigger, states, property, timing, platform and constraints. Includes an example and review checklist.
Debugging UI Animation States with AI: A Practical Workflow
How to find animation state bugs with AI: log the right events, reproduce the transition, compare states and turn the fix into a test.
Multi-Platform Delivery
One Animation File for Web, iOS and Android: What Can Actually Be Shared
What one animation file can share across web, iOS and Android, what must adapt per platform, and how to test a cross-platform motion component.
Interactive UI in React, Vue and Svelte: What Changes for Motion
How React, Vue and Svelte differ for interactive motion, what each framework gives you, and when a shared runtime file is the better abstraction.
Cross-Platform Mobile Gestures: Designing Motion That Feels Native
How to design swipe, drag and dismiss gestures that feel right on iOS and Android: thresholds, velocity, interruption, haptics and testing.
Proprietary vs Open Animation Formats: What Lock-In Actually Costs
Compare open and proprietary animation formats by spec access, runtime support, editability and long-term risk, with Lottie, Rive and ExodeUI examples.
Interactive Animations in Next.js: SSR, Hydration and Client Components
How to ship interactive motion in Next.js without hydration mismatches: client boundaries, dynamic loading, reduced motion and runtime integration.
One Animation Asset in a Design System: Naming, States and Versioning
How to treat interactive animation as a design-system asset: naming, states, inputs, tokens, documentation, versioning and ownership.
Interaction Craft & Accessibility
Spring Physics vs Cubic Bezier: When to Use Each in UI
A practical comparison of spring physics and cubic-bezier easing for UI: interruption, gestures, fixed sequences, performance and how to choose.
Sub-100ms Micro-Interactions: Designing for Instant Feedback
What can happen in under 100ms, why the first frame matters, and how to design micro-interactions that feel instant without hiding real latency.
Interactive Toggle Switch Architecture: States, Async and Accessibility
Design a toggle switch that handles optimistic updates, async failures, keyboard access and reduced motion without broken states.
Reduced-Motion Micro-Interactions: Keep the Meaning, Drop the Movement
How to design micro-interactions for prefers-reduced-motion: instant state changes, cross-fades, clear feedback and testing that does not remove meaning.
Interactive Data Visualizations: Motion That Explains Change
How to use motion in charts without delaying the data: update versus redraw, transitions, accessibility, reduced motion and performance.
The Psychology of Micro-Delight: When Motion Helps and When It Distracts
Delight is a side effect of good feedback, not a goal on its own. What attention, agency and perceived speed mean for micro-interaction design.
Tooling, Strategy & Teams
The Modern Web Animation Stack: CSS, WAAPI, Libraries and Runtimes
A practical map of the web animation stack: CSS, the Web Animations API, Motion, GSAP, Lottie, Rive and runtime files, and when each is the right layer.
Figma to Production: What Motion Survives the Handoff
What Figma can design and hand off for motion, what Dev Mode and MCP expose, and where production interaction still needs code or a runtime.
Video Backgrounds vs Interactive Canvas: Choosing the Right Medium
When a video background is the right choice, when an interactive canvas is better, and how to handle performance, accessibility and reduced motion.
Building a Micro-Interaction Library That Teams Actually Use
A gallery is not a library. What every micro-interaction entry needs: states, inputs, docs, tests, versioning and a path to production.
Design Engineer Tools: Why Visual Runtime Matters More Than Another Prototype
What design engineers need from motion tools: runtime behaviour, state inspection, code integration and a shared source, not another static prototype.
Design Tool Pricing: What to Compare Beyond the Monthly Number
A practical way to compare design and motion tool pricing: seats, roles, publishing, usage limits, free plans and lock-in. Includes ExodeUI's plans.
Common UI Interaction Questions
How to Make a Button Press Animation Feel Right
A practical guide to button press feedback: what to animate, how much, how fast, and how to keep it working for keyboard and reduced-motion users.
How to Animate a Modal Open and Close
How to animate a dialog so it feels connected to its trigger: origin, backdrop timing, enter and exit speeds, interruption and focus handling.
How to Animate an Accordion Without Jank
Why animating height is expensive, the two reliable techniques, how to treat the content inside, and the accessibility rules an accordion must keep.
How to Animate Toast Notifications In and Out
How to animate toasts and snackbars: where they should come from, how long to hold them, stacking behaviour, and why motion cannot carry the message alone.
How to Animate a Success Checkmark
How to animate a checkmark that confirms an action: stroke drawing, timing, sequencing with the surrounding UI, and the accessibility signal it must not replace.
How to Animate a Number Counter in UI
How to animate a counter correctly: keeping digits from jumping, easing to the exact value, formatting per locale, and not announcing every frame to screen readers.
How to Animate a Circular Progress Ring
How to build an animated progress ring with SVG, when to use determinate versus indeterminate progress, and why you should not animate fake progress.
How to Stagger Elements Into View
How to sequence UI elements with a stagger: choosing the order, calculating delays, capping total time, and knowing when not to stagger at all.
How Long Should a UI Animation Last?
Working duration ranges for UI motion, why exits are shorter than entrances, how distance and input change the answer, and when a spring has no duration at all.
How to Animate a Hamburger Menu Icon
How to animate a hamburger icon into a close button: the geometry, the timing, pairing it with the menu panel, and the accessibility attributes that must follow.
How to Animate a Toggle Switch Cleanly
A complete guide to animating a toggle switch: thumb displacement, track color shift, spring physics vs CSS transitions, touch gestures, and accessibility.
How to Animate Form Validation Errors Effectively
Learn how to animate form validation errors: the classic horizontal shake, inline error reveal, color cues, screen reader announcements, and reduced-motion fallbacks.
How to Add Celebration and Confetti Motion Without Clutter
How to design celebration and milestone animations: canvas confetti bursts, physics particle systems, performance budgets, and knowing when delight becomes annoying.
How to Animate a Mobile Bottom Sheet or Drawer
A technical guide to bottom sheet animation: drag tracking, velocity inheritance, snap points, rubber-banding, backdrop dimming, and gesture dismissal.
How to Animate Tabs and Segmented Controls with a Sliding Indicator
Step-by-step guide to building a sliding active pill for tabs and segmented controls: measuring DOM rects, layout animations, spring transitions, and tabpanel swapping.
How to Animate a Pull-to-Refresh Control
Design and build responsive pull-to-refresh animations: resistance curves, rotation progress, trigger thresholds, spinner states, and smooth release springs.
How to Animate a Swipe-to-Dismiss Card
Build smooth swipe-to-dismiss card interactions: horizontal translation tracking, opacity fading, background action reveals, and collapse collapse animation.
How to Build a Skeleton Screen That Doesn't Cause Layout Shift
Create high-performance skeleton loading screens: exact layout mirroring, CSS gradient shimmer effects, CLS prevention, and transitioning to loaded content.
How to Animate an Empty State Illustration
Design and animate empty state illustrations: continuous ambient motion, entrance reveals, vector optimization, and encouraging call-to-action clicks.
How to Animate a Dark Mode Theme Transition
Techniques for smooth dark mode theme transitions: global CSS color crossfades, circular ripple reveals using the View Transitions API, and icon morphing.
CSS Transitions vs Spring Animations in UI
Compare CSS transitions with physics-based spring animations: fixed durations, interruption handling, velocity inheritance, and runtime performance.
How to Make a Drag Interaction Feel Physical
Design tactile drag-and-drop interactions: 1:1 pointer tracking, velocity inheritance on release, rubber-band resistance, and rotation tilt.
How to Animate Page Transitions in React Router
Step-by-step guide to animating route transitions in React Router: AnimatePresence vs View Transitions API, scroll restoration, and avoiding DOM duplication.
Why Does My Animation Stutter on Mobile?
Diagnose and fix dropped frames and jank in mobile animations: layout reflows, paint storms, garbage collection, and GPU layer promotion.
Do Scroll Animations Hurt Performance?
Analyze the performance impact of scroll animations: scroll event listeners vs IntersectionObserver vs CSS Scroll-Driven Animations API, and INP impact.
How to Test Animations Automatically in Playwright
Learn how to test UI animations and state machines in Playwright: disabling motion for snapshot stability, testing reduced-motion media, and waiting for springs to settle.
How to Support prefers-reduced-motion Properly
A complete guide to supporting prefers-reduced-motion: vestibular safety, CSS media queries, JavaScript hooks, and designing meaningful reduced-motion alternatives.
Are UI Animations Accessible to Screen Reader Users?
Learn how UI animations interact with screen readers: aria-live regions, aria-expanded, aria-busy, focus management, and decorative element masking.
How to Hand Off Motion from Figma to Developers
Bridge the gap between Figma Smart Animate and production code: extracting spring tokens, sharing state diagrams, and using runnable interactive formats.
How to Keep Motion Consistent Across React, iOS and Android
Achieve identical UI animation across web and native platforms: translating spring equations between React, SwiftUI, and Jetpack Compose.
Put theory into practice.
Open ExodeUI Studio to author real physics and visual state machines without writing lines of boilerplate code.