Board 06 · Motion design system

Movement is meaning.

Every interaction has purpose. Timing, easing and loop length are tokens — not opinions.

See it in the UI kit Read the language

600 Duration base ms

80 Stagger base ms

60 Glow intensity %

Section A

Motion library

Twelve canonical behaviours, each with its published timing and easing.

01Aurora background

Seamless loop

Timing12s

EasingLinear

02Gradient flow

Flow direction

Timing4s

EasingLinear

03Glass reflection

Light sweep

Timing3.2s

EasingLinear

04Magnetic button

Idle → attract → click

Timing0.9s

EasingEase default

05Cursor glow

Pointer companion

Timing0.6s

EasingEase out

06Hover lift

Elevate & focus

Timing0.22s

EasingEase default

07Card floating

Ambient buoyancy

Timing2.8s

EasingEase in out

08Text reveal

Mask + fade

Timing1.2s

EasingEase default

09Scroll reveal

Enter viewport

Timing0.6s

EasingCubic bezier

10Stagger

Sequenced groups

Timing80ms step

EasingEase default

11Parallax

Depth 0.2 – 1.0

TimingVaries

EasingEase soft

12Infinite marquee

Continuous

Timing32s

EasingLinear

Section B

Live demonstrations

Hover, scroll and point. Every effect below is the shipped implementation.

01Hover lift

Lift

Elevate, glow and focus.

Sweep

Reflection across glass.

02Magnetic & float

03Easing reference

Ease defaultcubic-bezier(.22,1,.36,1)

Ease softcubic-bezier(.25,.46,.45,.94)

Ease bouncecubic-bezier(.68,-.55,.27,1.55)

Linearambient loops only

04Duration scale

XS0.15s

S0.3s

M0.6s

L1.0s

XL1.6s+

Loop2.8 – 32s

05Reduced motion

All transforms, loops and counters stop.
All content and state stays visible and readable.
Smooth scrolling reverts to instant.
The cursor glow is removed entirely.