React animation example
React Spring Animation: Interactive Spring Physics Demo
Spring animations feel natural because they have no fixed duration: they settle when the physics says so. This demo lets you feel the two numbers that matter. Drag the ball away from its anchor and release it; the graph below records its position so you can see under-damped wobble turn into a clean settle as damping rises.
- 4.4 KB file
- 5 live inputs
- React runtime
How this spring playground works
- Acceleration is stiffness × displacement minus damping × velocity, integrated every frame.
- Damping ratio is shown live: below 1 the spring overshoots, at 1 it settles fastest without overshoot.
- Stiffness and damping are inputs, so you can tune a feel here and reuse the numbers in your own code.
Add it to your React app
Install exodeui, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui';
// react-spring-animation.bexode goes in /public (download it below)
export function ReactSpringAnimation() {
return (
<ExodeUICanvas
src="/react-spring-animation.bexode"
fit="Layout"
autoPlay
interactive
onTrigger={(name) => {
// fires: 'release'
}}
style={{ width: '100%', height: 520 }}
/>
);
}Inputs
| Input | Type | Default | Range |
|---|---|---|---|
stiffness | Number | 180 | 20 – 600 |
damping | Number | 10 | 1 – 60 |
accent | Text | #f59e0b | hex colour |
accent2 | Text | #38bdf8 | hex colour |
bg | Text | #0a0a0c | hex colour |
Events: release
More React animations
Orbit LoaderThree orbiting dots with motion trails and a live percentage; works as an endless spinner or a determinate loader.Depth Parallax SceneFive depth layers of mountains and sky that shift with the cursor at different speeds.Scramble TextA headline that decodes from random glyphs letter by letter; click to scramble to the next phrase.Shared Element TransitionA card grid where the tapped card springs into a full detail page and back: a shared element transition.Liquid Fill ButtonA button that fills with a liquid wave on hover and morphs into a checkmark on click.Like Heart IconA heart icon that squashes, pops and bursts into particles when liked, with a live counter.
The same idea in other frameworks: SwiftUI spring response comparison