← BACK · SIMMER DESIGN SYSTEM

Motion.

Motion should feel considered, not decorative. Every transition is built from two primitives: a duration and an easing. The system ships five of each. All interaction transitions are composed from these tokens — no ad-hoc timings.

// 01 · DURATIONS

Duration scale.

instant
80ms
Press feedback. Must feel immediate.
fast
140ms
Hover, focus, small swaps.
base
220ms
Default. Most transitions.
slow
360ms
Entries, exits, overlays.
deliberate
560ms
Modals, sheets, data-heavy reveals.

Hover any card to see the duration.

// 02 · EASINGS

Easing curves.

out-subtle
default hover
.22, 1, .36, 1
out-expo
entries / overlays
.16, 1, .3, 1
in-out
cross-fades, toggles
.65, 0, .35, 1
spring
press-release, ticks
.34, 1.56, .64, 1
sharp
numbers, progress
.4, 0, .6, 1
// 03 · CANONICAL INTERACTIONS

Interactions.

PRESS · TACTILE
Primary button
Hover: --t-hover. Press: scale(.96) at --dur-instant.
HOVER · GHOST
Ghost button
Color + border + background all ease on --dur-fast via --t-hover.
TOGGLE · SPRING
Segmented control
Pill slides with --ease-spring — a whisper of overshoot.
OVERLAY · ENTER / EXIT
Modal reveal
Backdrop fades on in-out. Card rises + scales on out-expo.
NOTIFICATION · TOAST
Success toast
Rises from below, auto-dismisses after 2.4s. Uses --t-enter.
✓FILLED · 100 @ 43¢
DATA · NUMBER TICKER
Live price
$43,281
LOADING · CROSSFADE
Skeleton → content
BTC > $100K Dec 3143¢
Fed cut · June FOMC68¢
S&P > 6,500 Jun 3054¢
FORM · FOCUS → VALIDATE
Input feedback
✓ Looks good — press enter to continue
Focus ring eases in, success state crossfades to green once a valid email appears.
LIST · SEQUENCED
Staggered enter
BTC > 100K43¢
FED CUT JUN68¢
S&P > 650054¢
GPT-5 BY JUL31¢
// 04 · RULES

How we use it.

// DO
  • Use --t-hover on every interactive element. Consistency is motion.
  • Use --ease-spring sparingly — toggles, confirmation ticks.
  • Stagger list entries at 40–60ms intervals.
  • Respect prefers-reduced-motion. The system already does.
  • Tick prices with --ease-sharp at --dur-base.
// DON'T
  • Don't write transition: all 150ms ease. Use a token.
  • Don't bounce core UI. Spring is a garnish, not a seasoning.
  • Don't animate layout properties (top/left/width). Use transform.
  • Don't exceed 600ms except for sheet reveals.
  • Don't cross-fade — it's muddy. Use enter/exit separately.