Omar SobhandClaude Opus 4.8
48730abd78
Add the WorkClaw design-reference docs (specs, manifests, tokens, motion, icon/asset references, gifs) under docs/, and move the platform spec/PRD/roadmap from the repo root into docs/. Co-Authored-By: Claude Opus 4.8 <[email protected]>
47 lines
3.3 KiB
Markdown
47 lines
3.3 KiB
Markdown
# 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. |