# react-spring stiff: CSS linear() spring, stiffness 210 damping 20

> react-spring stiff as a CSS linear() spring: stiffness 210, damping 20, settles in 0.715 s, overshoots 5%. Copy the CSS and the Web Animations line.

Canonical: https://vawe.dev/springs/react-spring-stiff
Last updated: 2026-11-04

Stiffness 210, damping 20 and mass 1 give a damping ratio of 0.69, so the spring is underdamped. It settles to within 0.1% in 0.715 s. It passes the end value by up to 5% at 0.3 s and crosses it 2 times.

Its settle time is about the same as default (0.715 s against 0.705 s), but default does not overshoot.

| Measure | Value |
| --- | --- |
| Stiffness | 210 |
| Damping | 20 |
| Mass | 1 |
| Damping ratio | 0.69 (underdamped) |
| Settle time | 0.715 s |
| Overshoot | 5% |
| Crosses the end value | 2 |
| 50% of travel at | 0.099 s |
| 90% of travel at | 0.18 s |

## CSS linear()

```css
transition: translate 715ms linear(0, 0.0079, 0.0297, 0.0629, 0.1049, 0.1539, 0.2078, 0.265, 0.3241, 0.384, 0.4434, 0.5017, 0.5581, 0.612, 0.6631, 0.711, 0.7554, 0.7964, 0.8337, 0.8675, 0.8978, 0.9247, 0.9484, 0.969, 0.9866, 1.0016, 1.0142, 1.0244, 1.0326, 1.039, 1.0437, 1.0469, 1.049, 1.0499, 1.0499, 1.0492, 1.0478, 1.0459, 1.0436, 1.041, 1.0383, 1.0353, 1.0324, 1.0294, 1.0264, 1.0235, 1.0208, 1.0181, 1.0157, 1.0134, 1.0112, 1.0093, 1.0075, 1.0059, 1.0044, 1.0032, 1.0021, 1.0011, 1.0003, 0.9996, 0.999, 0.9986, 0.9982, 0.9979, 0.9977, 0.9976, 0.9975, 0.9975, 0.9975, 0.9976, 0.9977, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9985, 0.9986, 0.9987, 0.9989, 1);
```

## Web Animations

```js
el.animate({ translate: ['0 0', '240px 0'] }, { duration: 715, easing: 'linear(0, 0.0079, 0.0297, 0.0629, 0.1049, 0.1539, 0.2078, 0.265, 0.3241, 0.384, 0.4434, 0.5017, 0.5581, 0.612, 0.6631, 0.711, 0.7554, 0.7964, 0.8337, 0.8675, 0.8978, 0.9247, 0.9484, 0.969, 0.9866, 1.0016, 1.0142, 1.0244, 1.0326, 1.039, 1.0437, 1.0469, 1.049, 1.0499, 1.0499, 1.0492, 1.0478, 1.0459, 1.0436, 1.041, 1.0383, 1.0353, 1.0324, 1.0294, 1.0264, 1.0235, 1.0208, 1.0181, 1.0157, 1.0134, 1.0112, 1.0093, 1.0075, 1.0059, 1.0044, 1.0032, 1.0021, 1.0011, 1.0003, 0.9996, 0.999, 0.9986, 0.9982, 0.9979, 0.9977, 0.9976, 0.9975, 0.9975, 0.9975, 0.9976, 0.9977, 0.9978, 0.9979, 0.998, 0.9982, 0.9983, 0.9985, 0.9986, 0.9987, 0.9989, 1)', fill: 'both' });
```

## In a vawe page

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

const k = 210, d = 20;

// 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: 715 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

config.stiff = { tension: 210, friction: 20 }. @react-spring/core 10.1.2, packages/core/src/constants.ts, const config (https://github.com/pmndrs/react-spring/blob/main/packages/core/src/constants.ts). Conversion: Stiffness is tension and damping is friction, with mass 1 (the default). The physics loop in the same package, acceleration = (-tension x displacement - friction x velocity) / mass, is the spring that spring() in springs.js solves.

## Related

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