From 376fef4458373ffc2148bfd11f394ac22d26783e Mon Sep 17 00:00:00 2001 From: hshum Date: Tue, 2 Jun 2026 00:32:26 -0700 Subject: [PATCH] feat(scratchnode): cohesive page-load entrance for the event room MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- public/proto/home-v5.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/public/proto/home-v5.html b/public/proto/home-v5.html index 269252df8..231671f5e 100644 --- a/public/proto/home-v5.html +++ b/public/proto/home-v5.html @@ -164,6 +164,14 @@ /* ─── Main (single column) ─── */ .m { max-width: 720px; margin: 0 auto; padding: 24px calc(20px + var(--safe-right)) calc(80px + var(--safe-bot)) calc(20px + var(--safe-left)); } @media (min-width: 900px) { .m { max-width: 760px; } } +/* Cohesive first-paint entrance — the event room "settles" up instead of popping + into final position. TRANSFORM-ONLY (no opacity) so content is NEVER hidden: + if the animation is throttled (background tab) or unsupported, the content is + fully visible, merely offset a few px. The feed's per-row feedRowIn plays on + 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; } } /* ─── Hero (small, scannable) ─── */ .hero { margin-bottom: 20px; }