Motion Atoms

Gallery of CSS motion atom presets — the building blocks behind PresenceMotion.

Each atom maps to an orbital-motion-* CSS class family (fade, slide, scale, collapse, blur, rotate). Product code should start from a PresenceMotion preset rather than wiring atoms directly.

| Atom | Typical use | |------|-------------| | Fade | Overlays, tooltips, inline alerts | | Slide | Menus, popovers, anchored panels | | Scale / fade+scale | Dialogs, toasts, compact pickers | | Collapse | Expandable regions, accordion bodies | | Blur / rotate | Orbital-specific emphasis transitions |