LanguageEnglish
Pillar 08 · Animation Engineering
Physics UI Animation: The Science of Living Digital Interfaces
Duration-based animations are dead. Learn why Apple, Google, and the best product teams in the world build exclusively with spring physics.
What is Physics UI in ExodeUI?
Physics UI Animation is an animation engineering methodology that models user interface movement using real-world physical laws—primarily second-order harmonic spring oscillators—rather than arbitrary duration timers. Because physical springs calculate resting position dynamically based on user gesture velocity, physics-driven interfaces are 100% interruptible and feel natural to human touch.
Core Architecture
Why Engineers & Designers Choose ExodeUI
Design, logic and motion in one file that runs inside your app.
Second-Order Harmonic Springs
Model interface movement using natural physical equations rather than arbitrary milliseconds and bezier handles.
Continuous Velocity Transfer
Fling and drag gestures retain human physical momentum across releases and sudden redirects.
100% Interruptible Interactions
Users can tap, drag, or redirect an animation mid-flight without snapping or visual stuttering.
Mass, Stiffness & Damping Controls
Fine-tune the exact mechanical personality of your interface with intuitive visual sliders and live preview.
Objective Evaluation
How ExodeUI Compares to Duration-Based Animation (Easing Curves)
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- Springs calculate duration automatically based on distance and velocity
- Interactions are 100% interruptible with no visual snapping
- Preserves human touch momentum for fluid native feel
- Matches the native animation models of iOS (CoreAnimation) and Android
Duration-Based Animation (Easing Curves)
- Fixed duration timers (e.g. 300ms) feel unnatural on small or large distances
- Interrupting an animation causes it to snap or violently restart
- Ignores finger fling velocity, feeling sluggish and unresponsive
- Requires writing complex custom JavaScript to handle gesture interruptions
Developer Handoff
Using It in Your Code
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// A physics-driven expand in React with the Motion library (motion.dev).
// Mass, stiffness and damping replace a fixed duration, and an interrupted
// animation continues from its current velocity.
import { motion } from 'motion/react';
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ height: open ? 240 : 64, opacity: open ? 1 : 0.7 }}
transition={{ type: 'spring', stiffness: 380, damping: 26, mass: 1 }}
style={{ overflow: 'hidden' }}
>
<h3>Physics-driven element</h3>
<p>Settles naturally, with no hard-coded duration</p>
</motion.div>
);
}The Fallacy of Duration-Based Animation
For decades, web and digital animation relied on time-based duration curves: "animate this modal from y: 100 to y: 0 in 300 milliseconds with ease-out." While this works for passive video playback, it fundamentally fails in touch-driven, interactive software for three mathematical reasons:
- Distance Variation: If a sheet travels 50 pixels in 300ms, it moves slowly. If it travels 500 pixels in 300ms, it moves ten times faster. Fixed durations create erratic velocities.
- The Interruption Disaster: If a user grabs an element while it is animating, a duration-based system snaps or breaks the physics curve.
- Velocity Blindness: When a user flings a bottom sheet upwards with rapid finger velocity, a duration curve discards that velocity and plays its canned animation from zero speed.
The Three Parameters of Spring Physics
Every spring in ExodeUI is governed by three simple, intuitive physical parameters:
Stiffness (Tension)
Controls how aggressively the spring pulls toward its target resting position. Higher stiffness creates rapid, snappy movement.
Damping (Friction)
Controls how much resistance opposes the motion. Under-damped springs oscillate and bounce; critically damped springs settle with zero overshoot.
Mass (Inertia)
Controls how heavy the element feels. Higher mass requires more force to accelerate and more damping to settle.
Topic Cluster Network
Explore Connected Concepts & Tooling
Spring Animation Playground Tool
Interactive spring sandbox & code export
Motion Development Environment
The MDE platform vision
Learn: Spring Animation Principles
Deep dive into spring equations
Glossary: Spring Physics
Definition, formula, and parameters
Got Questions?
Frequently Asked Questions
Build living components with real motion.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.