Foundations

Motion

Four durations, three curves, and when to use none

import { motion } from "@nyte-ai/ui/styles/vars.stylex";

Hover a row to run it.

Handle	Value	Used by
`motion.durationInstant`	`50ms`	Kbd and menu press feedback
`motion.durationFast`	`100ms`	Buttons, menus, popovers, meters
`motion.durationNormal`	`150ms`	Collapsibles, toasts, the sidebar
`motion.durationSlow`	`200ms`	Switches, the sidebar
`motion.easeOut`	`ease-out`	Buttons, menus, popovers, rows
`motion.easeOutQuint`	`cubic-bezier(0.16, 1, 0.3, 1)`	Menus, select, the command palette
`motion.easeInOutStrong`	`cubic-bezier(0.77, 0, 0.175, 1)`	The switch knob

Rules

Transitions read a duration and a curve from motion instead of writing milliseconds.
Every transition has a reduced-motion path that ends in the same state without the travel.
Hover is an enhancement: guard it with @media (hover: hover) and (pointer: fine), and keep every action reachable by keyboard and touch.
CSS owns what CSS can resolve. Entry animations use @starting-style and transitionBehavior: allow-discrete, not React state and requestAnimationFrame.