reveal the editorial page top-to-bottom: wrap every block and cascade the first screenful

src/app/components/EditorialSite.tsx

@@ -168,11 +168,13 @@ export default function EditorialSite() {
 
       {/* ----------------------------------------------------------- stats */}
       <Section className="pt-0 sm:pt-0">
+        <Reveal>
           <div className="rule-strong grid grid-cols-1 gap-x-10 gap-y-8 pt-8 sm:grid-cols-2 lg:grid-cols-4">
             {stats.map((s) => (
               <Stat key={s.label} {...s} />
             ))}
           </div>
+        </Reveal>
       </Section>
 
       {/* ----------------------------------------------------------- about */}
@@ -243,6 +245,7 @@ export default function EditorialSite() {
           />
         </Reveal>
 
+        <Reveal delay={60}>
           <div className="mt-12">
             <ul className="flex flex-col">
               {SERVICES.map((s) => (
@@ -252,6 +255,7 @@ export default function EditorialSite() {
               ))}
             </ul>
           </div>
+        </Reveal>
       </Section>
 
       {/* -------------------------------------------------------- projects */}
@@ -265,6 +269,7 @@ export default function EditorialSite() {
           />
         </Reveal>
 
+        <Reveal delay={60}>
           <ol className="mt-12 flex flex-col">
           {codingProjects.map((p, i) => {
             const { name, status } = splitStatus(p.title);
@@ -289,6 +294,7 @@ export default function EditorialSite() {
             );
           })}
           </ol>
+        </Reveal>
       </Section>
 
       {/* -------------------------------------------------------- hardware */}
@@ -302,6 +308,7 @@ export default function EditorialSite() {
           />
         </Reveal>
 
+        <Reveal delay={60}>
           <div className="mt-12 grid grid-cols-1 gap-x-16 gap-y-6 md:grid-cols-2">
           {techProjects.map((t) => (
             <div key={t.title} className="rule-soft pt-4">
@@ -310,6 +317,7 @@ export default function EditorialSite() {
             </div>
           ))}
           </div>
+        </Reveal>
       </Section>
 
       {/* ----------------------------------------------------- contributions */}
@@ -349,6 +357,7 @@ export default function EditorialSite() {
           />
         </Reveal>
 
+        <Reveal delay={60}>
           <ul className="mt-12 flex flex-col">
             {friends.map((f) => (
             <li key={f.name} className="rule">
@@ -364,6 +373,7 @@ export default function EditorialSite() {
             </li>
           ))}
           </ul>
+        </Reveal>
       </Section>
 
       {/* --------------------------------------------------------- lifting */}
@@ -405,6 +415,7 @@ export default function EditorialSite() {
           />
         </Reveal>
 
+        <Reveal delay={60}>
           <div className="rule-strong mt-12 grid grid-cols-2 gap-x-10 gap-y-3 pt-8 sm:grid-cols-3 lg:grid-cols-4">
             {socials.map((s) => (
             <a
@@ -419,12 +430,14 @@ export default function EditorialSite() {
             </a>
           ))}
           </div>
+        </Reveal>
       </Section>
 
       </main>
 
       {/* ---------------------------------------------------------- footer */}
       <footer className="shell pb-14 pt-10">
+        <Reveal>
           <div className="rule-strong pt-8">
           <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
             <div>
@@ -447,6 +460,7 @@ export default function EditorialSite() {
             <span>Follow the GPL-3.0 license (or don’t, I don’t mind).</span>
           </div>
           </div>
+        </Reveal>
       </footer>
     </>
   );

src/app/components/editorial-ui.tsx

@@ -18,19 +18,10 @@ export function Reveal({
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
-
+      el.classList.add("is-in");
-    // Only animate what starts below the fold. Anything already on screen stays
+      return;
-    // visible — otherwise the hero fades in after the section beneath it.
+    }
-    const rect = el.getBoundingClientRect();
-    const onScreen = rect.top < window.innerHeight && rect.bottom > 0;
-    if (onScreen) return;
-
-    // Hide it without a transition, then reveal when it scrolls into view.
-    el.style.transition = "none";
-    el.classList.add("reveal-armed");
-    void el.offsetHeight;
-    el.style.transition = "";
 
     const io = new IntersectionObserver(
       (entries) => {
@@ -41,11 +32,22 @@ export function Reveal({
           }
         }
       },
-      { rootMargin: "0px 0px -10% 0px", threshold: 0.05 }
+      { rootMargin: "0px 0px -12% 0px", threshold: 0.08 }
     );
+
+    const rect = el.getBoundingClientRect();
+    const onScreen = rect.top < window.innerHeight && rect.bottom > 0;
+    if (onScreen) {
+      // First screenful: stagger in document order so it fills top to bottom.
+      const all = Array.from(document.querySelectorAll<HTMLElement>(".reveal"));
+      const order = Math.min(Math.max(0, all.indexOf(el)), 8);
+      el.style.setProperty("--delay", `${delay + order * 90}ms`);
+      requestAnimationFrame(() => el.classList.add("is-in"));
+    } else {
       io.observe(el);
+    }
     return () => io.disconnect();
-  }, []);
+  }, [delay]);
 
   return (
     <div ref={ref} className={`reveal ${className}`} style={{ "--delay": `${delay}ms` } as CSSProperties}>

src/app/globals.css

@@ -33,6 +33,8 @@
 
   --fill: rgba(235, 219, 178, 0.035);
   --fill-strong: rgba(235, 219, 178, 0.07);
+
+  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 /* Beats page.css's :root when the editorial theme is active. */
@@ -230,19 +232,19 @@ html[data-device="phone"] .desktop-toggle {
    Motion — scroll reveals only
    ------------------------------------------------------------------ */
 
-/* Visible by default: Reveal only hides elements that start below the fold, so
+/* Scroll reveal. Hidden until `.is-in` lands, and every block on the editorial
-   above-the-fold content (the hero) is never hidden while waiting for JS. */
+   page is wrapped, so the page fills in from top to bottom: the first screenful
+   cascades in document order on load, everything else reveals as it scrolls in.
+   A failed JS bundle leaves the page visible via the <noscript> rule in layout. */
 .reveal {
+  opacity: 0;
+  transform: translate3d(0, 18px, 0);
   transition:
-    opacity 0.55s ease-out,
+    opacity 0.8s var(--ease-cinematic),
-    transform 0.55s ease-out;
+    transform 0.8s var(--ease-cinematic);
   transition-delay: var(--delay, 0ms);
 }
-.reveal.reveal-armed {
+.reveal.is-in {
-  opacity: 0;
-  transform: translate3d(0, 14px, 0);
-}
-.reveal.reveal-armed.is-in {
   opacity: 1;
   transform: none;
 }

src/app/layout.tsx

@@ -54,6 +54,11 @@ export default function RootLayout({
       className={`${news.variable} ${plex.variable} ${plexMono.variable}`}
     >
       <body className="antialiased">
+        <noscript>
+          {/* Scroll-reveal is progressive enhancement: without JS every block
+              must still be visible, since the base `.reveal` style is opacity 0. */}
+          <style>{`.reveal{opacity:1 !important;transform:none !important}`}</style>
+        </noscript>
         <ThemeScript />
         {children}
       </body>