A laboratory for tuning animation transitions and seeing how they actually behave. Each engine uses its native solver — React Spring, Motion, or GSAP — so the preview and the recorded curve match the library you will ship.
Switch engines from the sidebar. Each tab keeps its own parameters and presets. Values are not remapped between libraries, because the solvers are not equivalent.
| Engine | Model | Tunable parameters | Presets |
|---|---|---|---|
| React Spring | Tension / friction physics | Mass, tension, friction, precision, initial velocity, clamp overshoot | Default, Gentle, Wobbly, Stiff, Slow, Molasses |
| Motion | Stiffness / damping spring | Stiffness, damping, mass, velocity, rest speed, rest delta | Default, Gentle, Bouncy, Snappy |
| GSAP | Duration-based tween easing | Duration, ease family, direction, plus ease-specific knobs (elastic amplitude/period, back overshoot, steps) | Elastic, Back, Bounce, Smooth, Linear |
Physics springs settle when the engine itself reports rest. GSAP runs for the duration you set. The graph axis is computed from those same rules before playback starts, so the plot does not rescale while a run is recording.
The same normalized 0 → 1 value drives every preview. Choose a scene from the icon row under the stage:
- Mechanical spring — a hanging coil and mass. Mass and tension change the drawing; clamp draws a barrier at the target line.
- Vertical translation — a pill moves up from the bottom of the frame.
- Scale — a square grows from 50% to 100%, with static outlines at both sizes.
- Rotation — a card rotates through 90°.
- Opacity — a layer fades in, with a legend marker for the current value.
Each scene sits inside a framed canvas. Overshoot is allowed to leave the frame; the outline stays on top so the boundary remains visible.
Every completed run is plotted from native frame samples, not an analytical approximation.
- Elapsed-time X axis and value Y axis, with a dashed baseline at
0and a target line at1 - Monotone cubic curve that passes through each sample without inventing extra wiggles
- Optional sample dots (hide automatically when points are too dense)
- Footer stats: duration (or settled / stopped time), min, max, and overshoot
- Live recording indicator while a run is in progress
Auto-update replays and re-records whenever parameters change. Points toggles the sample dots. Both preferences are saved.
- Play starts the selected engine from
0to1and records every frame. - Stop motion cancels the current run; the graph keeps the samples collected so far.
- Return to initial position waits one second after settle, then eases the preview back to the start.
Runs cancel cleanly on engine switch, parameter change, unmount, and React Strict Mode remounts, so stale callbacks cannot overwrite a newer curve.
The Code button opens a snippet for the active engine and parameters — a React Spring config object, a Motion type: "spring" transition, or a GSAP { duration, ease } pair — ready to copy into your app.
A single control switches the main stage:
| Mode | What you see |
|---|---|
| Mechanical | Preview only |
| Both | Preview and graph side by side |
| Graph | Recorded curve only |
The runner stays mounted in every mode, so graph-only still records. Light and dark themes, the display mode, graph options, and per-engine parameters persist in localStorage.
React Spring default preset in split view: mechanical preview on the left, recorded curve on the right.
Scale preview using the same React Spring run. The framed square and 50% / 100% outlines show how a single progress value maps onto a transform.
GSAP elastic ease in split view. The graph shows overshoot past the target and the settle-back that duration-based easing produces.
Graph-only layout for the same GSAP run — useful when you want the curve at full width.
pnpm install
pnpm devThe app is served at http://localhost:3000.
| Script | Purpose |
|---|---|
pnpm dev |
Vite development server |
pnpm build |
Typecheck, then production build |
pnpm preview |
Serve the production build |
pnpm exec vitest run |
Unit tests for engines, graph plotting, and preview mappings |
React 19, TypeScript, Vite, Tailwind CSS 4, and shadcn/ui. Visualizer state uses Jotai; persisted settings use Valtio. Animation engines are @react-spring/web, motion, and gsap / @gsap/react.
-
The mechanical spring metaphor and the five visualization modes are inspired by Joost Kiens’ react-spring-visualizer. This project is a from-scratch rewrite with three engines, live recording, and a modern React stack.
-
A Friendly Introduction to Spring Physics by Josh W. Comeau