Motion frontier

Spring Physics Validator

Spring-based motion is the frontier — M3 Expressive, iOS, Framer Motion, React Spring. But no one validates whether a spring's physics produce overshoot that violates reduced-motion requirements. Until now.

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?

Preset springs

Stiffness (k)200.0 N/m

Damping (c)28.0 N·s/m

Mass (m)1.0 kg

Accessibility verdict

✓ Safe — no reduced-motion concern

Damping ratio ζ = 0.990 produces no perceptible overshoot. This spring is safe for vestibular sensitivity without explicit reduced-motion suppression.

Damping ratio (ζ)

0.990

underdamped

Overshoot

0.0%

visible

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

Spring response — displacement over time

Show reduced-motion fallback

Reduced-motion compliance checklist

✓

Spring does not produce perceptible overshoot (>2%)

If overshoot > 2%, the spring is visible to vestibular-sensitive users

Underdamped springs have explicit @media (prefers-reduced-motion: reduce) rule

Underdamped springs MUST be suppressed or replaced under reduced-motion

✓

Settle time ≤ 300ms (UI animation bound)

UI animation should stay at or below 300ms unless justified

✓

Overshoot ≤ 10% (not a vestibular trigger)

Overshoot > 10% is clearly visible and likely triggers discomfort

✓

Spring uses transform/opacity only (no layout animation)

Never animate width, height, margin, 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 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: reduceset and a spring with a low damping ratio produces visible overshoot.

This is a green-field validation capability. The Designesy contract already ships spring tokens (damping: 1.0, response: 0.4 for default, damping: 0.8, response: 0.3 for momentum). This tool lets anyone verify whether their spring parameters are safe for vestibular sensitivity — or whether they need 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 more visible the overshoot — and the more likely it triggers vestibular discomfort in sensitive users.