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]>
1.9 KiB
Computer Panel — Window Open/Close & Navigation Animations (measured)
All keyframes pulled from document.styleSheets. Easing: cubic-bezier(0.32,0.72,0,1) (signature). Launch duration ~0.28s.
App LAUNCH (tap icon) — app-shell-zoom-in
@keyframes app-shell-zoom-in { 0% { opacity:0; transform: scale(var(--app-origin-scale,.7)); border-radius:32px; } 40% { opacity:1; } 100% { opacity:1; transform: scale(1); border-radius: var(--app-shell-rest-radius,0px); } }
- iOS-style "grow from icon": transform-origin set dynamically to the tapped icon's center (e.g. 201px 327px). --app-origin-scale (~.7) + 32px radius collapse to flat fill.
App CLOSE (X) — app-shell-zoom-out (reverse; shrinks back into icon)
@keyframes app-shell-zoom-out { 0% { transform: scale(1); border-radius: var(--app-shell-rest-radius,0px); } 100% { transform: scale(var(--app-origin-scale,.7)); border-radius:32px; } }
- app-shell-fade-out { 0%{opacity:1} 100%{opacity:0} } runs alongside.
Forward navigation (drill-in) — app-shell-slide-in-right (0.28s, signature ease, forwards)
{ 0%{opacity:.5; transform: translate(30%)} 100%{opacity:1; transform: translate(0)} } Applied via class .app-shell-anim-push-in on the scrollable content wrapper.
Back navigation (pop) — app-shell-slide-in-left
{ 0%{opacity:.5; transform: translate(-30%)} 100%{opacity:1; transform: translate(0)} }
Sibling/tab switch — app-shell-cross-fade-in (+ app-shell-fade-in)
{ 0%{opacity:0; transform: scale(.985)} 100%{opacity:1; transform: scale(1)} }
Panel itself (open/close the whole Computer)
- Animates WIDTH of the docked aside (will-change: transform,width); not a translate slide. 448px rail expand/collapse.
Reimplementation notes
- Set --app-origin-scale and transform-origin from the clicked icon's bounding rect at launch, then play zoom-in.
- Maintain a view stack; push => slide-in-right, pop => slide-in-left; tab swap => cross-fade.