# vawe snappy: CSS linear() spring, stiffness 400 damping 32

> vawe snappy as a CSS linear() spring: stiffness 400, damping 32, settles in 0.425 s, overshoots 1.5%. Copy the CSS and the Web Animations line.

Canonical: https://vawe.dev/springs/vawe-snappy
Last updated: 2026-11-04

Stiffness 400, damping 32 and mass 1 give a damping ratio of 0.8, so the spring is underdamped. It settles to within 0.1% in 0.425 s. It passes the end value by up to 1.5% at 0.262 s and crosses it 1 time.

indicator() gives this spring to the edge of a moving indicator that leads the move.

| Measure | Value |
| --- | --- |
| Stiffness | 400 |
| Damping | 32 |
| Mass | 1 |
| Damping ratio | 0.8 (underdamped) |
| Settle time | 0.425 s |
| Overshoot | 1.5% |
| Crosses the end value | 1 |
| 50% of travel at | 0.076 s |
| 90% of travel at | 0.15 s |

## CSS linear()

```css
transition: translate 425ms linear(0, 0.0053, 0.0201, 0.0428, 0.0719, 0.106, 0.1441, 0.1851, 0.2281, 0.2724, 0.3173, 0.3623, 0.4069, 0.4507, 0.4933, 0.5345, 0.5741, 0.6119, 0.6478, 0.6818, 0.7137, 0.7437, 0.7716, 0.7975, 0.8215, 0.8435, 0.8638, 0.8823, 0.8991, 0.9143, 0.9281, 0.9404, 0.9514, 0.9613, 0.9699, 0.9776, 0.9842, 0.99, 0.995, 0.9993, 1.0029, 1.0059, 1.0084, 1.0104, 1.012, 1.0132, 1.0141, 1.0147, 1.015, 1.0152, 1.0151, 1.0149, 1.0146, 1.0142, 1.0137, 1.0131, 1.0125, 1.0119, 1.0112, 1.0105, 1.0099, 1.0092, 1.0085, 1.0079, 1.0072, 1.0066, 1.006, 1.0055, 1.005, 1.0045, 1.004, 1.0036, 1.0032, 1.0028, 1.0025, 1.0021, 1.0019, 1.0016, 1.0014, 1.0011, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 425, easing: 'linear(0, 0.0053, 0.0201, 0.0428, 0.0719, 0.106, 0.1441, 0.1851, 0.2281, 0.2724, 0.3173, 0.3623, 0.4069, 0.4507, 0.4933, 0.5345, 0.5741, 0.6119, 0.6478, 0.6818, 0.7137, 0.7437, 0.7716, 0.7975, 0.8215, 0.8435, 0.8638, 0.8823, 0.8991, 0.9143, 0.9281, 0.9404, 0.9514, 0.9613, 0.9699, 0.9776, 0.9842, 0.99, 0.995, 0.9993, 1.0029, 1.0059, 1.0084, 1.0104, 1.012, 1.0132, 1.0141, 1.0147, 1.015, 1.0152, 1.0151, 1.0149, 1.0146, 1.0142, 1.0137, 1.0131, 1.0125, 1.0119, 1.0112, 1.0105, 1.0099, 1.0092, 1.0085, 1.0079, 1.0072, 1.0066, 1.006, 1.0055, 1.005, 1.0045, 1.004, 1.0036, 1.0032, 1.0028, 1.0025, 1.0021, 1.0019, 1.0016, 1.0014, 1.0011, 1)', fill: 'both' });
```

## In a vawe page

```js
import { SPRINGS, spring, springDuration, springLinear } from '../../core/motion/springs.js';

const { k, d } = SPRINGS.snappy;

// per-frame code (window.seek, vawe.onFrame): t is seconds since the move starts
const x = 240 * spring(t, k, d);

// CSS and Web Animations: 425 ms, the linear() string above
el.animate(
  { translate: ['0 0', '240px 0'] },
  { duration: springDuration(k, d) * 1000, easing: springLinear(k, d), fill: 'both' },
);
```

## Source of the numbers

SPRINGS.snappy = { k: 400, d: 32 }. core/motion/springs.js, SPRINGS.snappy.

## Related

- [Material 3 Expressive default spatial](https://vawe.dev/springs/material-expressive-default-spatial)
- [Compose NoBouncy with StiffnessMediumLow](https://vawe.dev/springs/compose-no-bouncy-medium-low)
- [Material 3 Standard default spatial](https://vawe.dev/springs/material-standard-default-spatial)
- [react-spring stiff](https://vawe.dev/springs/react-spring-stiff)
- [All spring presets](https://vawe.dev/springs)