Knobs

What Energy, Bounce, and Distance each control.

Three knobs, each from 0 to 1, generate every token. Presets are saved knob positions. The demos on this page are live: they move this site's own preset.

Energy

Energy sets how fast things move and settle: spring stiffness, tween durations, and stagger.

• spring.default stiffness = 180 × (800 / 180)^energy. So 0 gives 180, 1 gives 800.
• spring.fast = default × 1.4. spring.slow = default × 0.55.
• duration.base = 140 + 160 × (1 − energy) ms. fast = base × 0.7. slow = base × 1.5. instant is always 80 ms.
• stagger.list = 20 + 40 × (1 − energy) ms.

Bounce

Bounce sets how much springs overshoot before they settle: the damping ratio of every spring.

• Damping ratio = 1 − 0.55 × bounce. 0 gives 1 (no overshoot). 1 gives 0.45.
• Damping = ratio × 2√(stiffness × mass).
• spring.fast uses min(ratio + 0.1, 1), so presses never wobble much.

Distance

Distance sets how far things travel and how much they scale.

• distance.md = 4 + 28 × distance px. sm = md / 3. lg = md × 2.
• scale.enter = 1 − 0.1 × distance. scale.press = 0.98 − 0.04 × distance.

Style

The knobs set how much things move. The style sets what kind of movement it is. Pick one option in each row.

| Row | Options | What it changes | | --- | --- | --- | | Entrance | Rise, Pop, Slide, Blur, Unfold | How dialogs, menus, tooltips, toasts, and list items appear | | Curve | Spring, Glide, Crisp | The movement curve. Glide (long, smooth slow-down) and Crisp (quick in, quick out) never bounce, so Bounce turns off | | Groups | Together, Cascade, Wave, From click | How a group of items moves: all at once, one after another, from the middle out, or growing out of what was clicked | | Press | Squeeze, Squish, Sink, Glow | How a pressed element answers: shrinks, squashes like rubber, sinks into the page, or lights up |

Shuffle picks a random style and knobs, and names the result, for example "Cinematic: Glide, Slide, Cascade". In reduced motion every style falls back to fades.

Presets

| Preset | Energy | Bounce | Distance | Style | Feels like | | --- | --- | --- | --- | --- | --- | | Calm | 0.30 | 0.00 | 0.25 | Blur, Glide, Together, Glow | Docs, finance, healthcare. Glides and comes into focus. Never bounces. | | Snappy | 0.70 | 0.20 | 0.40 | Rise, Spring, Cascade, Squeeze | Productivity tools. Quick, with a hair of overshoot. | | Playful | 0.60 | 0.65 | 0.75 | Pop, Spring, Wave, Squish | Consumer and onboarding. Pops, bounces, and squishes. | | Minimal | 0.60 | 0.00 | 0.10 | Rise, Glide, Together, Glow | Quiet utilities and settings. Tiny moves, a soft glow, nothing extra. | | Crisp | 0.90 | 0.00 | 0.30 | Unfold, Crisp, Together, Squeeze | Developer tools and dashboards. Fast and exact. Unfolds, never bounces. | | Cinematic | 0.20 | 0.00 | 0.90 | Slide, Glide, Cascade, Sink | Media, portfolios, and launch pages. Long, smooth slides that sink on press. | | Bouncy | 0.55 | 1.00 | 0.60 | Pop, Spring, From click, Squish | Games and celebrations. Big pops from where you click, with lots of wobble. |

Snappy is the default. Touching any knob or style changes the label to Custom.