Motion · Digital Crew Design System

Max and Crew OS share one motion system, transitions.dev, in transitions.css (shipped in bundle.css). Reference its tokens instead of writing durations: transition: transform var(--duration-fast) var(--ease-smooth-out), or in Tailwind duration-(--acc-chevron) ease-(--acc-ease).

Scale. Durations --duration-stagger 40ms, -micro 80, -quick 150 (closes, tooltips, text swaps), -fast 250 (opens: dropdowns, modals, tabs), -medium 350, -slow 400 (panels), -very-slow 500 (emphasis). Easings --ease-smooth-out cubic-bezier(0.22, 1, 0.36, 1) (the default for anything entering or moving), --ease-bounce cubic-bezier(0.34, 1.36, 0.64, 1) (badges popping in), --ease-linear (shimmer, spinners). Distances 4/6/8/12/30px, scales 0.96–0.99, blurs 2/3/8px.
Per component. Dialog and AlertDialog .t-modal: in 250ms from 96%, out 150ms. Dropdown, Popover and Select .t-dropdown: in 250ms from 97%, out 150ms to 99%. Sheet: in 400ms, out 350ms. Tooltip .t-tt: in 150ms after 80ms, out 50ms. Accordion and Collapsible: 250ms. Switch .t-toggle: 350ms double-bounce thumb, 150ms track, only after the first toggle. Checkbox .t-check: box 150ms, tick draws 350ms. Skeleton: 1s pulse. Shimmer text: 2s linear.
Radix overlays animate with keyframes, not transitions, and animate the individual scale and opacity properties so positioning transforms stay intact.
Agent surfaces use their own ease, cubic-bezier(0.16, 1, 0.3, 1): messages rise 6px over 300ms, the Ask Max panel opens from 92% in 240ms, typing dots bounce on a 1.4s loop, running tools pulse purple on 1.4s. Public-site reveals rise 30–40px over 0.8s on the same curve.
Unibox springs (uniboxMotion): SPRING_GLIDE (stiffness 380, damping 34, mass 0.9) for rows moving, SPRING_ENTER (320/30/0.8) for arrivals with a blur-and-rise, SPRING_POP (520/28/0.6) for chevrons and small toggles, FADE_SWAP (0.16s ease-out) for content swaps, and staggerDelay(i) = 35ms per item, capped at 320ms. See UniboxMotion.
Rewards are small. Completing a task earns one bloom and two sparks (360–520ms), then stillness (JoyfulTaskCheckbox); finishing a focus session bursts five sparkles over 0.65s (ActionFocusSession).
Ambient effects are opt-in and decorative: the seven canvas backgrounds (BackgroundEffect), the WebGL fluid cursor (SplashCursor, off on touch, low-end devices and reduced motion), the cobe globe (Globe), the neuron sphere (CosmicSynapseCanvas), flickering grids, pixel cards and the pointer-following glow (GlowingEffect). They sit behind content, never take clicks, and still under reduced motion.
Lottie: Crew OS ships 18 Lottie animations (assets/Animations/*.json — ai-collaboration, check, cost-deduction, database, dollar, filter, flash, schedule, timer, trend-arrow, users-team-profile, avatars…); play them with Lottie (lottie-react). Nothing in the apps uses them yet.
Reduced motion. Every snippet carries its own guard, and one global guard collapses all animations and transitions to 0.01ms (not none, so animationend still fires). JavaScript motion checks useReducedMotion(). Keep information in the end state, never only in the animation.
Known gaps (Max's motion guide): no error shake — aria-invalid only recolours; Tabs have no sliding highlight; seven duplicate fade-up keyframes and three separate "thinking" treatments still exist. Don't add more; use the tokens above.