Every change, considered.
Motion explains what changed, where it belongs, and what happens next. Try the real components below.
The workspace preview includes the new motion foundation. The published antiflex-ui@0.1.0-alpha.2 archive retains its released behavior; motion will be included in a future installer release.
A shared rhythm.
| Timing | Token | Purpose |
|---|---|---|
| 120ms | --af-duration-fast | Control feedback and visual exits |
| 200ms | --af-duration-normal | Disclosures, popups, and stack continuity |
| 240ms | --af-duration-slow | Attached panels |
:root {
--af-easing-enter: cubic-bezier(0.16, 1, 0.3, 1);
--af-easing-exit: cubic-bezier(0.4, 0, 1, 1);
--af-easing-standard: cubic-bezier(0.2, 0, 0, 1);
}Feedback, close to the action.
Hover, focus, press, and change a setting. Feedback is quick and consistent.
A little room to explain.
Content expands to its natural size. Try toggling quickly; a closing region is immediately removed from keyboard and screen-reader navigation.
Controls acknowledge input. Disclosures reveal related content. Overlays follow their anchor or edge. Notifications preserve continuity.
Browse the component libraryA clear place to arrive.
Dialogs arrive softly; panels follow their attached edge. Close them with Escape, a visible action, or their normal outside-click behavior.
Connected to its context.
A short fade and a small directional movement explain where a floating surface belongs.
Keep the context
A small task beside its trigger.
Feedback that makes room.
Add a few notifications, then dismiss one. The record closes immediately; its visual exit and stack movement preserve continuity.
Preference and performance.
System reduced motion removes movement and animated delays. Controls still change state, validation remains visible, and keyboard focus returns immediately. Changing that preference during an animation settles the component safely.
Native dialog and popover transitions use progressive browser features. Browsers without discrete display/overlay transitions keep their normal immediate native behavior. Static labels, tables, and cards do not acquire decorative entrance motion.
Use short transitions for interaction. Avoid global page reveals, looping decoration, and transition: all. Disclosure height is measured on a toggle and returns to natural layout after completion.