# Motion

## Easing & duration tokens
- DOMINANT: `--ease-app: cubic-bezier(.32,.72,0,1)` (used on ~all UI transitions @ 0.25s)
- Secondary: `--ease-out / --ease-quick: cubic-bezier(.16,1,.3,1)` (used on border-color @ 0.5s, entrances)
- `--ease-in-out: cubic-bezier(.4,0,.2,1)`, `--ease-bounce: cubic-bezier(.5,1.5,.6,1)`
- Durations: fast .15s / normal .25s / slow .4s

## Canonical transition (every interactive element)
`color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-* 0.25s cubic-bezier(0.32,0.72,0,1)`

## Signature interaction recipes (timed, reproducible)

### Computer panel / sessions column open-close  ⭐ KEY
Panels animate **WIDTH (layout push), not transform/overlay**:
`transition: width .25s cubic-bezier(.32,.72,0,1), border-color .5s cubic-bezier(.16,1,.3,1)`
- closed width 0 → open (sessions 208px / device panel 448px / rail 176px). Content overflow hidden during collapse so it clips, not reflows. Border-color fades slightly slower (.5s) than width (.25s) for a soft edge.

### Bottom sheet / mobile drawer
`sheet-in`: translateY(100%) → 0. Side drawer `slide-in-right`: translateX(100%) → 0.

### Message entrance
`messageSlideIn` / `slide-up-in`: opacity 0 + translateY(10–12px) → settle. Tool trace `toolSlideIn`: opacity0 translateY(6px) scale(.98) → 1; accent ping `toolAccentPulse` opacity 1↔.4 @50%.

### Route / page transition
`route-fade-in`: opacity0 translateY(6px)→0; loader `route-loader-fade-in` opacity only.

### App-shell zoom (open an app from a tile)
`app-shell-zoom-in`: scale(var(--app-origin-scale,.7)) + border-radius 32px → scale(1) + rest radius, opacity 0→1 (40% midpoint). Reverse = `app-shell-zoom-out`. Cross-fade variant scales .985→1. Directional: app-shell-slide-in-left/right (translate ±30%, opacity .5→1).

### Computer "device" choreography
device-stagger-scale-fade (scale .55→1), device-slide-up (translateY 24→0), device-flip-in (perspective rotateY -65deg→0), device-app-enter/exit (scale .85↔1), device-icon-pulse (green ring box-shadow ping), device-system-progress (translateX -100%→300% loading bar), device-frame-glow (pink/violet inset glow pulse), device-system-overlay-enter (scale 1.04→1).

### Create-claw wizard
create-claw-step-slide-in-left/right (opacity0 translate ±48px→0), photo carousel slide ±24px, swatch enter scale .85→1 (`create-claw-swatch-enter`).

### Provisioning (agent spin-up)
provisioning-avatar-breathe (scale 1↔1.05 @50%), photo-rotate (±1.5deg), photo-bob (±Y), barbershop pan, tip-slide/tip-fade for rotating tips.

### Toasts (Sonner)
sonner-fade-in (scale .8→1), sonner-fade-out, swipe-out-left/right/up/down for dismissal, sonner-spin loader.

### Polish / micro
shimmer (bg-position -200%→200%) for skeletons; nav-avatar-shimmer & nav-name-shimmer for rail load; ripple (0→200px, opacity1→0); caret-blink (text caret); shake (±6/6/-4/4px error); gradient-shift (bg-position 0↔100% for animated gradients); scale-in (.96→1) for popovers/menus; collapsible-expand/collapse via Radix --radix-collapsible-content-height; spin/ping/pulse (standard).

## prefers-reduced-motion
Site supports `(prefers-reduced-motion: reduce)`. Provide reduced variant: durations → ~0, no translate/scale entrances, keep opacity only.