Foundations

Motion

Motion explains what changed. It should be quick and never get in the way, and it collapses when someone asks for reduced motion.

Durations

Press Instant feedback when pressing.

Base Hover and color changes.

Slow Panels and larger changes.

Reveal Content entering the page.

Easing

All easing demos run for the same time, so you can compare only the feel.

Standard General movement.

Ease out Things arriving: fast, then settling.

Expo Large surfaces sliding in.

Pop Menus and small overlays.

Spring, snappy Dialogs. Slight overshoot.

Spring, bouncy Playful details, such as chevrons.

Reduced motion

When someone turns on reduced motion in their system settings, Aster's durations collapse to almost nothing and lift and press movement turn off. Custom animations must respect prefers-reduced-motion too.

Motion tokens aren't in the Figma export yet, because Figma variables can't represent easing curves.