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]>
36 lines
1.9 KiB
Markdown
36 lines
1.9 KiB
Markdown
# 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.
|