Overview

Orbital Motion is the shared animation layer for enter, exit, and reorder transitions across dialogs, drawers, toasts, menus, and other UI that mounts and unmounts in place.

Motion is organized in layers you compose bottom-up: tokens define timing, atoms map to CSS keyframe classes, presets (PresenceMotion) pair enter/exit atoms, OrbitalPresence applies them to conditional children, and OrbitalPresenceGroup staggers keyed lists. Product components (dialog, drawer, toast, and others) consume these primitives internally — you rarely wire atoms directly.

• Surfaces that open and close — dialogs, drawers, popovers, toasts, and anchored panels
• Conditional content — empty states, inline alerts, expandable regions, and step transitions
• Dynamic lists — items added, removed, or filtered where enter/exit should feel connected

Reach for motion when visibility changes should feel intentional. Skip it for static layout, always-visible chrome, or high-frequency updates where animation would distract.

• Pick a preset — start with PresenceMotion::fade or PresenceMotion::slide for most surfaces.
• Wrap conditional children in OrbitalPresence with a show signal and motion preset.
• Tune timing with PresenceMotion::with_duration, PresenceMotion::with_curve, or theme tokens from the Motion Tokens page.
• Stagger lists with OrbitalPresenceGroup and keyed OrbitalPresenceGroupItem children when several elements enter or leave together.
• Respect accessibility — keep respect_reduced_motion enabled (default) so prefers-reduced-motion users get instant transitions.

Browse the catalog sections under Motion for atoms, presence APIs, choreography, tokens, and reduced-motion behavior.