Motion frontier

Spring Physics Validator

Spring-based motion ships in M3 Expressive, iOS, Framer Motion and React Spring. This tool computes a spring's overshoot and compares it with the contract's reduced-motion thresholds.

Input stiffness, damping, and mass. Get the damping ratio, overshoot percentage, settle time, and an accessibility verdict: does this spring require explicit reduced-motion suppression?

View as Markdown

Preset springs

Spring response

M3 Default

Pass · no reduced-motion rule required

Displacement over time

Show reduced-motion fallback

Damping ratio ζ = 0.990 keeps overshoot at 2% or less, under the contract's threshold, so the contract requires no reduced-motion rule for this spring.

Accessibility verdict: Pass

Overshoot of 2% or less is under the contract's threshold. The contract requires no reduced-motion rule.

Parameters

Stiffness (k)200.0 N/m

Damping (c)28.0 N·s/m

Mass (m)1.0 kg

Readouts

Damping ratio (ζ): 0.990; underdamped
Overshoot: 0.0%; none
Settle time (2%): 286ms; to equilibrium
Rise time: 111ms; to equilibrium
Natural freq: 2.25 Hz; 14.1 rad/s
Damped freq: 0.32 Hz; 2.0 rad/s

Compliance checklist

Reduced motion · follows the verdict

Met: Overshoot is 2% or less (the contract's threshold)
Above 2% overshoot, the contract requires a reduced-motion rule
Not applicable: Visible overshoot has an explicit @media (prefers-reduced-motion: reduce) rule
Not required: overshoot is 2% or less, under the contract's threshold
Met: Overshoot ≤ 10% (the contract's suppression threshold)
Above 10%, the contract requires suppressing the spring under reduced motion

Motion budget · outside the verdict

Met: Settle time ≤ 300ms (UI animation bound)
UI animation should stay at or below 300ms unless justified
Met: Spring uses transform/opacity only (no layout animation)
Never animate width, height, margin, or padding; use transform and opacity

CSS snippet with reduced-motion fallback

.spring-underdamped {
  /* Damping ratio: ζ = 0.990 · Overshoot: 0.0% */
  transition: transform 286ms cubic-bezier(0.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .spring-underdamped {
    /* Suppress overshoot: linear or ease-out at 150ms */
    transition: transform 150ms ease-out;
  }
}

View Designesy motion contract →Score your site →All computation is client-side; no data is sent to any server.

Why this exists

Material Design 3 Expressive introduced spring-based motion backed by 46 research studies. But M3 has no published reduced-motion token for springs. The spec describes spring physics (damping, response) but does not address what happens when a user has prefers-reduced-motion: reduce set and a spring with a low damping ratio produces visible overshoot.

The Designesy contract ships spring tokens (damping: 1.0, response: 0.4 for default, damping: 0.8, response: 0.3 for momentum). This tool checks whether a spring's overshoot crosses the contract's 2% or 10% threshold, and so whether it needs an explicit reduced-motion fallback.

The physics: a spring's damping ratio (ζ) determines its behavior. ζ > 1 is overdamped (no overshoot, slow). ζ = 1 is critically damped (no overshoot, fastest settle). 0 < ζ < 1 is underdamped (overshoots, oscillates). The lower the damping ratio, the larger the overshoot.