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]>
3.3 KiB
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.