feat(scratchnode): cohesive page-load entrance (the one real visual-pass gap)#462
Conversation
The home-v5 motion system (--motion-fast/med/slow, --ease-out/spring, glow tokens), composer + private-mode polish (focus sheen, privateSeal, border glow, dot pulse), and Memory Wall tactile (per-note rotate, snNotePop, hover-lift, wallLaneIn) are ALREADY on main. The one structural gap a visual audit surfaced: the event room pops into final position on first paint — no orchestrated entrance. This adds a transform-only "settle" on the main content so the room assembles cohesively; the feed's per-row feedRowIn plays on top for a layered reveal. TRANSFORM-ONLY by design: no opacity in the keyframe, so if the animation is throttled (background tab) or unsupported, content stays fully visible (merely offset a few px) — never hidden. Landing mode is excluded (it has its own entrance); prefers-reduced-motion disables it. Verified live (worktree served vs prod Convex demo room): main.m opacity stays 1 at all times, content renders (height 4047, 13 feed rows), entrance applies. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🤖 Augment PR SummarySummary: Adds a transform-only first-paint entrance animation to the non-landing event-room main column so the page “settles” into place instead of popping. 🤖 Was this summary useful? React with 👍 or 👎 |
![augmentcode[bot]](https://avatars.githubusercontent.com/in/1027498?s=60&v=4){kind=small}
| top for a composed, layered reveal. Landing mode has its own entrance. */ | ||
| @keyframes pageEnter { from { transform: translateY(10px); } to { transform: none; } } | ||
| body:not([data-page-mode="landing"]) main.m { animation: pageEnter var(--motion-slow) var(--ease-out) both; } | ||
| @media (prefers-reduced-motion: reduce) { main.m { animation: none; } } |
There was a problem hiding this comment.
@media (prefers-reduced-motion: reduce) { main.m { animation: none; } } may not actually disable the entrance animation because the animated rule (body:not([data-page-mode="landing"]) main.m) has higher selector specificity, so it can win in the cascade even under reduced motion.
Severity: medium
Other Locations
public/proto/home-v5.html:173
🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.
|
Demo: walkthrough of the surfaces this PR changed is available as a workflow artifact ( |
2 participants
The visual delight pass is ~90% already on main — motion tokens, composer/private-mode polish, and Memory Wall tactile (rotate/pop-in/hover-lift) all exist (likely from the autonomous loop). The one structural gap a live audit found: the event room pops into final position with no orchestrated entrance.
This adds a transform-only settle on the main content (the feed's feedRowIn plays on top). Transform-only by design — no opacity in the keyframe — so a throttled/unsupported animation leaves content fully visible, never hidden. Landing excluded; reduced-motion disables it.
Verified live (worktree vs prod Convex): main.m opacity stays 1, content renders, entrance applies.
🤖 Generated with Claude Code