Physics & Math
Canonical Definition
A mathematical animation model based on second-order differential harmonic oscillators that calculates movement using stiffness, damping, and mass rather than fixed durations.
Detailed Explanation & Context
Spring physics in digital UI is an animation paradigm that calculates the position and velocity of interface elements using physical simulation rather than time-based interpolation. While a linear duration curve forces an animation to run for a fixed number of milliseconds regardless of how far it travels, a spring dynamic simulator adapts naturally to the distance and user touch momentum, creating fluid, 100% interruptible interactions.
Mathematical Model / Governing Formula
F = -kx - cv (Hooke's Law with Viscous Damping)Key Takeaways
- Stiffness (k) governs the acceleration toward the rest target.
- Damping (c) introduces friction that opposes velocity and prevents infinite bouncing.
- Mass (m) determines mechanical inertia and response resistance.
Implementation Syntax (JSX)
const { scale } = useSpring({
scale: pressed ? 0.92 : 1.0,
stiffness: 420,
damping: 26,
mass: 1.0
});Pillar Guides & Tools
Apply in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.