Motion
Four duration steps, one easing curve, and the reduced-motion contract.
Motion
Binary Dreams UI Kit animates with curves rather than linear timing. Transitions are fast enough to feel responsive and curved enough to feel alive.
Duration and easing
Motion is expressed as one value that carries duration and easing. Components use stable semantic steps, while each preset can tune the resulting pace.
The four steps
fast covers hover, focus, and small states. base is the common control step. slow covers large surfaces and overlays. spring is the emphasis recipe.
Graphite Light and Graphite Dark use 90, 140, 220, and 260 ms without spring overshoot. Blueprint Light and Blueprint Dark use 120, 200, 320, and 520 ms.
Choosing a step
Default to base. Use fast for small changes that repeat often. Use slow when a large surface enters or leaves. Reserve spring for emphasis.
Component motion
The kit adapts transitions-dev patterns to its existing tokens, component states, and overlay boundaries. Graphite keeps its short curves without overshoot.
| Components | State feedback |
|---|---|
| Tabs, Segmented | The active indicator slides to the selected option. Initial layout, label changes, and resize place it without movement. |
| Checkbox, Switch | Selection marks fade and scale. The switch thumb slides between its two positions. |
| CopyButton | Copy and confirmation icons crossfade. The accessible label changes immediately after a successful copy. |
| Accordion, Collapsible | Panel height changes during expansion and collapse. Content remains visible until the close animation ends. |
| CodeBlock | Code fades in after opening. Initially open code stays still. The native hidden state closes it immediately. |
| Toaster | Notifications animate on entrance, dismissal, and stack position changes. Logical dismissal remains immediate, and outgoing notifications cannot receive input. |
| ActivityStatus, SelectionActions | Status changes and new results enter without delaying labels, focus, or announcements. |
| AgentTrace, AgentTaskList, ToolCallList | Details remain visible during close and unmount after the animation. |
Modal, Sheet, menus, popovers, tooltips, and select panels retain their existing opening and closing animations. Progress, Skeleton, Spinner, and StatusDot retain their activity indicators.
Static text, cards, tables, chart data, and numeric values do not receive automatic entrance or counting effects. Rich streamed content remains stable during updates.
Reduced motion
Honor prefers-reduced-motion in product code: shorten or remove movement and keep the state change itself visible. Never make an animation the only signal that something happened.
Closing panels immediately exclude their content from keyboard navigation and accessibility APIs. Collapsible preserves hidden child state.
The component transitions described here disable movement under reduced motion. Selection, keyboard focus, copied labels, and consumer-controlled announcements still update immediately.
Tokens
--bd-motion-fast, --bd-motion-base, --bd-motion-slow, and --bd-motion-spring come from the merged motion axis through Provider. BD_TOKENS.motion supplies Graphite Light defaults, and BDThemeOverrides.motion can replace individual steps.
Related
See Modal and Sheet for overlay timing, and Accordion for a state change on the base step.