Motion

OPERATOR uses tactile motion at normal speed. Press feedback acknowledges contact, selection movement shows what changed, and contextual surfaces arrive and leave together. State, focus, form values, and callbacks update immediately.

Timing

Response easing is var(--oprt-easing), the existing sharp deceleration curve cubic-bezier(0.16, 1, 0.3, 1). Movement uses cubic-bezier(0.65, 0, 0.35, 1). Button compression is 0.97; contextual surfaces begin at 0.98. Checkbox marks begin at 0.8 inside a fixed decorative slot. There is no bounce, spring physics, or overshoot.

Under prefers-reduced-motion: reduce every time token above and the four original duration tokens is 0ms, and --oprt-motion-press-scale and --oprt-motion-surface-scale become 1. Components that read the tokens need no extra logic, and a test fails when a new time token has no override.

Interaction policy

Button, Toggle, Checkbox, Tabs, Collapsible, Dialog, Select, DropdownMenu, and ComboBox accept motion="auto" (default) or motion="none". Compound roots pass the policy to their children and contextual surfaces carry it into their portals. No provider is required.

<Button motion="none">Frequent command</Button>
<Dialog motion="auto" title="Inspect source" trigger={<Button>Inspect</Button>}>
  Source details
</Dialog>

System reduced motion disables all added motion, including fades and press transforms. Keyboard and assistive activation are immediate. Initial render and hydration show the supplied resting state. Later programmatic changes may animate; they never replay a press or imply a successful command.

Transitions move toward the latest state. Reversing an interaction retargets the existing visual movement. Changing to none or enabling system reduced motion settles immediately. Application logic never waits for a transition to finish.

The playground's Instant control applies motion="none" to its examples. Slow playback changes timing only for inspection. Both respect the system preference, and neither changes a browser or system setting.

Component behavior

• Button preserves its full hit surface while the visual surface compresses and returns.
• Toggle travels to its actual selection. Checkbox transitions the check or indeterminate mark inside a fixed slot.
• Tabs moves only the selection underline; panel content is immediate. Resize, font changes, both orientations, RTL, and unequal tab widths use measured geometry, with a static selected-border fallback.
• Collapsible changes panel height so surrounding content follows it. Text retains its natural scale. Closing immediately excludes descendants from focus navigation.
• Select, DropdownMenu, and ComboBox arrive from their trigger anchor, following the actual placement when a popup flips at the viewport edge. Closing immediately hides retained options from focus and assistive navigation. Menu highlights and search filtering remain immediate.
• Dialog pairs surface and backdrop timing. React Aria retains presence, focus trapping, dismissal, scroll locking, and return focus. Escape follows the immediate keyboard path.

The disclosure height transition is a bounded layout exception: the changing layout communicates the reveal. Other recipes name their animated properties explicitly and use transform, scale, opacity, or state colors.

Scope

The implementation covers these nine families, including Select, DropdownMenu, and ComboBox popovers. Tooltip, Toast, Inspector, RadioGroup, and status treatments can adopt the same language in later passes. Typing, command navigation, dragged values, live operational data, and recycled rows remain immediate.

The original --oprt-duration-instant (50ms), --oprt-duration-fast (100ms), --oprt-duration-normal (150ms), and --oprt-duration-slow (250ms) remain available for compatibility. They also become zero under system reduced motion. Focus indicators appear immediately and stay steady.

The implementation uses React Aria's transition and presence lifecycle. The internal policy hook and Tailwind recipes provide OPERATOR's interaction treatment.