# Motion > Durations, easings and the springs of the Unibox. Every demo on this page is live. 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**](/design/components/unibox-motion.md). - **Rewards are small.** Completing a task earns one bloom and two sparks (360–520ms), then stillness ([**JoyfulTaskCheckbox**](/design/components/joyful-task-checkbox.md)); finishing a focus session bursts five sparkles over 0.65s ([**ActionFocusSession**](/design/components/action-focus-session.md)). - **Ambient effects are opt-in and decorative**: the seven canvas backgrounds ([**BackgroundEffect**](/design/components/background-effect.md)), the WebGL fluid cursor ([**SplashCursor**](/design/components/splash-cursor.md), off on touch, low-end devices and reduced motion), the cobe globe ([**Globe**](/design/components/globe.md)), the neuron sphere ([**CosmicSynapseCanvas**](/design/components/cosmic-synapse-canvas.md)), flickering grids, pixel cards and the pointer-following glow ([**GlowingEffect**](/design/components/glowing-effect.md)). They sit behind content, never take clicks, and still under reduced motion. - [**Lottie**](/design/components/lottie.md): 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**](/design/components/lottie.md) (`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. ## Live demos - [ActionFocusSession](/design/components/action-focus-session.md): The focus timebox for one task in the actions cockpit: a live billable clock with approve, start, pause, run and done, and a burst of sparkles on completion. - [CardResize](/design/components/card-resize.md): A container that tweens its width and height when its content changes (`.t-resize`). - [ChapterScrubber](/design/components/chapter-scrubber.md): A rail of ticks, one per chapter, that swell like a dock under the pointer, with a card previewing the hovered chapter. - [ContainerScroll](/design/components/container-scroll.md): A hero block where a device-like frame starts tilted back in 3D and straightens as the page scrolls, with the title drifting up. - [FeatureSlideshow](/design/components/feature-slideshow.md): A step-by-step feature explainer: an accordion of steps on the left that advances on a timer, a progress line on the open step, and a large media slot on the right. - [FirstBentoAnimation](/design/components/first-bento-animation.md): A self-playing chat vignette for the bento grid: a user asks for a meeting slot, the Digital Crew avatar shows typing dots, then the reply streams in as a `Reasoning` block. - [FourthBentoAnimation](/design/components/fourth-bento-animation.md): A scheduling vignette for the bento grid: a week ruler, three task bars that spring into place, and a time cursor that follows the pointer. - [HyperText](/design/components/hyper-text.md): A monospaced, uppercase text effect: letters scramble through random characters, then lock in from left to right. - [InfiniteSlider](/design/components/infinite-slider.md): A JavaScript-driven endless strip (Framer Motion) that renders its children twice and slides them in a loop, optionally slowing on hover. - [JoyfulTaskCheckbox](/design/components/joyful-task-checkbox.md): A task checkbox with a small, restrained completion moment: one soft bloom, two sparks, then stillness. - [Lottie](/design/components/lottie.md): The lottie-react player, exported as-is, for the Lottie animations that ship with Crew OS (`animations/*.json`). - [Marquee](/design/components/marquee.md): An endless CSS scroll of repeated content, horizontal or vertical, speed set with two CSS variables. - [MotionScale](/design/components/motion-scale.md): The shared motion scale made visible: the same distance travelled on each duration token and each easing, with a Replay button. - [NumberFlowCounter](/design/components/number-flow-counter.md): A small dark pill that shows one number at a time and rolls its digits to the next value every two seconds (NumberFlow). - [OrbitingCircles](/design/components/orbiting-circles.md): Places its children on a circular orbit around the centre of the parent and spins them, with an optional faint ring for the path. - [ShimmerText](/design/components/shimmer-text.md): A status line with a light band sweeping across its glyphs — Max's "Thinking…" and live tool lines (`.t-shimmer`). - [SignatureGradient](/design/components/signature-gradient.md): The signature Digital Crew gradient — indigo → pink → amber (`dc-andre`, `dc-camille`, `dc-amber`) — in its four forms. - [SkeletonReveal](/design/components/skeleton-reveal.md): A skeleton that cross-blurs into the loaded content, so the swap reads as one motion (`.t-skel`). - [StreamingText](/design/components/streaming-text.md): Streamed words resolving through a soft cross-blur, one after another (`.t-stream-w` → `.is-in`). - [ThirdBentoAnimation](/design/components/third-bento-animation.md): An insight vignette for the bento grid: a smooth area line draws itself, a dot pulses at its midpoint and a dark pill above it ticks through values. - [UniboxMotion](/design/components/unibox-motion.md): The Unibox's shared motion vocabulary: every surface moves on the same few springs, so the whole inbox feels like one physical material.