Skip to content

Motion primitives

Shared building blocks for entrances, live data and hero moments. Under reduced motion every sequence lands on its final state and ambient loops stop.

Full motionAmbient stopped

Tokens

motion-tokens.ts — the only timing values the app uses.

EASE_OUT
cubic-bezier(0.22, 1, 0.36, 1)
UI fades and rises
SPRING
stiffness 380 · damping 32
Markers, pills, sheets
SPRING_SOFT
stiffness 180 · damping 24
Bars, gauges, glides
DUR
fast 0.15s · base 0.25s · slow 0.4s
Tween durations
STAGGER
60 ms
Cascade gap

Reveal and stagger

Mount entrances. Cards rise 24px in a 60 ms cascade while their numbers roll.

Reveal

Rises 16px and fades in

Reveal as section

80 ms later, from 24px

Reveal as spanInline wrappers work too
  • Loads in transit24
  • Cases on hand18,640 cs
  • On-time delivery94.2%
  • Cost exposure$182K

Paths, dashes, particles, ripples

DrawPath draws the lane, MarchingDashes and FlowParticles loop while ambient is on, SvgRipple fires once.

Lane demo from Macon to JacksonvilleThe Macon to Jacksonville lane draws in with particles flowing along it, a dashed alternative route marches below it, Macon pulses and Jacksonville ripples once.

Pulse

Ambient halo for live states. Static dot when ambient is off.

  • AI monitoring live
  • Needs you
  • Reefer alarm · RU-114

useTicker · 2,481 loads · synced 12s ago

Count up

NumberFlow rolls from 0 after mount, then re-rolls when the value changes. Values are in display units.

int · cases on hand
18,640 cs
usd · load value
$148,000
usdCents · fees
−$562.40
usdCompact · exposure
$182K
pct0 · prevention
53%
pct1 · on-time
94.2%
tempF · reefer
31°F
decimal1 · avg dwell
3.4 h

Split-flap

Characters flip in with a 90 ms stagger and re-flip as they change.

Your receiving code4827

Tell Andre this code once the cases are in your hands.

Stamp

The delivered seal slams in with a small burst of dots.

Delivered

Signature pad

Pointer-drawn with quadratic smoothing. Touch, pen or mouse.

Receiver signature

Draw with a finger, pen or mouse inside the box.

No signature captured yet

Magnetic

Landing CTAs lean toward a fine pointer. Still on touch and reduced motion.

Track a delivery

Transition link

Adds a nav-forward or nav-back transition type. Pages wrapped in DirectionalTransition slide.

Back to style guideForward to landing

Tilt on scroll

The landing’s console panel rises in a 3D tilt that flattens as it reaches the centre.

Recommended actionSwap the reefer at Waycross yardLate risk 86 → 14 · saves $2,400

Reveal in view

Rises once when it scrolls into view.

Act 1

Packed in Macon

Act 2

Kept at 31°F

Act 3

Picked oldest-first