Physics & Math
Spring Stiffness
Canonical Definition
The mechanical tension coefficient that dictates how forcefully a spring accelerates toward its target resting position.
Detailed Explanation & Context
Stiffness (often denoted as k or tension) measures the rigidity of a spring oscillator. In user interface design, higher stiffness values mean the component reacts more aggressively to displacement, creating crisp, snappy transitions that feel instantaneous. Lower stiffness produces gentle, floating movements suitable for large page transitions.
Mathematical Model / Governing Formula
k = Spring Constant (Tension)Key Takeaways
- Governs the acceleration rate and natural frequency of the spring.
- Snappy UI micro-interactions typically use stiffness values between 350 and 600.
- Large modal sheets and dialogs typically use stiffness between 180 and 280.
Implementation Syntax (JAVASCRIPT)
// High stiffness = fast response speed
const tension = 520;Related Glossary Terms
Pillar Guides & Tools
Apply Spring Stiffness in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.