Brand
Changelog v1.4
Home / Expression · Motion

Motion

We animate with purpose, not decoration. Five curves, five durations, one rule: respect prefers-reduced-motion.

STABLE
Updated Jan 26 2026
BrandOS v1.4

01 · Easing

Five curves

Each card is live — hover the stage to replay.

Snappy

--brandOS-ease-snappy
cubic-bezier(0.2, 0, 0, 1)

Default interactive feel. Use for buttons, menus, chips.

Smooth

--brandOS-ease-smooth
cubic-bezier(0.4, 0, 0.2, 1)

Default transition curve. Use for panels, sheets, modals.

Bounce

--brandOS-ease-bounce
cubic-bezier(0.34, 1.56, 0.64, 1)

Playful only. A small overshoot on arrival.

Linear

--brandOS-ease-linear
cubic-bezier(0, 0, 1, 1)

Progress bars and spinners — anything mechanical.

Stroke draw

--brandOS-ease-stroke-draw
cubic-bezier(0.25, 0.1, 0.25, 1)

SVG path reveals and decorative line art.

02 · Durations

Five stops

Pick the smallest duration that still feels deliberate. When in doubt, 150ms for feedback and 300ms for reveals.

Token Value Use
--brandOS-duration-instant 50ms Press states
--brandOS-duration-fast 150ms Hover, button feedback
--brandOS-duration-normal 300ms Panels, reveals
--brandOS-duration-page 400ms Route transitions
--brandOS-duration-slow 500ms Large-area transitions

03 · Accessibility

Respect prefers-reduced-motion

Any entrance animation must check prefers-reduced-motion and either skip or crossfade. Hover transitions stay — they're state, not motion.