// Visual Identity / Motion10 / 14
// Visual Identity · 10

Motion

Motion is decisive, never decorative. Fast to start, settling cleanly — like a car hitting the apex. No bounce, no spring, no infinite loops on content. Every transition should feel engineered and confident.

PrinciplesDoctrine
01

Decisive

Quick to start, fast-out easing. Motion communicates confidence, not playfulness.

02

Directional

Elements rise and resolve into place. Movement follows the forward tilt of the mark.

03

Restrained

Short durations. Respect reduced-motion. Content is never left hidden if motion is off.

Easing curvesLive

Decisive

cubic-bezier(.2, 0, 0, 1) — default UI

Smooth

cubic-bezier(.4, 0, .2, 1) — toggles

Apex

cubic-bezier(.16, 1, .3, 1) — reveals
Duration scaleHover to play
Fast
120ms
Base
200ms
Slow
320ms
Reveal
720ms

Use Fast/Base for interface feedback, Slow for emphasis, Reveal for scroll-in entrances.

Reveal patterns
Rise & fade
Slide in
Line draw
Clip wipe
Interaction statesTry them
// Hover & press
deepens on hover · −2px on press
// Card lift
Hover this card — hairline darkens, lifts 4px, tight shadow appears.