diff --git a/src/app/components/EditorialSite.tsx b/src/app/components/EditorialSite.tsx
index df660d7..b26ae8c 100644
--- a/src/app/components/EditorialSite.tsx
+++ b/src/app/components/EditorialSite.tsx
@@ -168,11 +168,13 @@ export default function EditorialSite() {
 
       {/* ----------------------------------------------------------- stats */}
       <Section className="pt-0 sm:pt-0">
-        <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>
+          <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,15 +245,17 @@ export default function EditorialSite() {
           />
         </Reveal>
 
-        <div className="mt-12">
-          <ul className="flex flex-col">
-            {SERVICES.map((s) => (
-              <li key={s.name}>
-                <ServiceRow {...s} />
-              </li>
-            ))}
-          </ul>
-        </div>
+        <Reveal delay={60}>
+          <div className="mt-12">
+            <ul className="flex flex-col">
+              {SERVICES.map((s) => (
+                <li key={s.name}>
+                  <ServiceRow {...s} />
+                </li>
+              ))}
+            </ul>
+          </div>
+        </Reveal>
       </Section>
 
       {/* -------------------------------------------------------- projects */}
@@ -265,7 +269,8 @@ export default function EditorialSite() {
           />
         </Reveal>
 
-        <ol className="mt-12 flex flex-col">
+        <Reveal delay={60}>
+          <ol className="mt-12 flex flex-col">
           {codingProjects.map((p, i) => {
             const { name, status } = splitStatus(p.title);
             return (
@@ -288,7 +293,8 @@ export default function EditorialSite() {
               </li>
             );
           })}
-        </ol>
+          </ol>
+        </Reveal>
       </Section>
 
       {/* -------------------------------------------------------- hardware */}
@@ -302,14 +308,16 @@ export default function EditorialSite() {
           />
         </Reveal>
 
-        <div className="mt-12 grid grid-cols-1 gap-x-16 gap-y-6 md:grid-cols-2">
+        <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">
               <h3 className="display text-lg text-ink">{t.title}</h3>
               <p className="mt-2 text-sm leading-relaxed text-body">{t.desc}</p>
             </div>
           ))}
-        </div>
+          </div>
+        </Reveal>
       </Section>
 
       {/* ----------------------------------------------------- contributions */}
@@ -349,8 +357,9 @@ export default function EditorialSite() {
           />
         </Reveal>
 
-        <ul className="mt-12 flex flex-col">
-          {friends.map((f) => (
+        <Reveal delay={60}>
+          <ul className="mt-12 flex flex-col">
+            {friends.map((f) => (
             <li key={f.name} className="rule">
               <a
                 href={f.realUrl || f.url}
@@ -363,7 +372,8 @@ export default function EditorialSite() {
               </a>
             </li>
           ))}
-        </ul>
+          </ul>
+        </Reveal>
       </Section>
 
       {/* --------------------------------------------------------- lifting */}
@@ -405,8 +415,9 @@ export default function EditorialSite() {
           />
         </Reveal>
 
-        <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) => (
+        <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
               key={s.name}
               href={s.url}
@@ -418,14 +429,16 @@ export default function EditorialSite() {
               <span>{s.name}</span>
             </a>
           ))}
-        </div>
+          </div>
+        </Reveal>
       </Section>
 
       </main>
 
       {/* ---------------------------------------------------------- footer */}
       <footer className="shell pb-14 pt-10">
-        <div className="rule-strong pt-8">
+        <Reveal>
+          <div className="rule-strong pt-8">
           <div className="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
             <div>
               <div className="display text-xl">dvorakmortonxd.dev</div>
@@ -446,7 +459,8 @@ export default function EditorialSite() {
             <span>v3.0.0 · © 2025–2026 Martin Dvořák</span>
             <span>Follow the GPL-3.0 license (or don’t, I don’t mind).</span>
           </div>
-        </div>
+          </div>
+        </Reveal>
       </footer>
     </>
   );
diff --git a/src/app/components/editorial-ui.tsx b/src/app/components/editorial-ui.tsx
index 364879a..0f4d6fc 100644
--- a/src/app/components/editorial-ui.tsx
+++ b/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;
-
-    // Only animate what starts below the fold. Anything already on screen stays
-    // 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 = "";
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      el.classList.add("is-in");
+      return;
+    }
 
     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 }
     );
-    io.observe(el);
+
+    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}>
diff --git a/src/app/globals.css b/src/app/globals.css
index c941271..f36d4a9 100644
--- a/src/app/globals.css
+++ b/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
-   above-the-fold content (the hero) is never hidden while waiting for JS. */
+/* Scroll reveal. Hidden until `.is-in` lands, and every block on the editorial
+   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,
-    transform 0.55s ease-out;
+    opacity 0.8s var(--ease-cinematic),
+    transform 0.8s var(--ease-cinematic);
   transition-delay: var(--delay, 0ms);
 }
-.reveal.reveal-armed {
-  opacity: 0;
-  transform: translate3d(0, 14px, 0);
-}
-.reveal.reveal-armed.is-in {
+.reveal.is-in {
   opacity: 1;
   transform: none;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 86e26a5..698cef9 100644
--- a/src/app/layout.tsx
+++ b/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>