Hero h1 morphs into the top-left wordmark on scroll

Previously the hero just scaled-down-and-faded centered. Per the
make-interfaces-feel-better skill, the panel should hand off
visually to the sticky header's brand wordmark — a shared-element
transition that explains where the title GOES, not just that it
disappears.

Four scroll-driven animations, all opacity/transform/filter only:

  hero-fade           0-280px   .hero opacity 1→0, scale 1→0.92,
                                translateY 0→-8px (panel dissolves)
  hero-h1-morph       0-240px   h1 transform-origin top-left,
                                scale 1→0.32, translate 0→(-32%,-50%)
                                so it heads toward the top-left
                                corner where the brand wordmark sits
  hero-p-fade         0-140px   tagline fades early (the h1 carries
                                the show on its own past 140px)
  brand-reveal       80-240px   .brand opacity 0→1, scale 0.88→1,
                                filter blur(4px)→0. Coming-into-
                                focus reveal, staggered to start
                                while the h1 is still en route.
  header-solidify     0-240px   background 0.82→0.95 + shadow.
                                Gives the header weight as it takes
                                over from the hero panel.

Two safety gates from impeccable + make-interfaces:

  @supports (animation-timeline: scroll())  — older browsers see
                                              the static layout,
                                              brand stays visible
                                              by default.
  @media (prefers-reduced-motion: no-preference) — reduced-motion
                                                   users skip it.

Brand hiding is scoped with body:has(.hero) so /examples/<slug>
and /journeys/<slug> pages (no hero) keep their brand visible from
the start — the morph only applies on home.

Per the skill: animations only specify exact properties (opacity,
transform, filter), not `transition: all`. No will-change because
scroll-driven animations are already on the compositor on modern
engines.

62 tests pass; lint clean.

Author: claude

public/site.2bb247856b55.css public/site.b7913985255d.csspublic/site.2bb247856b55.css renamed to public/site.b7913985255d.css

@@ -28,17 +28,29 @@
     .brand { font-weight: 800; }
     .nav-links { display: flex; gap: .35rem; }
     .nav-links a { padding: 0 .9rem; color: var(--muted); }
-    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.25rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transform-origin: top center; }
-    .hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-3); }
+    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.25rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transform-origin: top left; }
+    .hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-3); transform-origin: top left; }
     .hero p { max-width: 60ch; color: var(--muted); font-size: 1rem; }
     @supports (animation-timeline: scroll()) {
       @media (prefers-reduced-motion: no-preference) {
-        .hero { animation: hero-collapse linear forwards; animation-timeline: scroll(root); animation-range: 0 320px; }
+        .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
+        .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
+        .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
+        body:has(.hero) header .brand { opacity: 0; filter: blur(4px); transform: scale(0.88); animation: brand-reveal linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
         header { animation: header-solidify linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
       }
     }
-    @keyframes hero-collapse {
-      to { transform: scale(0.55) translateY(-32px); opacity: 0; }
+    @keyframes hero-fade {
+      to { opacity: 0; transform: scale(0.92) translateY(-8px); }
+    }
+    @keyframes hero-h1-morph {
+      to { transform: scale(0.32) translate(-32%, -50%); opacity: 0; }
+    }
+    @keyframes hero-p-fade {
+      to { opacity: 0; transform: translateY(-4px); }
+    }
+    @keyframes brand-reveal {
+      to { opacity: 1; filter: blur(0); transform: scale(1); }
     }
     @keyframes header-solidify {
       to { background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }

public/site.css

@@ -28,17 +28,29 @@
     .brand { font-weight: 800; }
     .nav-links { display: flex; gap: .35rem; }
     .nav-links a { padding: 0 .9rem; color: var(--muted); }
-    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.25rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transform-origin: top center; }
-    .hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-3); }
+    .hero { overflow: hidden; border: 1px solid var(--hairline); border-radius: 1rem; padding: clamp(1.25rem, 3.5vw, 2.5rem); margin-bottom: 1.25rem; background: linear-gradient(135deg, var(--surface), var(--surface-3)); box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transform-origin: top left; }
+    .hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: var(--space-3); transform-origin: top left; }
     .hero p { max-width: 60ch; color: var(--muted); font-size: 1rem; }
     @supports (animation-timeline: scroll()) {
       @media (prefers-reduced-motion: no-preference) {
-        .hero { animation: hero-collapse linear forwards; animation-timeline: scroll(root); animation-range: 0 320px; }
+        .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
+        .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
+        .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
+        body:has(.hero) header .brand { opacity: 0; filter: blur(4px); transform: scale(0.88); animation: brand-reveal linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
         header { animation: header-solidify linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
       }
     }
-    @keyframes hero-collapse {
-      to { transform: scale(0.55) translateY(-32px); opacity: 0; }
+    @keyframes hero-fade {
+      to { opacity: 0; transform: scale(0.92) translateY(-8px); }
+    }
+    @keyframes hero-h1-morph {
+      to { transform: scale(0.32) translate(-32%, -50%); opacity: 0; }
+    }
+    @keyframes hero-p-fade {
+      to { opacity: 0; transform: translateY(-4px); }
+    }
+    @keyframes brand-reveal {
+      to { opacity: 1; filter: blur(0); transform: scale(1); }
     }
     @keyframes header-solidify {
       to { background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }

src/asset_manifest.py

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.2bb247856b55.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
-HTML_CACHE_VERSION = '2bb58e966c67'
+ASSET_PATHS = {'SITE_CSS': '/site.b7913985255d.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
+HTML_CACHE_VERSION = '801d4d11e527'