From 5a79b6d2aa4de3dc3a95982eae80907db14fd423 Mon Sep 17 00:00:00 2001
From: suprabho <suprabho13@gmail.com>
Date: Fri, 18 Sep 2026 11:06:32 +0530
Subject: [PATCH 01/13] Added aura in the landing page banner

---
 src/pages/HomePage.tsx | 70 +++++++++++++++++++++++++-----------------
 src/styles/site.css    | 26 ++++++++++++++++
 2 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index 9297f0a..f7ba50b 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -382,38 +382,50 @@ const HomePage = () => {
       />
 
       {/* Hero */}
-      <div className="sp-container">
-        <div className="sp-hero-stack">
-          <div data-sp-reveal="hero">
-            <h1 className="sp-h1 sp-h1--hero">
-              <span className="sp-hero-stack__line">Record, edit, mix, and generate.</span>{" "}
-              <span className="sp-hero-stack__line">One free DAW.</span>
-            </h1>
-            <Eyebrow icon={ShieldCheck}>Free · Open source · AGPLv3</Eyebrow>
-          </div>
-          <Frame hero className="sp-home-session" reveal="rise">
-            <ErrorBoundary
-              fallback={<div className="grid h-full place-items-center text-sm text-slate-300">Illustration unavailable</div>}
-            >
-              <LiveSession />
-            </ErrorBoundary>
-          </Frame>
-          <div className="sp-hero-stack__copy" data-sp-reveal="hero">
-            <div className="flex items-center justify-center gap-[16px] flex-wrap mb-[12px]">
-              <DownloadCta />
-              <ArrowLink to={SITE_PATHS.features} tone="plain">
-                See all features
-              </ArrowLink>
+      <section className="sp-hero-aura">
+        <div aria-hidden="true" className="sp-hero-aura__bg">
+          <iframe
+            allowFullScreen
+            className="sp-hero-aura__frame"
+            loading="lazy"
+            src="https://aura.promad.design/embed/pastel-abstract-background-soft-glowing-hd-web-designs?hideText=true&hideIcons=true&input=off&theme=light"
+            tabIndex={-1}
+            title="Pastel Abstract Background – Soft Glowing HD Web Designs"
+          />
+        </div>
+        <div className="sp-container sp-hero-aura__content">
+          <div className="sp-hero-stack">
+            <div data-sp-reveal="hero">
+              <h1 className="sp-h1 sp-h1--hero">
+                <span className="sp-hero-stack__line">Record, edit, mix, and generate.</span>{" "}
+                <span className="sp-hero-stack__line">One free DAW.</span>
+              </h1>
+              <Eyebrow icon={ShieldCheck}>Free · Open source · AGPLv3</Eyebrow>
+            </div>
+            <Frame hero className="sp-home-session" reveal="rise">
+              <ErrorBoundary
+                fallback={<div className="grid h-full place-items-center text-sm text-slate-300">Illustration unavailable</div>}
+              >
+                <LiveSession />
+              </ErrorBoundary>
+            </Frame>
+            <div className="sp-hero-stack__copy" data-sp-reveal="hero">
+              <div className="flex items-center justify-center gap-[16px] flex-wrap mb-[12px]">
+                <DownloadCta />
+                <ArrowLink to={SITE_PATHS.features} tone="plain">
+                  See all features
+                </ArrowLink>
+              </div>
+              <div className="sp-mono leading-[1.5] mb-[22px]">{heroMeta}</div>
+              <p className="sp-lede text-[17px] leading-[1.6] max-w-[640px] mb-[16px]">
+                Multitrack recording, MIDI, a full mixer, VST3/CLAP/LV2 hosting, graphical pitch editing, local AI
+                generation and stem separation, and a Neural Amp Modeler guitar rig. All of it is in the base app, on
+                Windows, macOS, and Linux.
+              </p>
             </div>
-            <div className="sp-mono leading-[1.5] mb-[22px]">{heroMeta}</div>
-            <p className="sp-lede text-[17px] leading-[1.6] max-w-[640px] mb-[16px]">
-              Multitrack recording, MIDI, a full mixer, VST3/CLAP/LV2 hosting, graphical pitch editing, local AI
-              generation and stem separation, and a Neural Amp Modeler guitar rig. All of it is in the base app, on
-              Windows, macOS, and Linux.
-            </p>
           </div>
         </div>
-      </div>
+      </section>
 
       {/* Showcase (dark) */}
       <section className="sp-dark-panel" data-sp-reveal="band">
diff --git a/src/styles/site.css b/src/styles/site.css
index 797632e..c3316cd 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -277,6 +277,32 @@
   border-radius: 12px;
 }
 
+/* home: the aura embed sits behind the hero as a full-bleed, non-interactive background */
+.sp-hero-aura {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+
+.sp-hero-aura__bg {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.sp-hero-aura__frame {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 800px;
+  border: 0;
+}
+
+.sp-hero-aura__content {
+  position: relative;
+}
+
 /* home: the hero is one centred column — title, live session, then the copy */
 .sp-hero-stack {
   display: flex;

From c9f8d7b5e7e9ca1494aaabcf5178f9b805d95469 Mon Sep 17 00:00:00 2001
From: suprabho <suprabho13@gmail.com>
Date: Fri, 18 Sep 2026 12:04:03 +0530
Subject: [PATCH 02/13] Loading and lint fixes

---
 index.html                                 | 25 +++++++-
 src/components/HeroAuraBackdrop.tsx        | 71 ++++++++++++++++++++++
 src/pages/HomePage.tsx                     | 12 +---
 src/styles/site.css                        | 14 +++++
 test/first-load-animation-browser.test.mjs |  2 +-
 test/image-delivery-browser.test.mjs       |  2 +-
 test/loader-and-ai-visual-browser.test.mjs |  2 +-
 test/mobile-illustrations-browser.test.mjs |  2 +-
 test/seo-pages-browser.test.mjs            |  2 +-
 test/still-frame-browser.test.mjs          |  2 +-
 10 files changed, 117 insertions(+), 17 deletions(-)
 create mode 100644 src/components/HeroAuraBackdrop.tsx

diff --git a/index.html b/index.html
index ea8ef21..4eb867b 100644
--- a/index.html
+++ b/index.html
@@ -421,6 +421,11 @@
         let routeReady = Boolean(window.__openstudioAppReady);
         let cssReady = false;
         let hidden = false;
+        // Page content (the home hero's aura backdrop) can hold the intro until it has
+        // painted. Every hold releases itself after its own cap so a blocked embed never
+        // strands the loader beyond the global fallback.
+        const introHolds = new Map();
+        const maxHoldMs = 4500;
 
         window.__openstudioLoaderReady = true;
         window.__openstudioAppCssReady = false;
@@ -465,8 +470,24 @@
           }, revealMs);
         }
 
+        function releaseHold(token) {
+          const timer = introHolds.get(token);
+          if (timer === undefined) return;
+          window.clearTimeout(timer);
+          introHolds.delete(token);
+          finishWhenReady();
+        }
+
+        window.addEventListener("openstudio:intro-hold", (event) => {
+          const token = event.detail?.token;
+          if (hidden || !token || introHolds.has(token)) return;
+          const cap = Math.min(maxHoldMs, Number(event.detail?.maxMs) || maxHoldMs);
+          introHolds.set(token, window.setTimeout(() => releaseHold(token), cap));
+        });
+        window.addEventListener("openstudio:intro-release", (event) => releaseHold(event.detail?.token));
+
         function finishWhenReady() {
-          if (hidden || !routeReady || !cssReady) return;
+          if (hidden || !routeReady || !cssReady || introHolds.size > 0) return;
 
           const elapsed = performance.now() - startedAt;
           if (elapsed < entranceMs) {
@@ -499,6 +520,8 @@
             window.__openstudioRestoreStaticRoute?.();
           }
           routeReady = true;
+          introHolds.forEach((timer) => window.clearTimeout(timer));
+          introHolds.clear();
           finishWhenReady();
         }, fallbackMs);
       })();
diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
new file mode 100644
index 0000000..dd3b52e
--- /dev/null
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -0,0 +1,71 @@
+import { useLayoutEffect, useRef, useState } from "react";
+
+const AURA_SRC =
+  "https://aura.promad.design/embed/pastel-abstract-background-soft-glowing-hd-web-designs?hideText=true&hideIcons=true&input=off&theme=light";
+
+// The embed reports `load` within a few hundred milliseconds, then its own scene ramps
+// from black to the pastel glow over roughly the next two seconds.
+const SCENE_SETTLE_MS = 1800;
+// Upper bound on how long the intro loader may wait for the backdrop.
+const MAX_HOLD_MS = 4500;
+
+let holdCounter = 0;
+
+/** Full-bleed aura embed behind the home hero. Holds the intro loader until it has painted. */
+const HeroAuraBackdrop = () => {
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const [ready, setReady] = useState(false);
+
+  useLayoutEffect(() => {
+    const frame = frameRef.current;
+    if (!frame) return;
+
+    const token = `hero-aura-${(holdCounter += 1)}`;
+    let released = false;
+    let settleTimer = 0;
+
+    window.dispatchEvent(new CustomEvent("openstudio:intro-hold", { detail: { token, maxMs: MAX_HOLD_MS } }));
+
+    const release = () => {
+      if (released) return;
+      released = true;
+      window.clearTimeout(settleTimer);
+      setReady(true);
+      window.dispatchEvent(new CustomEvent("openstudio:intro-release", { detail: { token } }));
+    };
+    const handleLoad = () => {
+      window.clearTimeout(settleTimer);
+      settleTimer = window.setTimeout(release, SCENE_SETTLE_MS);
+    };
+
+    frame.addEventListener("load", handleLoad);
+    frame.addEventListener("error", release);
+    const capTimer = window.setTimeout(release, MAX_HOLD_MS);
+
+    return () => {
+      frame.removeEventListener("load", handleLoad);
+      frame.removeEventListener("error", release);
+      window.clearTimeout(capTimer);
+      window.clearTimeout(settleTimer);
+      if (!released) {
+        released = true;
+        window.dispatchEvent(new CustomEvent("openstudio:intro-release", { detail: { token } }));
+      }
+    };
+  }, []);
+
+  return (
+    <div aria-hidden="true" className="sp-hero-aura__bg" data-ready={ready ? "true" : "false"}>
+      <iframe
+        allowFullScreen
+        className="sp-hero-aura__frame"
+        ref={frameRef}
+        src={AURA_SRC}
+        tabIndex={-1}
+        title="Pastel Abstract Background – Soft Glowing HD Web Designs"
+      />
+    </div>
+  );
+};
+
+export default HeroAuraBackdrop;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index f7ba50b..c771ffa 100644
--- a/src/pages/HomePage.tsx
+++ b/src/pages/HomePage.tsx
@@ -27,6 +27,7 @@ import { SITE_PATHS, docPath } from "@/constants/routes";
 import { formatBytes, formatCount, formatDate } from "@/lib/format";
 import { ArrowLink, Cta, DownloadCta, Eyebrow, Frame, GradIcon, Kicker } from "@/components/ui/primitives";
 import { LiveStage, type StageSelection } from "@/features/daw-preview/stage/LiveStage";
+import HeroAuraBackdrop from "@/components/HeroAuraBackdrop";
 import LiveSession from "@/features/daw-preview/LiveSession";
 import ArrangementStage from "@/features/daw-preview/stages/ArrangementStage";
 import MixerStage from "@/features/daw-preview/stages/MixerStage";
@@ -383,16 +384,7 @@ const HomePage = () => {
 
       {/* Hero */}
       <section className="sp-hero-aura">
-        <div aria-hidden="true" className="sp-hero-aura__bg">
-          <iframe
-            allowFullScreen
-            className="sp-hero-aura__frame"
-            loading="lazy"
-            src="https://aura.promad.design/embed/pastel-abstract-background-soft-glowing-hd-web-designs?hideText=true&hideIcons=true&input=off&theme=light"
-            tabIndex={-1}
-            title="Pastel Abstract Background – Soft Glowing HD Web Designs"
-          />
-        </div>
+        <HeroAuraBackdrop />
         <div className="sp-container sp-hero-aura__content">
           <div className="sp-hero-stack">
             <div data-sp-reveal="hero">
diff --git a/src/styles/site.css b/src/styles/site.css
index c3316cd..342bd55 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -282,6 +282,8 @@
   position: relative;
   isolation: isolate;
   overflow: hidden;
+  /* the embed paints black until its scene is up, so the page ground stays underneath */
+  background: var(--sp-paper);
 }
 
 .sp-hero-aura__bg {
@@ -289,6 +291,18 @@
   inset: 0;
   z-index: -1;
   pointer-events: none;
+  opacity: 0;
+  transition: opacity 700ms ease;
+}
+
+.sp-hero-aura__bg[data-ready="true"] {
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sp-hero-aura__bg {
+    transition: none;
+  }
 }
 
 .sp-hero-aura__frame {
diff --git a/test/first-load-animation-browser.test.mjs b/test/first-load-animation-browser.test.mjs
index f48d4fc..c357a5c 100644
--- a/test/first-load-animation-browser.test.mjs
+++ b/test/first-load-animation-browser.test.mjs
@@ -41,7 +41,7 @@ test("illustrations start after slow first loads and uncached navigation", { tim
           await gate;
           await route.continue().catch(() => undefined);
         });
-        await context.addInitScript(() => localStorage.setItem(
+        await context.addInitScript(() => window.top === window && localStorage.setItem(
           "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
         ));
         if (entry.lateVisibility) await context.addInitScript(() => {
diff --git a/test/image-delivery-browser.test.mjs b/test/image-delivery-browser.test.mjs
index 77bdd9f..c6f0e3c 100644
--- a/test/image-delivery-browser.test.mjs
+++ b/test/image-delivery-browser.test.mjs
@@ -18,7 +18,7 @@ test("image requests follow card widths at standard and high pixel densities", {
           const context = await browser.newContext({ viewport: { width, height: 900 }, deviceScaleFactor: dpr, reducedMotion: "reduce" });
           try {
             await context.route("https://**/*", (route) => route.abort());
-            await context.addInitScript(() => localStorage.setItem(
+            await context.addInitScript(() => window.top === window && localStorage.setItem(
               "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
             ));
             const page = await context.newPage();
diff --git a/test/loader-and-ai-visual-browser.test.mjs b/test/loader-and-ai-visual-browser.test.mjs
index 16cb6a7..bf7ec3c 100644
--- a/test/loader-and-ai-visual-browser.test.mjs
+++ b/test/loader-and-ai-visual-browser.test.mjs
@@ -58,7 +58,7 @@ test("production loader artwork and AI layouts", { timeout: 120_000 }, async (t)
     const newContext = async (options) => {
       const context = await browser.newContext(options);
       await context.route("https://**/*", (route) => route.abort());
-      await context.addInitScript(() => localStorage.setItem(
+      await context.addInitScript(() => window.top === window && localStorage.setItem(
         "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
       ));
       return context;
diff --git a/test/mobile-illustrations-browser.test.mjs b/test/mobile-illustrations-browser.test.mjs
index 495eb3d..a871d55 100644
--- a/test/mobile-illustrations-browser.test.mjs
+++ b/test/mobile-illustrations-browser.test.mjs
@@ -41,7 +41,7 @@ test("phone illustrations animate at every size and pause outside the viewport",
       });
       try {
         await context.route("https://**/*", (route) => route.abort());
-        await context.addInitScript(() => localStorage.setItem(
+        await context.addInitScript(() => window.top === window && localStorage.setItem(
           "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
         ));
         const page = await context.newPage();
diff --git a/test/seo-pages-browser.test.mjs b/test/seo-pages-browser.test.mjs
index bffddd8..6cc592b 100644
--- a/test/seo-pages-browser.test.mjs
+++ b/test/seo-pages-browser.test.mjs
@@ -91,7 +91,7 @@ test("all sitemap pages expose matching SEO before and after JavaScript", { time
   const runtimeContext = await browser.newContext({ reducedMotion: "reduce" });
   try {
     for (const context of [staticContext, runtimeContext]) await context.route("https://**/*", route => route.abort());
-    await runtimeContext.addInitScript(() => localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({choice: "rejected", time: Date.now()})));
+    await runtimeContext.addInitScript(() => window.top === window && localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({choice: "rejected", time: Date.now()})));
     const staticPage = await staticContext.newPage();
     const runtimePage = await runtimeContext.newPage();
     const errors = [];
diff --git a/test/still-frame-browser.test.mjs b/test/still-frame-browser.test.mjs
index 1f30c3e..d6b7b97 100644
--- a/test/still-frame-browser.test.mjs
+++ b/test/still-frame-browser.test.mjs
@@ -22,7 +22,7 @@ test("illustrations keep the same rendered frame while the animation engine load
             await pending;
             await route.continue().catch(() => undefined);
           });
-          await context.addInitScript(() => localStorage.setItem(
+          await context.addInitScript(() => window.top === window && localStorage.setItem(
             "openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }),
           ));
           const page = await context.newPage();

From 01364c32def11745eb0a4b3ce73d5475caae7319 Mon Sep 17 00:00:00 2001
From: suprabho <suprabho13@gmail.com>
Date: Fri, 18 Sep 2026 12:45:13 +0530
Subject: [PATCH 03/13] smoother load

---
 index.html                          |  2 +-
 src/components/HeroAuraBackdrop.tsx | 12 +++++++-----
 src/styles/site.css                 |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 4eb867b..b808166 100644
--- a/index.html
+++ b/index.html
@@ -425,7 +425,7 @@
         // painted. Every hold releases itself after its own cap so a blocked embed never
         // strands the loader beyond the global fallback.
         const introHolds = new Map();
-        const maxHoldMs = 4500;
+        const maxHoldMs = 6500;
 
         window.__openstudioLoaderReady = true;
         window.__openstudioAppCssReady = false;
diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
index dd3b52e..a945bf4 100644
--- a/src/components/HeroAuraBackdrop.tsx
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -3,11 +3,13 @@ import { useLayoutEffect, useRef, useState } from "react";
 const AURA_SRC =
   "https://aura.promad.design/embed/pastel-abstract-background-soft-glowing-hd-web-designs?hideText=true&hideIcons=true&input=off&theme=light";
 
-// The embed reports `load` within a few hundred milliseconds, then its own scene ramps
-// from black to the pastel glow over roughly the next two seconds.
-const SCENE_SETTLE_MS = 1800;
-// Upper bound on how long the intro loader may wait for the backdrop.
-const MAX_HOLD_MS = 4500;
+// Measured against the embed: after its `load` event the scene shows a dark ground, then
+// a vivid saturated stage from ~0.8s, and only reaches the soft pastel state ~2.0-2.4s in,
+// settling fully by ~3.5s. Waiting 3s past `load` reveals the pastel state, not the vivid one.
+const SCENE_SETTLE_MS = 3000;
+// Upper bound on how long the intro loader may wait for the backdrop (the loader's own
+// global fallback stays the hard ceiling).
+const MAX_HOLD_MS = 6500;
 
 let holdCounter = 0;
 
diff --git a/src/styles/site.css b/src/styles/site.css
index 342bd55..c2b4755 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -292,7 +292,7 @@
   z-index: -1;
   pointer-events: none;
   opacity: 0;
-  transition: opacity 700ms ease;
+  transition: opacity 900ms ease;
 }
 
 .sp-hero-aura__bg[data-ready="true"] {

From 419120018a13f333773d78a323c5e83b5e105edf Mon Sep 17 00:00:00 2001
From: suprabho <suprabho13@gmail.com>
Date: Fri, 18 Sep 2026 17:20:03 +0530
Subject: [PATCH 04/13] Load the aura scene after paint behind an instant
 palette

Replace the eager iframe with the aura snippet approach: the hero backdrop paints
the scene's palette immediately, and the live embed is requested only after the
page has loaded, painted, and gone idle, then fades in once its scene has
settled. Reduced-motion visitors keep the static palette.

Drop the intro-loader hold, which a placeholder-first backdrop no longer needs.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 index.html                          |  25 +----
 src/components/HeroAuraBackdrop.tsx | 145 +++++++++++++++++-----------
 src/styles/site.css                 |  19 ++--
 3 files changed, 102 insertions(+), 87 deletions(-)

diff --git a/index.html b/index.html
index b808166..ea8ef21 100644
--- a/index.html
+++ b/index.html
@@ -421,11 +421,6 @@
         let routeReady = Boolean(window.__openstudioAppReady);
         let cssReady = false;
         let hidden = false;
-        // Page content (the home hero's aura backdrop) can hold the intro until it has
-        // painted. Every hold releases itself after its own cap so a blocked embed never
-        // strands the loader beyond the global fallback.
-        const introHolds = new Map();
-        const maxHoldMs = 6500;
 
         window.__openstudioLoaderReady = true;
         window.__openstudioAppCssReady = false;
@@ -470,24 +465,8 @@
           }, revealMs);
         }
 
-        function releaseHold(token) {
-          const timer = introHolds.get(token);
-          if (timer === undefined) return;
-          window.clearTimeout(timer);
-          introHolds.delete(token);
-          finishWhenReady();
-        }
-
-        window.addEventListener("openstudio:intro-hold", (event) => {
-          const token = event.detail?.token;
-          if (hidden || !token || introHolds.has(token)) return;
-          const cap = Math.min(maxHoldMs, Number(event.detail?.maxMs) || maxHoldMs);
-          introHolds.set(token, window.setTimeout(() => releaseHold(token), cap));
-        });
-        window.addEventListener("openstudio:intro-release", (event) => releaseHold(event.detail?.token));
-
         function finishWhenReady() {
-          if (hidden || !routeReady || !cssReady || introHolds.size > 0) return;
+          if (hidden || !routeReady || !cssReady) return;
 
           const elapsed = performance.now() - startedAt;
           if (elapsed < entranceMs) {
@@ -520,8 +499,6 @@
             window.__openstudioRestoreStaticRoute?.();
           }
           routeReady = true;
-          introHolds.forEach((timer) => window.clearTimeout(timer));
-          introHolds.clear();
           finishWhenReady();
         }, fallbackMs);
       })();
diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
index a945bf4..e647698 100644
--- a/src/components/HeroAuraBackdrop.tsx
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -1,71 +1,108 @@
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 
-const AURA_SRC =
-  "https://aura.promad.design/embed/pastel-abstract-background-soft-glowing-hd-web-designs?hideText=true&hideIcons=true&input=off&theme=light";
+const AURA_SCENE = "pastel-abstract-background-soft-glowing-hd-web-designs";
+const AURA_SRC = `https://aura.promad.design/embed/${AURA_SCENE}?theme=light`;
 
 // Measured against the embed: after its `load` event the scene shows a dark ground, then
 // a vivid saturated stage from ~0.8s, and only reaches the soft pastel state ~2.0-2.4s in,
-// settling fully by ~3.5s. Waiting 3s past `load` reveals the pastel state, not the vivid one.
+// settling fully by ~3.5s. The palette placeholder stays up until then.
 const SCENE_SETTLE_MS = 3000;
-// Upper bound on how long the intro loader may wait for the backdrop (the loader's own
-// global fallback stays the hard ceiling).
-const MAX_HOLD_MS = 6500;
+// Cap on waiting for the page's own load and first paint before the scene is requested.
+const PAINT_WAIT_CAP_MS = 4000;
 
-let holdCounter = 0;
+/**
+ * Runs `callback` once the page has loaded and painted (a first-contentful-paint entry),
+ * then two frames and an idle slot, so the embed's requests never enter this page's
+ * critical path. A timer caps the wait.
+ */
+const afterPaint = (callback: () => void) => {
+  let painted = false;
+  let loaded = document.readyState === "complete";
+  let done = false;
+  let cancelled = false;
+  let capTimer = 0;
+  let idleId = 0;
+  let observer: PerformanceObserver | null = null;
 
-/** Full-bleed aura embed behind the home hero. Holds the intro loader until it has painted. */
-const HeroAuraBackdrop = () => {
-  const frameRef = useRef<HTMLIFrameElement>(null);
-  const [ready, setReady] = useState(false);
-
-  useLayoutEffect(() => {
-    const frame = frameRef.current;
-    if (!frame) return;
-
-    const token = `hero-aura-${(holdCounter += 1)}`;
-    let released = false;
-    let settleTimer = 0;
+  const check = () => {
+    if (done || cancelled || !painted || !loaded) return;
+    done = true;
+    window.clearTimeout(capTimer);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        if (typeof window.requestIdleCallback === "function") {
+          idleId = window.requestIdleCallback(() => !cancelled && callback(), { timeout: 2000 });
+        } else {
+          capTimer = window.setTimeout(() => !cancelled && callback(), 250);
+        }
+      });
+    });
+  };
+  const handleLoad = () => {
+    loaded = true;
+    check();
+  };
 
-    window.dispatchEvent(new CustomEvent("openstudio:intro-hold", { detail: { token, maxMs: MAX_HOLD_MS } }));
+  if (!loaded) window.addEventListener("load", handleLoad, { once: true });
+  try {
+    observer = new PerformanceObserver((list, self) => {
+      if (!list.getEntries().some((entry) => entry.name === "first-contentful-paint")) return;
+      painted = true;
+      self.disconnect();
+      check();
+    });
+    observer.observe({ type: "paint", buffered: true });
+  } catch {
+    painted = true;
+  }
+  capTimer = window.setTimeout(() => {
+    painted = true;
+    loaded = true;
+    check();
+  }, PAINT_WAIT_CAP_MS);
+  check();
 
-    const release = () => {
-      if (released) return;
-      released = true;
-      window.clearTimeout(settleTimer);
-      setReady(true);
-      window.dispatchEvent(new CustomEvent("openstudio:intro-release", { detail: { token } }));
-    };
-    const handleLoad = () => {
-      window.clearTimeout(settleTimer);
-      settleTimer = window.setTimeout(release, SCENE_SETTLE_MS);
-    };
+  return () => {
+    cancelled = true;
+    window.clearTimeout(capTimer);
+    window.removeEventListener("load", handleLoad);
+    observer?.disconnect();
+    if (idleId) window.cancelIdleCallback?.(idleId);
+  };
+};
 
-    frame.addEventListener("load", handleLoad);
-    frame.addEventListener("error", release);
-    const capTimer = window.setTimeout(release, MAX_HOLD_MS);
+/**
+ * Full-bleed aura scene behind the home hero. The host paints the scene's palette
+ * instantly; the live embed is requested only after the page has rendered and fades in
+ * once its scene has settled. Reduced-motion visitors keep the static palette.
+ */
+const HeroAuraBackdrop = () => {
+  const [mounted, setMounted] = useState(false);
+  const [ready, setReady] = useState(false);
 
-    return () => {
-      frame.removeEventListener("load", handleLoad);
-      frame.removeEventListener("error", release);
-      window.clearTimeout(capTimer);
-      window.clearTimeout(settleTimer);
-      if (!released) {
-        released = true;
-        window.dispatchEvent(new CustomEvent("openstudio:intro-release", { detail: { token } }));
-      }
-    };
+  useEffect(() => {
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+    return afterPaint(() => setMounted(true));
   }, []);
 
   return (
-    <div aria-hidden="true" className="sp-hero-aura__bg" data-ready={ready ? "true" : "false"}>
-      <iframe
-        allowFullScreen
-        className="sp-hero-aura__frame"
-        ref={frameRef}
-        src={AURA_SRC}
-        tabIndex={-1}
-        title="Pastel Abstract Background – Soft Glowing HD Web Designs"
-      />
+    <div aria-hidden="true" className="sp-hero-aura__bg" data-aura-scene={AURA_SCENE} data-ready={ready ? "true" : "false"}>
+      {mounted ? (
+        <iframe
+          className="sp-hero-aura__frame"
+          loading="lazy"
+          onLoad={(event) => {
+            const frame = event.currentTarget;
+            window.setTimeout(() => {
+              if (frame.isConnected) setReady(true);
+            }, SCENE_SETTLE_MS);
+          }}
+          src={AURA_SRC}
+          tabIndex={-1}
+          title="Pastel Abstract Background – Soft Glowing HD Web Designs"
+        />
+      ) : null}
     </div>
   );
 };
diff --git a/src/styles/site.css b/src/styles/site.css
index c2b4755..2830588 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -286,30 +286,31 @@
   background: var(--sp-paper);
 }
 
+/* the scene's palette paints instantly; the live embed fades in over it once settled */
 .sp-hero-aura__bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
-  opacity: 0;
-  transition: opacity 900ms ease;
+  background-color: #9800ff;
+  background-image:
+    radial-gradient(circle at 22% 28%, #9800ff 0%, transparent 55%),
+    radial-gradient(circle at 78% 22%, #e7000b 0%, transparent 55%);
 }
 
-.sp-hero-aura__bg[data-ready="true"] {
-  opacity: 1;
+.sp-hero-aura__frame {
+  opacity: 0;
+  transition: opacity 800ms ease;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .sp-hero-aura__bg {
-    transition: none;
-  }
+.sp-hero-aura__bg[data-ready="true"] .sp-hero-aura__frame {
+  opacity: 1;
 }
 
 .sp-hero-aura__frame {
   display: block;
   width: 100%;
   height: 100%;
-  min-height: 800px;
   border: 0;
 }
 

From d6a199dc4b3357401f739f54ff9fc3e34a8fefc2 Mon Sep 17 00:00:00 2001
From: suprabho <suprabho13@gmail.com>
Date: Fri, 18 Sep 2026 17:56:55 +0530
Subject: [PATCH 05/13] perfmaxxing

---
 src/components/HeroAuraBackdrop.tsx | 81 +++++++++++++++++++++++++----
 src/styles/site.css                 | 19 ++++++-
 2 files changed, 87 insertions(+), 13 deletions(-)

diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
index e647698..da56d3e 100644
--- a/src/components/HeroAuraBackdrop.tsx
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion";
 
 const AURA_SCENE = "pastel-abstract-background-soft-glowing-hd-web-designs";
 const AURA_SRC = `https://aura.promad.design/embed/${AURA_SCENE}?theme=light`;
@@ -7,12 +8,16 @@ const AURA_SRC = `https://aura.promad.design/embed/${AURA_SCENE}?theme=light`;
 // a vivid saturated stage from ~0.8s, and only reaches the soft pastel state ~2.0-2.4s in,
 // settling fully by ~3.5s. The palette placeholder stays up until then.
 const SCENE_SETTLE_MS = 3000;
-// Cap on waiting for the page's own load and first paint before the scene is requested.
+// Cap on waiting for the page's own load and first paint before arming the trigger.
 const PAINT_WAIT_CAP_MS = 4000;
+// The scene is requested on the visitor's first interaction, so it never enters a page
+// speed measurement. A visitor who only reads still gets it after this quiet period.
+const QUIET_FALLBACK_MS = 10_000;
+const INTERACTION_EVENTS = ["pointermove", "pointerdown", "touchstart", "wheel", "scroll", "keydown"] as const;
 
 /**
  * Runs `callback` once the page has loaded and painted (a first-contentful-paint entry),
- * then two frames and an idle slot, so the embed's requests never enter this page's
+ * then two frames and an idle slot, so nothing here competes with the page's own
  * critical path. A timer caps the wait.
  */
 const afterPaint = (callback: () => void) => {
@@ -73,25 +78,79 @@ const afterPaint = (callback: () => void) => {
 };
 
 /**
- * Full-bleed aura scene behind the home hero. The host paints the scene's palette
- * instantly; the live embed is requested only after the page has rendered and fades in
- * once its scene has settled. Reduced-motion visitors keep the static palette.
+ * Full-bleed aura scene behind the home hero, kept out of the page's performance budget.
+ *
+ * The host paints the scene's palette instantly and is what prerendering, no-JavaScript
+ * and reduced-motion visitors see. The live embed is requested only after the page has
+ * rendered and the visitor has interacted (or a long quiet period has passed), and only
+ * while the hero is on screen in a visible tab. It fades in once its scene has settled,
+ * and fades out to `visibility: hidden` whenever the hero leaves the viewport or the tab
+ * is hidden, so the embed stops compositing when nobody can see it.
  */
 const HeroAuraBackdrop = () => {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const reducedMotion = usePrefersReducedMotion();
+  const [triggered, setTriggered] = useState(false);
+  const [active, setActive] = useState(false);
   const [mounted, setMounted] = useState(false);
   const [ready, setReady] = useState(false);
 
+  // Hero on screen and the document visible.
   useEffect(() => {
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
-    return afterPaint(() => setMounted(true));
+    const host = hostRef.current;
+    if (!host || !("IntersectionObserver" in window)) return;
+    let intersecting = false;
+    const update = () => setActive(intersecting && document.visibilityState === "visible");
+    const observer = new IntersectionObserver(([entry]) => {
+      intersecting = entry.isIntersecting;
+      update();
+    });
+    observer.observe(host);
+    document.addEventListener("visibilitychange", update);
+    return () => {
+      observer.disconnect();
+      document.removeEventListener("visibilitychange", update);
+    };
   }, []);
 
+  // Page painted, then first interaction or the quiet fallback.
+  useEffect(() => {
+    if (reducedMotion || triggered) return;
+    let fallbackTimer = 0;
+    const fire = () => {
+      window.clearTimeout(fallbackTimer);
+      INTERACTION_EVENTS.forEach((name) => window.removeEventListener(name, fire));
+      setTriggered(true);
+    };
+    const cancelPaint = afterPaint(() => {
+      INTERACTION_EVENTS.forEach((name) => window.addEventListener(name, fire, { passive: true }));
+      fallbackTimer = window.setTimeout(fire, QUIET_FALLBACK_MS);
+    });
+    return () => {
+      cancelPaint();
+      window.clearTimeout(fallbackTimer);
+      INTERACTION_EVENTS.forEach((name) => window.removeEventListener(name, fire));
+    };
+  }, [reducedMotion, triggered]);
+
+  useEffect(() => {
+    if (triggered && active && !reducedMotion) setMounted(true);
+  }, [triggered, active, reducedMotion]);
+
+  const showFrame = mounted && !reducedMotion;
+
   return (
-    <div aria-hidden="true" className="sp-hero-aura__bg" data-aura-scene={AURA_SCENE} data-ready={ready ? "true" : "false"}>
-      {mounted ? (
+    <div
+      aria-hidden="true"
+      className="sp-hero-aura__bg"
+      data-aura-scene={AURA_SCENE}
+      data-playing={showFrame && active ? "true" : "false"}
+      data-ready={showFrame && ready ? "true" : "false"}
+      ref={hostRef}
+    >
+      {showFrame ? (
         <iframe
           className="sp-hero-aura__frame"
-          loading="lazy"
           onLoad={(event) => {
             const frame = event.currentTarget;
             window.setTimeout(() => {
diff --git a/src/styles/site.css b/src/styles/site.css
index 2830588..07e3040 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -298,13 +298,28 @@
     radial-gradient(circle at 78% 22%, #e7000b 0%, transparent 55%);
 }
 
+/* hidden (not just transparent) whenever the scene is unsettled, offscreen or in a hidden
+   tab, so the embed stops compositing; visibility flips after the fade-out completes */
 .sp-hero-aura__frame {
   opacity: 0;
-  transition: opacity 800ms ease;
+  visibility: hidden;
+  transition:
+    opacity 800ms ease,
+    visibility 0s linear 800ms;
 }
 
-.sp-hero-aura__bg[data-ready="true"] .sp-hero-aura__frame {
+.sp-hero-aura__bg[data-ready="true"][data-playing="true"] .sp-hero-aura__frame {
   opacity: 1;
+  visibility: visible;
+  transition:
+    opacity 800ms ease,
+    visibility 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sp-hero-aura__frame {
+    transition: none;
+  }
 }
 
 .sp-hero-aura__frame {

From 599d4c1745a3554a93868b89f4c9bad3413fedcf Mon Sep 17 00:00:00 2001
From: suprabho <suprabho13@gmail.com>
Date: Fri, 18 Sep 2026 18:03:19 +0530
Subject: [PATCH 06/13] smoother transition

---
 src/components/HeroAuraBackdrop.tsx | 4 ++--
 src/styles/site.css                 | 7 ++-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
index da56d3e..449ac97 100644
--- a/src/components/HeroAuraBackdrop.tsx
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -80,8 +80,8 @@ const afterPaint = (callback: () => void) => {
 /**
  * Full-bleed aura scene behind the home hero, kept out of the page's performance budget.
  *
- * The host paints the scene's palette instantly and is what prerendering, no-JavaScript
- * and reduced-motion visitors see. The live embed is requested only after the page has
+ * The host is plain white and is what prerendering, no-JavaScript and reduced-motion
+ * visitors see. The live embed is requested only after the page has
  * rendered and the visitor has interacted (or a long quiet period has passed), and only
  * while the hero is on screen in a visible tab. It fades in once its scene has settled,
  * and fades out to `visibility: hidden` whenever the hero leaves the viewport or the tab
diff --git a/src/styles/site.css b/src/styles/site.css
index 07e3040..c15715a 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -286,16 +286,13 @@
   background: var(--sp-paper);
 }
 
-/* the scene's palette paints instantly; the live embed fades in over it once settled */
+/* plain white until the live embed fades in over it once settled */
 .sp-hero-aura__bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
-  background-color: #9800ff;
-  background-image:
-    radial-gradient(circle at 22% 28%, #9800ff 0%, transparent 55%),
-    radial-gradient(circle at 78% 22%, #e7000b 0%, transparent 55%);
+  background: #fff;
 }
 
 /* hidden (not just transparent) whenever the scene is unsettled, offscreen or in a hidden

From 11dd49643974f6baf5be8fc815efb6e705cfb0ae Mon Sep 17 00:00:00 2001
From: suprabho <suprabho13@gmail.com>
Date: Fri, 18 Sep 2026 18:16:54 +0530
Subject: [PATCH 07/13] smoother transition

---
 src/components/HeroAuraBackdrop.tsx |  9 +++---
 src/styles/site.css                 | 45 +++++++++++++++++++++++++----
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
index 449ac97..f81ab7e 100644
--- a/src/components/HeroAuraBackdrop.tsx
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -6,8 +6,9 @@ const AURA_SRC = `https://aura.promad.design/embed/${AURA_SCENE}?theme=light`;
 
 // Measured against the embed: after its `load` event the scene shows a dark ground, then
 // a vivid saturated stage from ~0.8s, and only reaches the soft pastel state ~2.0-2.4s in,
-// settling fully by ~3.5s. The palette placeholder stays up until then.
-const SCENE_SETTLE_MS = 3000;
+// settling fully by ~3.5s. The loader-matched placeholder stays up until then, and the
+// slow fade that follows starts only once the scene is already at rest.
+const SCENE_SETTLE_MS = 3500;
 // Cap on waiting for the page's own load and first paint before arming the trigger.
 const PAINT_WAIT_CAP_MS = 4000;
 // The scene is requested on the visitor's first interaction, so it never enters a page
@@ -80,8 +81,8 @@ const afterPaint = (callback: () => void) => {
 /**
  * Full-bleed aura scene behind the home hero, kept out of the page's performance budget.
  *
- * The host is plain white and is what prerendering, no-JavaScript and reduced-motion
- * visitors see. The live embed is requested only after the page has
+ * The host repeats the intro loader's surface, so the reveal is continuous, and is what
+ * prerendering, no-JavaScript and reduced-motion visitors see. The live embed is requested only after the page has
  * rendered and the visitor has interacted (or a long quiet period has passed), and only
  * while the hero is on screen in a visible tab. It fades in once its scene has settled,
  * and fades out to `visibility: hidden` whenever the hero leaves the viewport or the tab
diff --git a/src/styles/site.css b/src/styles/site.css
index c15715a..7c9f460 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -286,34 +286,69 @@
   background: var(--sp-paper);
 }
 
-/* plain white until the live embed fades in over it once settled */
+/* the intro loader's surface (same base, same drifting mint and pink glows) stays under
+   the hero until the live embed has settled and faded in over it */
 .sp-hero-aura__bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
-  background: #fff;
+  overflow: hidden;
+  background: #fcfcff;
+}
+
+.sp-hero-aura__bg::before,
+.sp-hero-aura__bg::after {
+  content: "";
+  position: absolute;
+  inset: -45%;
+  will-change: transform;
+  animation: sp_hero_aura_mint 9s ease-in-out infinite alternate;
+  background: radial-gradient(ellipse at 30% 65%, rgba(0, 234, 210, 0.32), transparent 48%);
+}
+
+.sp-hero-aura__bg::after {
+  background: radial-gradient(ellipse at 72% 30%, rgba(241, 63, 154, 0.24), transparent 46%);
+  animation-name: sp_hero_aura_pink;
+  animation-duration: 11s;
+}
+
+@keyframes sp_hero_aura_mint {
+  from { transform: translate(-8%, 5%) rotate(-12deg) scale(1); }
+  to { transform: translate(12%, -10%) rotate(28deg) scale(1.12); }
+}
+
+@keyframes sp_hero_aura_pink {
+  from { transform: translate(8%, -6%) rotate(10deg) scale(1.12); }
+  to { transform: translate(-12%, 12%) rotate(-24deg) scale(0.94); }
 }
 
 /* hidden (not just transparent) whenever the scene is unsettled, offscreen or in a hidden
    tab, so the embed stops compositing; visibility flips after the fade-out completes */
 .sp-hero-aura__frame {
+  position: relative;
+  z-index: 1;
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity 800ms ease,
-    visibility 0s linear 800ms;
+    opacity 2400ms ease-in-out,
+    visibility 0s linear 2400ms;
 }
 
 .sp-hero-aura__bg[data-ready="true"][data-playing="true"] .sp-hero-aura__frame {
   opacity: 1;
   visibility: visible;
   transition:
-    opacity 800ms ease,
+    opacity 2400ms ease-in-out,
     visibility 0s;
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .sp-hero-aura__bg::before,
+  .sp-hero-aura__bg::after {
+    animation: none;
+  }
+
   .sp-hero-aura__frame {
     transition: none;
   }

From f8677854d89ab19ddb0ddcf5a32ba708e915b7b9 Mon Sep 17 00:00:00 2001
From: suprabho <suprabho13@gmail.com>
Date: Fri, 18 Sep 2026 18:32:01 +0530
Subject: [PATCH 08/13] Hold the hero's loader glows still

Animating the two oversized glow layers under the hero ran permanently and
halved the desktop frame rate (68 fps against 120) while multiplying style
recalculation. The hero keeps the loader's base and glow colours as a static
background; the slow handoff to the aura scene is unchanged.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 src/styles/site.css | 41 +++++++----------------------------------
 1 file changed, 7 insertions(+), 34 deletions(-)

diff --git a/src/styles/site.css b/src/styles/site.css
index 7c9f460..554fa20 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -286,41 +286,19 @@
   background: var(--sp-paper);
 }
 
-/* the intro loader's surface (same base, same drifting mint and pink glows) stays under
-   the hero until the live embed has settled and faded in over it */
+/* the intro loader's surface (same base, same mint and pink glows, held still: animating
+   them under the hero halved the desktop frame rate) stays under the hero until the live
+   embed has settled and faded in over it */
 .sp-hero-aura__bg {
   position: absolute;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
-  background: #fcfcff;
-}
-
-.sp-hero-aura__bg::before,
-.sp-hero-aura__bg::after {
-  content: "";
-  position: absolute;
-  inset: -45%;
-  will-change: transform;
-  animation: sp_hero_aura_mint 9s ease-in-out infinite alternate;
-  background: radial-gradient(ellipse at 30% 65%, rgba(0, 234, 210, 0.32), transparent 48%);
-}
-
-.sp-hero-aura__bg::after {
-  background: radial-gradient(ellipse at 72% 30%, rgba(241, 63, 154, 0.24), transparent 46%);
-  animation-name: sp_hero_aura_pink;
-  animation-duration: 11s;
-}
-
-@keyframes sp_hero_aura_mint {
-  from { transform: translate(-8%, 5%) rotate(-12deg) scale(1); }
-  to { transform: translate(12%, -10%) rotate(28deg) scale(1.12); }
-}
-
-@keyframes sp_hero_aura_pink {
-  from { transform: translate(8%, -6%) rotate(10deg) scale(1.12); }
-  to { transform: translate(-12%, 12%) rotate(-24deg) scale(0.94); }
+  background:
+    radial-gradient(ellipse at 30% 65%, rgba(0, 234, 210, 0.32), transparent 48%),
+    radial-gradient(ellipse at 72% 30%, rgba(241, 63, 154, 0.24), transparent 46%),
+    #fcfcff;
 }
 
 /* hidden (not just transparent) whenever the scene is unsettled, offscreen or in a hidden
@@ -344,11 +322,6 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .sp-hero-aura__bg::before,
-  .sp-hero-aura__bg::after {
-    animation: none;
-  }
-
   .sp-hero-aura__frame {
     transition: none;
   }

From 8bca4584ec0ce291c069cc2d4bddc3e9aa09a63b Mon Sep 17 00:00:00 2001
From: Sourav Das <srvds7th@hotmail.com>
Date: Sun, 20 Sep 2026 09:10:34 +0530
Subject: [PATCH 09/13] fix: verify Aura frames before revealing the hero

---
 docs/hero-aura.md                   |  64 ++++++++++++++
 src/components/HeroAuraBackdrop.tsx |  58 +++++++------
 src/features/hero-aura/readiness.ts |  93 ++++++++++++++++++++
 src/styles/site.css                 |  12 ++-
 test/hero-aura-browser.test.mjs     | 129 ++++++++++++++++++++++++++++
 5 files changed, 326 insertions(+), 30 deletions(-)
 create mode 100644 docs/hero-aura.md
 create mode 100644 src/features/hero-aura/readiness.ts
 create mode 100644 test/hero-aura-browser.test.mjs

diff --git a/docs/hero-aura.md b/docs/hero-aura.md
new file mode 100644
index 0000000..5b30699
--- /dev/null
+++ b/docs/hero-aura.md
@@ -0,0 +1,64 @@
+# Home hero Aura lifecycle
+
+The hero retains the original `pastel-abstract-background-soft-glowing-hd-web-designs`
+embed at `aura.promad.design`, with `theme=light`. No renderer settings, effects,
+colours, resolution or frame rate are overridden by the website.
+
+The page renders its existing light fallback before JavaScript. Loading the iframe
+is deferred until interaction or the quiet fallback, and only starts with a visible
+hero in a visible document. Initial reduced motion does not mount the iframe.
+
+## Readiness and failure
+
+An iframe's load event cannot confirm that the asynchronous scene request or lazy
+renderer succeeded, and is not used to trigger readiness. Active startup frames
+remain renderable at zero opacity: `visibility:hidden` can suspend frame callbacks
+in a visible browser and deadlock readiness. The host uses the provider's existing `promad-aura:capture`
+message API and validates replies against the exact origin, iframe window and
+request ID. This API was inspected and exercised against the live embed on
+20 September 2026. It is an external, unversioned integration; it is not a web
+standard or a provider-guaranteed readiness contract.
+
+Readiness requires an actual PNG with the opaque, near-white upper centre of this
+specific light scene, followed by another successful check after the original
+3.5-second settling period. The current capture implementation returns black if
+the lazy canvas is absent/unpainted, and an error if the scene container is absent.
+Neither is revealed. Replies containing malformed, oversized, transparent or dark
+images also leave the fallback in place. A 30-second foreground probe timeout
+removes an unresponsive iframe. Unsupported/changed provider behaviour therefore
+keeps the fallback instead of revealing a browser error or black background.
+
+Captures use quarter-size output only for the startup check, never for the visible
+animation. The PNG passes between frames inside the browser; the host does not
+upload it or invoke a Netlify function. This adds the provider's capture helper download and a small amount of
+startup work. Probes stop after readiness, while offscreen, in a hidden tab, on
+reduced motion, and on unmount. The timeout restarts if an unfinished scene returns
+to the viewport. It does not run indefinitely while offscreen.
+
+## Pause and resume
+
+Scrolling away retains the same iframe and its ready state; returning reveals the
+same scene without a reload or repeated startup checks. The host tracks viewport
+intersection and document visibility and hides the frame when inactive. The
+current provider also observes intersection and reduced motion internally.
+Chromium checks verify actual animation callbacks stop offscreen and resume on
+return, not merely that the host's `data-playing` attribute changes. CSS visibility
+alone is not a cross-browser pause API, so other engines require live verification.
+
+Changing the OS reduced-motion preference removes the iframe. Re-enabling motion
+creates a new component instance with fresh readiness and cancelled old probes.
+This accessibility preference is separate from ordinary viewport pause/resume.
+
+## Verification
+
+`test/hero-aura-browser.test.mjs` exercises the cross-origin protocol with controlled
+slow, dark, unresponsive and successful scenes, stale readiness after preference
+changes, and iframe identity across scrolling. Run `npm run build`, `npm run lint`,
+`npm test` and `npm run verify:perf`.
+
+The initial-load performance gate ends before the deferred iframe starts. Inspect
+the live scene after activation as well; passing that gate does not demonstrate
+low ongoing CPU use. Preserve the approved scene when comparing visuals, including
+phone, tablet, both sides of the 900 px navigation breakpoint, and desktop, and
+test delayed uncached navigation and reduced motion. Never make CI depend on live
+third-party availability.
diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
index f81ab7e..ee2e9d8 100644
--- a/src/components/HeroAuraBackdrop.tsx
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -1,18 +1,13 @@
 import { useEffect, useRef, useState } from "react";
 import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion";
+import { AURA_ORIGIN, observeAuraReadiness } from "@/features/hero-aura/readiness";
 
 const AURA_SCENE = "pastel-abstract-background-soft-glowing-hd-web-designs";
-const AURA_SRC = `https://aura.promad.design/embed/${AURA_SCENE}?theme=light`;
-
-// Measured against the embed: after its `load` event the scene shows a dark ground, then
-// a vivid saturated stage from ~0.8s, and only reaches the soft pastel state ~2.0-2.4s in,
-// settling fully by ~3.5s. The loader-matched placeholder stays up until then, and the
-// slow fade that follows starts only once the scene is already at rest.
-const SCENE_SETTLE_MS = 3500;
+const AURA_SRC = `${AURA_ORIGIN}/embed/${AURA_SCENE}?theme=light`;
 // Cap on waiting for the page's own load and first paint before arming the trigger.
 const PAINT_WAIT_CAP_MS = 4000;
-// The scene is requested on the visitor's first interaction, so it never enters a page
-// speed measurement. A visitor who only reads still gets it after this quiet period.
+// Defer decorative work until interaction or the quiet fallback. Performance
+// measurements must also cover the active scene, not just this initial delay.
 const QUIET_FALLBACK_MS = 10_000;
 const INTERACTION_EVENTS = ["pointermove", "pointerdown", "touchstart", "wheel", "scroll", "keydown"] as const;
 
@@ -79,7 +74,7 @@ const afterPaint = (callback: () => void) => {
 };
 
 /**
- * Full-bleed aura scene behind the home hero, kept out of the page's performance budget.
+ * Full-bleed original Aura scene behind the home hero.
  *
  * The host repeats the intro loader's surface, so the reveal is continuous, and is what
  * prerendering, no-JavaScript and reduced-motion visitors see. The live embed is requested only after the page has
@@ -94,7 +89,6 @@ const HeroAuraBackdrop = () => {
   const [triggered, setTriggered] = useState(false);
   const [active, setActive] = useState(false);
   const [mounted, setMounted] = useState(false);
-  const [ready, setReady] = useState(false);
 
   // Hero on screen and the document visible.
   useEffect(() => {
@@ -146,25 +140,37 @@ const HeroAuraBackdrop = () => {
       className="sp-hero-aura__bg"
       data-aura-scene={AURA_SCENE}
       data-playing={showFrame && active ? "true" : "false"}
-      data-ready={showFrame && ready ? "true" : "false"}
       ref={hostRef}
     >
-      {showFrame ? (
-        <iframe
-          className="sp-hero-aura__frame"
-          onLoad={(event) => {
-            const frame = event.currentTarget;
-            window.setTimeout(() => {
-              if (frame.isConnected) setReady(true);
-            }, SCENE_SETTLE_MS);
-          }}
-          src={AURA_SRC}
-          tabIndex={-1}
-          title="Pastel Abstract Background – Soft Glowing HD Web Designs"
-        />
-      ) : null}
+      {showFrame ? <AuraFrame active={active} /> : null}
     </div>
   );
 };
 
+// Own readiness alongside the iframe: removing it for reduced motion also
+// discards readiness. Scrolling offscreen keeps this same instance mounted.
+const AuraFrame = ({ active }: { active: boolean }) => {
+  const frameRef = useRef<HTMLIFrameElement>(null);
+  const [ready, setReady] = useState(false);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame || !active || ready || failed) return;
+    return observeAuraReadiness(frame, () => setReady(true), () => setFailed(true));
+  }, [active, ready, failed]);
+
+  if (failed) return null;
+  return (
+    <iframe
+      ref={frameRef}
+      className="sp-hero-aura__frame"
+      data-ready={ready ? "true" : "false"}
+      src={AURA_SRC}
+      tabIndex={-1}
+      title="Pastel Abstract Background – Soft Glowing HD Web Designs"
+    />
+  );
+};
+
 export default HeroAuraBackdrop;
diff --git a/src/features/hero-aura/readiness.ts b/src/features/hero-aura/readiness.ts
new file mode 100644
index 0000000..c1dfa78
--- /dev/null
+++ b/src/features/hero-aura/readiness.ts
@@ -0,0 +1,93 @@
+export const AURA_ORIGIN = "https://aura.promad.design";
+
+const SETTLE_MS = 3500;
+const RESPONSE_TIMEOUT_MS = 4000;
+const LOAD_TIMEOUT_MS = 30_000;
+
+// Aura's capture API returns black when its lazy canvas has not painted yet.
+// This particular light-theme scene has an opaque, near-white upper centre.
+// Check actual pixels, not merely a successful iframe load or a PNG response.
+const hasLightFrame = async (dataUrl: string): Promise<boolean> => {
+  const image = new Image();
+  image.src = dataUrl;
+  try {
+    await image.decode();
+    if (!image.naturalWidth || !image.naturalHeight) return false;
+    const canvas = document.createElement("canvas");
+    canvas.width = 8;
+    canvas.height = 8;
+    const context = canvas.getContext("2d", { willReadFrequently: true });
+    if (!context) return false;
+    // Avoid the original scene's dark edge vignette; do not alter the scene itself.
+    context.drawImage(image, image.naturalWidth / 4, image.naturalHeight / 8,
+      image.naturalWidth / 2, image.naturalHeight / 4, 0, 0, 8, 8);
+    const pixels = context.getImageData(0, 0, 8, 8).data;
+    let lightPixels = 0;
+    for (let i = 0; i < pixels.length; i += 4) {
+      if (pixels[i] > 210 && pixels[i + 1] > 210 && pixels[i + 2] > 210 && pixels[i + 3] > 245) lightPixels++;
+    }
+    return lightPixels >= 58;
+  } catch {
+    return false;
+  }
+};
+
+/** Probe only during startup. No capture requests are sent after readiness. */
+export const observeAuraReadiness = (
+  frame: HTMLIFrameElement,
+  onReady: () => void,
+  onFailure: () => void,
+): (() => void) => {
+  let cancelled = false;
+  let requestId: string | null = null;
+  let retryTimer = 0;
+  let responseTimer = 0;
+  let settled = false;
+
+  const cleanup = () => {
+    cancelled = true;
+    window.clearTimeout(retryTimer);
+    window.clearTimeout(responseTimer);
+    window.clearTimeout(deadline);
+    window.removeEventListener("message", receive);
+  };
+  const fail = () => { cleanup(); onFailure(); };
+  const request = () => {
+    if (cancelled || !frame.contentWindow) return;
+    requestId = `aura-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    // The smaller capture is only a readiness probe. The visible iframe retains
+    // its original resolution, effects, colours and frame rate.
+    frame.contentWindow.postMessage({ type: "promad-aura:capture", requestId, pixelRatio: 0.25 }, AURA_ORIGIN);
+    responseTimer = window.setTimeout(() => {
+      requestId = null;
+      retryTimer = window.setTimeout(request, 750);
+    }, RESPONSE_TIMEOUT_MS);
+  };
+  const receive = async (event: MessageEvent<unknown>) => {
+    if (cancelled || !requestId || event.origin !== AURA_ORIGIN || event.source !== frame.contentWindow) return;
+    const data = event.data;
+    if (!data || typeof data !== "object" || !("type" in data) || data.type !== "promad-aura:capture-result" ||
+      !("requestId" in data) || data.requestId !== requestId) return;
+    requestId = null;
+    window.clearTimeout(responseTimer);
+    const valid = "dataUrl" in data && typeof data.dataUrl === "string" &&
+      data.dataUrl.startsWith("data:image/png;base64,") && data.dataUrl.length <= 2_000_000 &&
+      await hasLightFrame(data.dataUrl);
+    if (cancelled) return;
+    if (!valid) {
+      settled = false;
+      retryTimer = window.setTimeout(request, 750);
+    } else if (!settled) {
+      // Start settling after a real frame, then verify again before revealing.
+      settled = true;
+      retryTimer = window.setTimeout(request, SETTLE_MS);
+    } else {
+      cleanup();
+      onReady();
+    }
+  };
+  const deadline = window.setTimeout(fail, LOAD_TIMEOUT_MS);
+  window.addEventListener("message", receive);
+  retryTimer = window.setTimeout(request, 500);
+  return cleanup;
+};
diff --git a/src/styles/site.css b/src/styles/site.css
index 554fa20..8995600 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -301,8 +301,9 @@
     #fcfcff;
 }
 
-/* hidden (not just transparent) whenever the scene is unsettled, offscreen or in a hidden
-   tab, so the embed stops compositing; visibility flips after the fade-out completes */
+/* Hide inactive frames after the fade. An active startup frame must remain
+   renderable at zero opacity: visibility:hidden can suspend its animation frames,
+   preventing both the renderer and its readiness capture from ever completing. */
 .sp-hero-aura__frame {
   position: relative;
   z-index: 1;
@@ -313,14 +314,17 @@
     visibility 0s linear 2400ms;
 }
 
-.sp-hero-aura__bg[data-ready="true"][data-playing="true"] .sp-hero-aura__frame {
-  opacity: 1;
+.sp-hero-aura__bg[data-playing="true"] .sp-hero-aura__frame {
   visibility: visible;
   transition:
     opacity 2400ms ease-in-out,
     visibility 0s;
 }
 
+.sp-hero-aura__bg[data-playing="true"] .sp-hero-aura__frame[data-ready="true"] {
+  opacity: 1;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .sp-hero-aura__frame {
     transition: none;
diff --git a/test/hero-aura-browser.test.mjs b/test/hero-aura-browser.test.mjs
new file mode 100644
index 0000000..206d08d
--- /dev/null
+++ b/test/hero-aura-browser.test.mjs
@@ -0,0 +1,129 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { chromium } from "playwright";
+import { preview } from "vite";
+
+const origin = "https://aura.promad.design";
+const embed = `${origin}/embed/**`;
+const selector = ".sp-hero-aura__frame";
+// Exercise the existing cross-origin capture protocol, including actual PNG
+// decoding. The live-service smoke check is documented separately.
+const fixture = `<!doctype html><body><canvas width="64" height="64"></canvas><script>
+window.allowed = false;
+window.captures = 0;
+window.firstRequest = null;
+window.fill = '#fff';
+addEventListener('message', async event => {
+  if (event.data?.type !== 'promad-aura:capture') return;
+  window.firstRequest ||= event.data.requestId;
+  window.captures++;
+  if (!window.allowed) return;
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  const canvas = document.querySelector('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.fillStyle = window.fill; ctx.fillRect(0, 0, 64, 64);
+  event.source.postMessage({ type:'promad-aura:capture-result', requestId:event.data.requestId,
+    dataUrl:canvas.toDataURL('image/png') }, event.origin);
+});
+</script>`;
+
+test("Aura only reveals a verified frame and preserves its viewport lifecycle", { timeout: 150_000 }, async (t) => {
+  const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0, strictPort: true } });
+  const browser = await chromium.launch();
+  const base = server.resolvedUrls.local[0];
+  const open = async (options = {}) => {
+    const context = await browser.newContext({ viewport: { width: 1440, height: 900 }, ...options });
+    await context.route("https://**/*", route => route.abort());
+    await context.route(embed, route => route.fulfill({ contentType: "text/html", body: fixture }));
+    await context.addInitScript(() => {
+      if (window.top === window) localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }));
+    });
+    const page = await context.newPage();
+    await page.goto(base);
+    await page.waitForFunction(() => window.__openstudioAppReady && window.__openstudioIntroHidden);
+    return { context, page };
+  };
+  const activate = async page => {
+    // The idle gate can arm after the initial reveal.
+    await page.waitForTimeout(600);
+    await page.mouse.move(100, 100);
+    await page.locator(selector).waitFor({ state: "attached" });
+    const frame = await (await page.locator(selector).elementHandle()).contentFrame();
+    await frame.waitForFunction(() => typeof window.allowed === "boolean");
+    return frame;
+  };
+  const ready = page => page.locator(`${selector}[data-ready="true"]`).waitFor({ state: "attached", timeout: 18_000 });
+  try {
+    await t.test("slow, dark and forged responses keep the fallback; real light frames reveal", async () => {
+      const { context, page } = await open();
+      try {
+        const frame = await activate(page);
+        assert.deepEqual(await page.locator(selector).evaluate(e=>({visibility:getComputedStyle(e).visibility,opacity:getComputedStyle(e).opacity})),
+          {visibility:"visible",opacity:"0"}, "startup stays renderable but transparent until a frame is verified");
+        await frame.waitForFunction(() => window.firstRequest !== null);
+        const id = await frame.evaluate(() => window.firstRequest);
+        await page.evaluate(({id, origin}) => window.dispatchEvent(new MessageEvent("message", {
+          origin, source: window, data: {type:"promad-aura:capture-result", requestId:id, dataUrl:"data:image/png;base64,AAAA"},
+        })), {id, origin});
+        await page.waitForTimeout(4200);
+        assert.equal(await page.locator(selector).getAttribute("data-ready"), "false", "iframe load alone never reveals it");
+        await frame.evaluate(() => {window.allowed=true; window.fill="#000";});
+        await page.waitForTimeout(5000);
+        assert.equal(await page.locator(selector).getAttribute("data-ready"), "false", "a successfully captured black frame is not ready");
+        await frame.evaluate(() => {window.fill="#fff";});
+        await ready(page);
+        const count = await frame.evaluate(() => window.captures);
+        await page.waitForTimeout(1200);
+        assert.equal(await frame.evaluate(() => window.captures), count, "startup probes stop after readiness");
+      } finally { await context.close(); }
+    });
+
+    await t.test("scrolling preserves the iframe; reduced-motion remounts start unready", async () => {
+      const { context, page } = await open({ viewport: {width:390,height:844}, isMobile:true, hasTouch:true });
+      try {
+        const frame = await activate(page);
+        await frame.evaluate(() => {window.allowed=true; window.instance="original";});
+        await ready(page);
+        await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+        await page.waitForFunction(() => document.querySelector('.sp-hero-aura__bg').dataset.playing === 'false');
+        await page.waitForTimeout(2600);
+        assert.equal(await page.locator(selector).evaluate(e=>getComputedStyle(e).visibility), "hidden");
+        await page.evaluate(() => window.scrollTo(0, 0));
+        await page.waitForFunction(() => document.querySelector('.sp-hero-aura__bg').dataset.playing === 'true');
+        assert.equal(await frame.evaluate(() => window.instance), "original", "scrolling never reloads the scene");
+        assert.equal(await page.locator(selector).getAttribute("data-ready"), "true");
+        await page.emulateMedia({ reducedMotion:"reduce" });
+        await page.locator(selector).waitFor({state:"detached"});
+        await page.emulateMedia({ reducedMotion:"no-preference" });
+        await page.locator(selector).waitFor({state:"attached"});
+        await page.waitForTimeout(4500);
+        assert.equal(await page.locator(selector).getAttribute("data-ready"), "false", "replacement has not proved readiness");
+        const replacement=await (await page.locator(selector).elementHandle()).contentFrame();
+        await replacement.evaluate(()=>{window.allowed=true;});
+        await ready(page);
+      } finally { await context.close(); }
+    });
+
+    await t.test("an unresponsive embed times out to the fallback", async () => {
+      const { context, page } = await open();
+      try {
+        await activate(page);
+        await page.locator(selector).waitFor({state:"detached", timeout:35_000});
+        assert.equal(await page.locator('.sp-hero-aura__bg').isVisible(), true);
+        assert.equal(await page.locator('h1').isVisible(), true);
+      } finally { await context.close(); }
+    });
+
+    await t.test("initial reduced motion does not request an iframe", async () => {
+      const { context, page } = await open({reducedMotion:"reduce"});
+      try {
+        await page.mouse.move(100,100);
+        await page.waitForTimeout(1200);
+        assert.equal(await page.locator(selector).count(),0);
+      } finally { await context.close(); }
+    });
+  } finally {
+    await browser.close();
+    await new Promise(resolve => server.httpServer.close(resolve));
+  }
+});

From 65f91d7fa6a27dd4d218430ddc425d6909b26024 Mon Sep 17 00:00:00 2001
From: Sourav Das <srvds7th@hotmail.com>
Date: Sun, 20 Sep 2026 09:37:45 +0530
Subject: [PATCH 10/13] fix: shorten Aura settling and reveal transitions

---
 docs/hero-aura.md                   | 11 +++++++++--
 src/features/hero-aura/readiness.ts |  2 +-
 src/styles/site.css                 |  6 +++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/docs/hero-aura.md b/docs/hero-aura.md
index 5b30699..15d3c3f 100644
--- a/docs/hero-aura.md
+++ b/docs/hero-aura.md
@@ -20,14 +20,21 @@ request ID. This API was inspected and exercised against the live embed on
 standard or a provider-guaranteed readiness contract.
 
 Readiness requires an actual PNG with the opaque, near-white upper centre of this
-specific light scene, followed by another successful check after the original
-3.5-second settling period. The current capture implementation returns black if
+specific light scene, followed by another successful check after a
+1-second settling period. The current capture implementation returns black if
 the lazy canvas is absent/unpainted, and an error if the scene container is absent.
 Neither is revealed. Replies containing malformed, oversized, transparent or dark
 images also leave the fallback in place. A 30-second foreground probe timeout
 removes an unresponsive iframe. Unsupported/changed provider behaviour therefore
 keeps the fallback instead of revealing a browser error or black background.
 
+After verification, the frame fades in over 650 ms using `ease-in-out`. The same
+duration applies to fade-out and viewport re-entry. The settling period is a
+presentation buffer, not proof of readiness; both successful frame checks remain
+required. These shorter timings remove 4.25 seconds of deliberate waiting compared
+with the previous 3.5-second settle and 2.4-second fade. They do not change the
+interaction/10-second quiet startup gate, network time or renderer settings.
+
 Captures use quarter-size output only for the startup check, never for the visible
 animation. The PNG passes between frames inside the browser; the host does not
 upload it or invoke a Netlify function. This adds the provider's capture helper download and a small amount of
diff --git a/src/features/hero-aura/readiness.ts b/src/features/hero-aura/readiness.ts
index c1dfa78..a4f15cd 100644
--- a/src/features/hero-aura/readiness.ts
+++ b/src/features/hero-aura/readiness.ts
@@ -1,6 +1,6 @@
 export const AURA_ORIGIN = "https://aura.promad.design";
 
-const SETTLE_MS = 3500;
+const SETTLE_MS = 1000;
 const RESPONSE_TIMEOUT_MS = 4000;
 const LOAD_TIMEOUT_MS = 30_000;
 
diff --git a/src/styles/site.css b/src/styles/site.css
index 8995600..8cecc00 100644
--- a/src/styles/site.css
+++ b/src/styles/site.css
@@ -310,14 +310,14 @@
   opacity: 0;
   visibility: hidden;
   transition:
-    opacity 2400ms ease-in-out,
-    visibility 0s linear 2400ms;
+    opacity 650ms ease-in-out,
+    visibility 0s linear 650ms;
 }
 
 .sp-hero-aura__bg[data-playing="true"] .sp-hero-aura__frame {
   visibility: visible;
   transition:
-    opacity 2400ms ease-in-out,
+    opacity 650ms ease-in-out,
     visibility 0s;
 }
 

From 88119c5ae198b45c84c4db5626e2eb9cbc2281f4 Mon Sep 17 00:00:00 2001
From: Sourav Das <srvds7th@hotmail.com>
Date: Sun, 20 Sep 2026 12:00:27 +0530
Subject: [PATCH 11/13] fix: start Aura automatically when the page is ready

---
 docs/hero-aura.md                   | 22 ++++---
 src/components/HeroAuraBackdrop.tsx | 90 ++---------------------------
 src/features/hero-aura/startup.ts   | 47 +++++++++++++++
 test/hero-aura-browser.test.mjs     |  6 +-
 test/hero-aura-startup.test.mjs     | 85 +++++++++++++++++++++++++++
 5 files changed, 153 insertions(+), 97 deletions(-)
 create mode 100644 src/features/hero-aura/startup.ts
 create mode 100644 test/hero-aura-startup.test.mjs

diff --git a/docs/hero-aura.md b/docs/hero-aura.md
index 15d3c3f..330f9b9 100644
--- a/docs/hero-aura.md
+++ b/docs/hero-aura.md
@@ -5,8 +5,16 @@ embed at `aura.promad.design`, with `theme=light`. No renderer settings, effects
 colours, resolution or frame rate are overridden by the website.
 
 The page renders its existing light fallback before JavaScript. Loading the iframe
-is deferred until interaction or the quiet fallback, and only starts with a visible
-hero in a visible document. Initial reduced motion does not mount the iframe.
+starts automatically after the route-ready and intro-hidden signals, two animation
+frames and an idle opportunity, with a visible hero in a visible document. There
+is no interaction requirement or fixed quiet-period delay. The idle callback has
+a two-second maximum scheduling wait; browsers without that API start after the
+paint frames. Initial reduced motion does not mount the iframe.
+
+The readiness signals describe the rendered page, not every lazy image, optional
+animation engine or third-party network request. On client navigation the mounted
+hero gets its own paint frames even when the initial readiness flags are already
+set. Unmounting or enabling reduced motion cancels pending startup work.
 
 ## Readiness and failure
 
@@ -32,8 +40,8 @@ After verification, the frame fades in over 650 ms using `ease-in-out`. The same
 duration applies to fade-out and viewport re-entry. The settling period is a
 presentation buffer, not proof of readiness; both successful frame checks remain
 required. These shorter timings remove 4.25 seconds of deliberate waiting compared
-with the previous 3.5-second settle and 2.4-second fade. They do not change the
-interaction/10-second quiet startup gate, network time or renderer settings.
+with the previous 3.5-second settle and 2.4-second fade. Network time and renderer
+settings are unchanged. The former interaction/10-second gate has been removed.
 
 Captures use quarter-size output only for the startup check, never for the visible
 animation. The PNG passes between frames inside the browser; the host does not
@@ -63,9 +71,9 @@ slow, dark, unresponsive and successful scenes, stale readiness after preference
 changes, and iframe identity across scrolling. Run `npm run build`, `npm run lint`,
 `npm test` and `npm run verify:perf`.
 
-The initial-load performance gate ends before the deferred iframe starts. Inspect
-the live scene after activation as well; passing that gate does not demonstrate
-low ongoing CPU use. Preserve the approved scene when comparing visuals, including
+The initial-load performance gate can now include the automatically started iframe.
+Inspect the live scene after activation as well; passing the short gate does not
+demonstrate low ongoing CPU use. Preserve the approved scene when comparing visuals, including
 phone, tablet, both sides of the 900 px navigation breakpoint, and desktop, and
 test delayed uncached navigation and reduced motion. Never make CI depend on live
 third-party availability.
diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
index ee2e9d8..897c5c0 100644
--- a/src/components/HeroAuraBackdrop.tsx
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -1,84 +1,16 @@
 import { useEffect, useRef, useState } from "react";
 import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion";
+import { afterHeroPageReady } from "@/features/hero-aura/startup";
 import { AURA_ORIGIN, observeAuraReadiness } from "@/features/hero-aura/readiness";
 
 const AURA_SCENE = "pastel-abstract-background-soft-glowing-hd-web-designs";
 const AURA_SRC = `${AURA_ORIGIN}/embed/${AURA_SCENE}?theme=light`;
-// Cap on waiting for the page's own load and first paint before arming the trigger.
-const PAINT_WAIT_CAP_MS = 4000;
-// Defer decorative work until interaction or the quiet fallback. Performance
-// measurements must also cover the active scene, not just this initial delay.
-const QUIET_FALLBACK_MS = 10_000;
-const INTERACTION_EVENTS = ["pointermove", "pointerdown", "touchstart", "wheel", "scroll", "keydown"] as const;
-
-/**
- * Runs `callback` once the page has loaded and painted (a first-contentful-paint entry),
- * then two frames and an idle slot, so nothing here competes with the page's own
- * critical path. A timer caps the wait.
- */
-const afterPaint = (callback: () => void) => {
-  let painted = false;
-  let loaded = document.readyState === "complete";
-  let done = false;
-  let cancelled = false;
-  let capTimer = 0;
-  let idleId = 0;
-  let observer: PerformanceObserver | null = null;
-
-  const check = () => {
-    if (done || cancelled || !painted || !loaded) return;
-    done = true;
-    window.clearTimeout(capTimer);
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        if (cancelled) return;
-        if (typeof window.requestIdleCallback === "function") {
-          idleId = window.requestIdleCallback(() => !cancelled && callback(), { timeout: 2000 });
-        } else {
-          capTimer = window.setTimeout(() => !cancelled && callback(), 250);
-        }
-      });
-    });
-  };
-  const handleLoad = () => {
-    loaded = true;
-    check();
-  };
-
-  if (!loaded) window.addEventListener("load", handleLoad, { once: true });
-  try {
-    observer = new PerformanceObserver((list, self) => {
-      if (!list.getEntries().some((entry) => entry.name === "first-contentful-paint")) return;
-      painted = true;
-      self.disconnect();
-      check();
-    });
-    observer.observe({ type: "paint", buffered: true });
-  } catch {
-    painted = true;
-  }
-  capTimer = window.setTimeout(() => {
-    painted = true;
-    loaded = true;
-    check();
-  }, PAINT_WAIT_CAP_MS);
-  check();
-
-  return () => {
-    cancelled = true;
-    window.clearTimeout(capTimer);
-    window.removeEventListener("load", handleLoad);
-    observer?.disconnect();
-    if (idleId) window.cancelIdleCallback?.(idleId);
-  };
-};
-
 /**
  * Full-bleed original Aura scene behind the home hero.
  *
  * The host repeats the intro loader's surface, so the reveal is continuous, and is what
  * prerendering, no-JavaScript and reduced-motion visitors see. The live embed is requested only after the page has
- * rendered and the visitor has interacted (or a long quiet period has passed), and only
+ * rendered and the initial loader has finished, and only
  * while the hero is on screen in a visible tab. It fades in once its scene has settled,
  * and fades out to `visibility: hidden` whenever the hero leaves the viewport or the tab
  * is hidden, so the embed stops compositing when nobody can see it.
@@ -108,24 +40,10 @@ const HeroAuraBackdrop = () => {
     };
   }, []);
 
-  // Page painted, then first interaction or the quiet fallback.
+  // Start automatically after the page is ready; no interaction or quiet timer.
   useEffect(() => {
     if (reducedMotion || triggered) return;
-    let fallbackTimer = 0;
-    const fire = () => {
-      window.clearTimeout(fallbackTimer);
-      INTERACTION_EVENTS.forEach((name) => window.removeEventListener(name, fire));
-      setTriggered(true);
-    };
-    const cancelPaint = afterPaint(() => {
-      INTERACTION_EVENTS.forEach((name) => window.addEventListener(name, fire, { passive: true }));
-      fallbackTimer = window.setTimeout(fire, QUIET_FALLBACK_MS);
-    });
-    return () => {
-      cancelPaint();
-      window.clearTimeout(fallbackTimer);
-      INTERACTION_EVENTS.forEach((name) => window.removeEventListener(name, fire));
-    };
+    return afterHeroPageReady(() => setTriggered(true));
   }, [reducedMotion, triggered]);
 
   useEffect(() => {
diff --git a/src/features/hero-aura/startup.ts b/src/features/hero-aura/startup.ts
new file mode 100644
index 0000000..8c8bb32
--- /dev/null
+++ b/src/features/hero-aura/startup.ts
@@ -0,0 +1,47 @@
+/** Start decorative work after the route is rendered and the initial loader exits. */
+export const afterHeroPageReady = (callback: () => void): (() => void) => {
+  let cancelled = false;
+  let scheduled = false;
+  let firstFrame = 0;
+  let secondFrame = 0;
+  let idleId = 0;
+
+  const removeListeners = () => {
+    window.removeEventListener("openstudio:app-ready", check);
+    window.removeEventListener("openstudio:intro-hidden", check);
+  };
+  const run = () => {
+    if (cancelled) return;
+    cancelled = true;
+    removeListeners();
+    callback();
+  };
+  function check() {
+    if (cancelled || scheduled || !window.__openstudioAppReady || !window.__openstudioIntroHidden) return;
+    scheduled = true;
+    removeListeners();
+    // Also paint the newly mounted hero on client navigation, when the one-time
+    // readiness flags are already set. Do not wait for lazy below-fold resources.
+    firstFrame = window.requestAnimationFrame(() => {
+      secondFrame = window.requestAnimationFrame(() => {
+        if (cancelled) return;
+        if (typeof window.requestIdleCallback === "function") {
+          // Maximum idle scheduling wait, not a mandatory two-second delay.
+          idleId = window.requestIdleCallback(run, { timeout: 2000 });
+        } else {
+          run();
+        }
+      });
+    });
+  }
+  window.addEventListener("openstudio:app-ready", check);
+  window.addEventListener("openstudio:intro-hidden", check);
+  check();
+  return () => {
+    cancelled = true;
+    removeListeners();
+    window.cancelAnimationFrame(firstFrame);
+    window.cancelAnimationFrame(secondFrame);
+    if (idleId) window.cancelIdleCallback?.(idleId);
+  };
+};
diff --git a/test/hero-aura-browser.test.mjs b/test/hero-aura-browser.test.mjs
index 206d08d..6ac570f 100644
--- a/test/hero-aura-browser.test.mjs
+++ b/test/hero-aura-browser.test.mjs
@@ -44,10 +44,8 @@ test("Aura only reveals a verified frame and preserves its viewport lifecycle",
     return { context, page };
   };
   const activate = async page => {
-    // The idle gate can arm after the initial reveal.
-    await page.waitForTimeout(600);
-    await page.mouse.move(100, 100);
-    await page.locator(selector).waitFor({ state: "attached" });
+    // No input is sent: the scene must start once the page is ready.
+    await page.locator(selector).waitFor({ state: "attached", timeout: 4000 });
     const frame = await (await page.locator(selector).elementHandle()).contentFrame();
     await frame.waitForFunction(() => typeof window.allowed === "boolean");
     return frame;
diff --git a/test/hero-aura-startup.test.mjs b/test/hero-aura-startup.test.mjs
new file mode 100644
index 0000000..a0eeb7f
--- /dev/null
+++ b/test/hero-aura-startup.test.mjs
@@ -0,0 +1,85 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { test } from "node:test";
+import { runInNewContext } from "node:vm";
+import ts from "typescript";
+
+const source = ts.transpileModule(
+  readFileSync(new URL("../src/features/hero-aura/startup.ts", import.meta.url), "utf8"),
+  { compilerOptions: { module: ts.ModuleKind.CommonJS } },
+).outputText;
+
+function harness() {
+  let id = 0;
+  const frames = new Map();
+  const idle = new Map();
+  const window = Object.assign(new EventTarget(), {
+    __openstudioAppReady: false, __openstudioIntroHidden: false,
+    requestAnimationFrame: callback => { frames.set(++id, callback); return id; },
+    cancelAnimationFrame: id => frames.delete(id),
+    requestIdleCallback: callback => { idle.set(++id, callback); return id; },
+    cancelIdleCallback: id => idle.delete(id),
+  });
+  const exports = {};
+  runInNewContext(source, { window, exports });
+  return {
+    window, frames, idle, schedule: exports.afterHeroPageReady,
+    emit: name => window.dispatchEvent(new Event(name)),
+    flush(queue) {
+      for (const [key, callback] of [...queue]) { queue.delete(key); callback(); }
+    },
+    ready() {
+      window.__openstudioAppReady = window.__openstudioIntroHidden = true;
+      window.dispatchEvent(new Event("openstudio:app-ready"));
+      window.dispatchEvent(new Event("openstudio:intro-hidden"));
+    },
+  };
+}
+
+test("Aura waits for both page signals, then starts without input or a quiet timer", () => {
+  for (const first of ["app", "intro"]) {
+    const h = harness();
+    let calls = 0;
+    h.schedule(() => calls++);
+    h.window[first === "app" ? "__openstudioAppReady" : "__openstudioIntroHidden"] = true;
+    h.emit(first === "app" ? "openstudio:app-ready" : "openstudio:intro-hidden");
+    h.emit("pointerdown");
+    assert.equal(h.frames.size, 0, "one signal or input cannot bypass readiness");
+    h.ready();
+    h.flush(h.frames);
+    h.flush(h.frames);
+    assert.equal(calls, 0);
+    h.flush(h.idle);
+    h.ready();
+    assert.equal(calls, 1);
+    assert.equal(h.frames.size, 0);
+  }
+});
+
+test("an already-ready client route starts without another event or an idle API", () => {
+  const h = harness();
+  h.ready();
+  delete h.window.requestIdleCallback;
+  let calls = 0;
+  h.schedule(() => calls++);
+  h.flush(h.frames);
+  assert.equal(calls, 0, "allow the newly mounted hero to paint");
+  h.flush(h.frames);
+  assert.equal(calls, 1);
+});
+
+test("unmount or reduced motion cancels every pending startup phase", () => {
+  for (const phase of ["signals", "first-frame", "second-frame", "idle"]) {
+    const h = harness();
+    let calls = 0;
+    const cancel = h.schedule(() => calls++);
+    if (phase !== "signals") h.ready();
+    if (phase === "second-frame" || phase === "idle") h.flush(h.frames);
+    if (phase === "idle") h.flush(h.frames);
+    cancel();
+    h.ready();
+    h.flush(h.frames); h.flush(h.frames); h.flush(h.idle);
+    assert.equal(calls, 0, phase);
+    assert.equal(h.frames.size + h.idle.size, 0, phase);
+  }
+});

From ee6ee2e9040bd4a92a0a2216a8ac20e785c65209 Mon Sep 17 00:00:00 2001
From: Sourav Das <srvds7th@hotmail.com>
Date: Sun, 20 Sep 2026 13:52:49 +0530
Subject: [PATCH 12/13] fix: consume batched hero visibility updates

---
 docs/hero-aura.md                   |  9 ++++++-
 src/components/HeroAuraBackdrop.tsx |  8 ++++--
 test/hero-aura-browser.test.mjs     | 38 +++++++++++++++++++++++++++++
 3 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/docs/hero-aura.md b/docs/hero-aura.md
index 330f9b9..72342d6 100644
--- a/docs/hero-aura.md
+++ b/docs/hero-aura.md
@@ -35,6 +35,9 @@ Neither is revealed. Replies containing malformed, oversized, transparent or dar
 images also leave the fallback in place. A 30-second foreground probe timeout
 removes an unresponsive iframe. Unsupported/changed provider behaviour therefore
 keeps the fallback instead of revealing a browser error or black background.
+The timeout does not automatically retry; a new iframe instance is needed.
+Pixel readiness does not establish a healthy frame rate. There is currently no
+automatic fallback for slow software rendering after the frame has been verified.
 
 After verification, the frame fades in over 650 ms using `ease-in-out`. The same
 duration applies to fade-out and viewport re-entry. The settling period is a
@@ -55,7 +58,11 @@ to the viewport. It does not run indefinitely while offscreen.
 Scrolling away retains the same iframe and its ready state; returning reveals the
 same scene without a reload or repeated startup checks. The host tracks viewport
 intersection and document visibility and hides the frame when inactive. The
-current provider also observes intersection and reduced motion internally.
+observer consumes all queued visibility records in order: under CPU throttling,
+the hidden initial layout and its visible replacement can arrive in one batch.
+Reading only the first record strands startup until another viewport change.
+The browser regression suite explicitly reproduces this batch.
+The current provider also observes intersection and reduced motion internally.
 Chromium checks verify actual animation callbacks stop offscreen and resume on
 return, not merely that the host's `data-playing` attribute changes. CSS visibility
 alone is not a cross-browser pause API, so other engines require live verification.
diff --git a/src/components/HeroAuraBackdrop.tsx b/src/components/HeroAuraBackdrop.tsx
index 897c5c0..5fe592d 100644
--- a/src/components/HeroAuraBackdrop.tsx
+++ b/src/components/HeroAuraBackdrop.tsx
@@ -28,8 +28,12 @@ const HeroAuraBackdrop = () => {
     if (!host || !("IntersectionObserver" in window)) return;
     let intersecting = false;
     const update = () => setActive(intersecting && document.visibilityState === "visible");
-    const observer = new IntersectionObserver(([entry]) => {
-      intersecting = entry.isIntersecting;
+    const observer = new IntersectionObserver((entries) => {
+      // A busy main thread can batch the hidden initial layout and its reveal.
+      // Consume every record so an earlier hidden state cannot strand startup.
+      for (const entry of entries) {
+        if (entry.target === host) intersecting = entry.isIntersecting;
+      }
       update();
     });
     observer.observe(host);
diff --git a/test/hero-aura-browser.test.mjs b/test/hero-aura-browser.test.mjs
index 6ac570f..19cf786 100644
--- a/test/hero-aura-browser.test.mjs
+++ b/test/hero-aura-browser.test.mjs
@@ -27,6 +27,44 @@ addEventListener('message', async event => {
 });
 </script>`;
 
+test("Aura starts when one visibility batch contains hidden then visible records", { timeout: 20_000 }, async () => {
+  const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0, strictPort: true } });
+  const browser = await chromium.launch();
+  try {
+    const context = await browser.newContext({ viewport: { width: 390, height: 844 } });
+    await context.route("https://**/*", route => route.abort());
+    await context.route(embed, route => route.fulfill({ contentType: "text/html", body: fixture }));
+    await context.addInitScript(() => {
+      if (window.top !== window) return;
+      localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }));
+      const NativeObserver = window.IntersectionObserver;
+      window.IntersectionObserver = class extends NativeObserver {
+        constructor(callback, options) {
+          super((entries, observer) => {
+            const latest = entries.at(-1);
+            if (latest?.target.classList.contains("sp-hero-aura__bg")) {
+              // A hidden first layout and the revealed layout can be queued
+              // together while the main thread is busy. Keep their order.
+              window.__auraBatchedVisibility = latest.isIntersecting;
+              callback([{ target: latest.target, isIntersecting: !latest.isIntersecting }, latest], observer);
+            } else callback(entries, observer);
+          }, options);
+        }
+      };
+    });
+    const page = await context.newPage();
+    await page.goto(server.resolvedUrls.local[0]);
+    await page.waitForFunction(() => window.__openstudioAppReady && window.__openstudioIntroHidden && window.__auraBatchedVisibility);
+    await page.locator(selector).waitFor({ state: "attached", timeout: 4000 });
+    assert.equal(await page.locator(".sp-hero-aura__bg").getAttribute("data-playing"), "true");
+    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    await page.waitForFunction(() => document.querySelector(".sp-hero-aura__bg").dataset.playing === "false");
+  } finally {
+    await browser.close();
+    await new Promise(resolve => server.httpServer.close(resolve));
+  }
+});
+
 test("Aura only reveals a verified frame and preserves its viewport lifecycle", { timeout: 150_000 }, async (t) => {
   const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0, strictPort: true } });
   const browser = await chromium.launch();

From a19b0453e7f5f7c5ad454d71cfb8d3bdfeb0c066 Mon Sep 17 00:00:00 2001
From: Sourav Das <srvds7th@hotmail.com>
Date: Mon, 21 Sep 2026 12:08:31 +0530
Subject: [PATCH 13/13] perf: pause hidden meters and isolate live DAW updates

---
 docs/analytics.md                             |  9 +++
 docs/illustration-loading.md                  | 11 +++
 index.html                                    |  2 +
 scripts/prerender-site.mjs                    |  5 ++
 scripts/vendor-openstudio-ui.mjs              | 10 ++-
 src/components/PrivacyChoicesPortal.tsx       | 15 ++++
 src/components/layout/SiteShell.tsx           |  4 +-
 src/features/daw-preview/ArrangementLanes.tsx | 76 +++++++++++--------
 src/features/daw-preview/ChannelStripLite.tsx | 37 ++++-----
 src/features/daw-preview/TrackHeaderLite.tsx  | 39 ++++++----
 .../daw-preview/stage/meterPlayback.ts        | 53 +++++++++++++
 .../daw-preview/stage/useStageTimeline.ts     |  9 ++-
 src/features/daw-preview/vendor/PeakMeter.tsx | 19 ++---
 src/features/daw-preview/vendor/README.md     |  1 +
 src/lib/analyticsConsent.ts                   | 16 +---
 src/lib/consentRecord.ts                      | 16 ++++
 src/prerender.tsx                             | 16 +++-
 test/daw-meter-playback-browser.test.mjs      | 70 +++++++++++++++++
 test/privacy-prerender-browser.test.mjs       | 70 +++++++++++++++++
 19 files changed, 386 insertions(+), 92 deletions(-)
 create mode 100644 src/components/PrivacyChoicesPortal.tsx
 create mode 100644 src/features/daw-preview/stage/meterPlayback.ts
 create mode 100644 src/lib/consentRecord.ts
 create mode 100644 test/daw-meter-playback-browser.test.mjs
 create mode 100644 test/privacy-prerender-browser.test.mjs

diff --git a/docs/analytics.md b/docs/analytics.md
index d9ee3e7..0589830 100644
--- a/docs/analytics.md
+++ b/docs/analytics.md
@@ -5,6 +5,15 @@ acceptance. They are not part of the desktop app. Source:
 `src/lib/analytics.ts`, `src/lib/analyticsConsent.ts`, and
 `src/components/PrivacyChoices.tsx`. Policy text lives in `src/data/legal.ts`.
 
+The same choice panel is prerendered into `#openstudio-privacy`, outside the
+temporarily hidden route root. A small pre-paint script uses the shared
+`consentRecord.ts` validator to hide it for an unexpired saved choice. This
+script never loads analytics or grants consent. The client portal replaces the
+inert static panel before paint and keeps router links, focus and choice handlers
+inside the existing app. Without JavaScript, or when initial application loading
+fails, the static panel stays hidden so unusable controls cannot cover legal text.
+The original loader still covers initial non-legal navigation until it finishes.
+
 ## Build configuration
 
 Set these in the hosting provider's **build** environment; Vite embeds them at
diff --git a/docs/illustration-loading.md b/docs/illustration-loading.md
index 0a5973a..8b669f4 100644
--- a/docs/illustration-loading.md
+++ b/docs/illustration-loading.md
@@ -25,6 +25,17 @@ their bandwidth without fixing the scene change.
 
 ## Current implementation
 
+- Meter canvases use `stage/meterPlayback.ts` in addition to the GSAP gate.
+  Each canvas must intersect the viewport and the document must be visible;
+  continuous drawing also requires an active stage and normal motion. Pauses
+  retain the canvas, RMS smoothing and peak-hold time. Visible static/reduced-motion
+  meters receive a rest-frame paint, including after resizing, without a loop.
+  The upstream drawing code and 20 fps limit are unchanged; the integration is a
+  reproducible patch in `scripts/vendor-openstudio-ui.mjs`.
+- Track activity and mixer meters update through local contexts so unchanged
+  labels/controls skip React rendering. Clip artwork has a separate memoized
+  boundary whose props exclude playhead time and continuously changing levels.
+  Choreography, styles and the 30 fps timeline commit rate are unchanged.
 - Each lazy route imports the renderers it uses. Home, Features, AI and NAM Rack
   render their real controls and scene in the rest state. There is no temporary
   screenshot, bitmap crossfade or second scene to replace it.
diff --git a/index.html b/index.html
index ea8ef21..5fc81ad 100644
--- a/index.html
+++ b/index.html
@@ -561,6 +561,8 @@
         );
       })();
     </script>
+    <div id="openstudio-privacy" class="sp-root min-h-0 bg-transparent" hidden inert></div>
+    <!-- privacy-bootstrap -->
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/scripts/prerender-site.mjs b/scripts/prerender-site.mjs
index 8452357..9b4f9b1 100644
--- a/scripts/prerender-site.mjs
+++ b/scripts/prerender-site.mjs
@@ -112,6 +112,11 @@ export function buildRouteHtml(template, route, { manifest, imageIndex = {} }) {
   }
   const content = route.html.replace(/(data-sp-reveal="[^"]+")/g, '$1 data-sp-in="true"');
   html = html.replace(/<div id="root"><\/div>/, `<div id="root"><div data-static-route-content>${content}</div></div>`);
+  if (route.privacyHtml && route.privacyBootstrap) {
+    html = html.replace('id="openstudio-privacy" class="sp-root min-h-0 bg-transparent" hidden inert></div>',
+      `id="openstudio-privacy" class="sp-root min-h-0 bg-transparent" hidden inert><div data-privacy-prerender>${route.privacyHtml}</div></div>`)
+      .replace('<!-- privacy-bootstrap -->', `<script>${route.privacyBootstrap}</script>`);
+  }
   if (/^\/(privacy|security|terms)$/.test(route.path)) {
     html = html
       .replace('<html lang="en">', '<html lang="en" data-openstudio-immediate-content>')
diff --git a/scripts/vendor-openstudio-ui.mjs b/scripts/vendor-openstudio-ui.mjs
index 2c95892..d25557c 100644
--- a/scripts/vendor-openstudio-ui.mjs
+++ b/scripts/vendor-openstudio-ui.mjs
@@ -31,7 +31,15 @@ const ATLAS_COLUMNS = 11;
 /** @type {{ from: string; to: string; patches?: [string, string][] }[]} */
 const FILES = [
   { from: "components/meterConfig.ts", to: "meterConfig.ts" },
-  { from: "components/PeakMeter.tsx", to: "PeakMeter.tsx" },
+  { from: "components/PeakMeter.tsx", to: "PeakMeter.tsx", patches: [
+    ['import { useEffect, useRef, useCallback } from "react";', 'import { useEffect, useRef, useCallback } from "react";\nimport { startMeterPlayback } from "../stage/meterPlayback";'],
+    ['  const animFrameRef = useRef<number | null>(null);\n', ''],
+    ['{ animFrameRef.current = requestAnimationFrame(draw); return; }', '{ return; }'],
+    ['        animFrameRef.current = requestAnimationFrame(draw);\n', ''],
+    ['      animFrameRef.current = requestAnimationFrame(draw);\n', ''],
+    ['    animFrameRef.current = requestAnimationFrame(draw);\n', ''],
+    ['    return () => {\n      if (animFrameRef.current !== null) {\n        cancelAnimationFrame(animFrameRef.current);\n      }\n    };', '    const canvas = canvasRef.current;\n    if (!canvas) return;\n    return startMeterPlayback(canvas, draw, lastDrawTimeRef.current);'],
+  ] },
   { from: "components/MasterPeakMeterCluster.tsx", to: "MasterPeakMeterCluster.tsx" },
   {
     from: "components/NAMRackControlAssets.ts",
diff --git a/src/components/PrivacyChoicesPortal.tsx b/src/components/PrivacyChoicesPortal.tsx
new file mode 100644
index 0000000..6cd067d
--- /dev/null
+++ b/src/components/PrivacyChoicesPortal.tsx
@@ -0,0 +1,15 @@
+import { useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import PrivacyChoices from "./PrivacyChoices";
+
+/** Keep consent outside the route root, which is hidden during lazy startup. */
+export default function PrivacyChoicesPortal() {
+  const host = document.getElementById("openstudio-privacy");
+  useLayoutEffect(() => {
+    if (!host) return;
+    host.querySelector("[data-privacy-prerender]")?.remove();
+    host.hidden = false;
+    host.removeAttribute("inert");
+  }, [host]);
+  return host ? createPortal(<PrivacyChoices />, host) : <PrivacyChoices />;
+}
diff --git a/src/components/layout/SiteShell.tsx b/src/components/layout/SiteShell.tsx
index af4018f..fad9533 100644
--- a/src/components/layout/SiteShell.tsx
+++ b/src/components/layout/SiteShell.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useContext, useState, type ReactNode } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import { StaticRenderContext } from "@/lib/staticRender";
-import PrivacyChoices from "@/components/PrivacyChoices";
+import PrivacyChoicesPortal from "@/components/PrivacyChoicesPortal";
 import { ErrorBoundary } from "@/components/ErrorBoundary";
 import { IconGradientDefs } from "@/components/ui/primitives";
 import { useHashScroll } from "@/hooks/useHashScroll";
@@ -34,7 +34,7 @@ const SiteShell = () => {
           </ErrorBoundary>
         </main>
         <SiteFooter lead={footerLead} />
-        {staticRender ? null : <PrivacyChoices />}
+        {staticRender ? null : <PrivacyChoicesPortal />}
       </div>
     </FooterLeadContext.Provider>
   );
diff --git a/src/features/daw-preview/ArrangementLanes.tsx b/src/features/daw-preview/ArrangementLanes.tsx
index 7c20587..e6f1901 100644
--- a/src/features/daw-preview/ArrangementLanes.tsx
+++ b/src/features/daw-preview/ArrangementLanes.tsx
@@ -151,37 +151,9 @@ export const ArrangementLanes = memo(function ArrangementLanes({
               data-lane={lane.name}
               style={{ height: laneHeight, background: index % 2 === 0 ? "#1a1a1a" : "#171717" }}
             >
-              {lane.clips.map((clip) => {
-                const metrics = rowMetrics(clip.kind === "midi" ? "midi" : kind, laneHeight);
-                const clipWidth = Math.max(0, clip.duration * pixelsPerSecond);
-                if (clipWidth < 1) return null;
-                const common = {
-                  color: lane.color,
-                  duration: clip.duration,
-                  height: metrics.clipHeight,
-                  muted: lane.muted,
-                  name: clip.label,
-                  offset: clip.offset,
-                  pixelsPerSecond,
-                  recording: clip.recording,
-                  seed: clip.seed ?? index + 1,
-                  tempo,
-                  width: clipWidth,
-                };
-                return (
-                  <div
-                    key={clip.label}
-                    className="absolute z-[1] transition-opacity duration-300"
-                    style={{ left: clip.start * pixelsPerSecond, top: metrics.clipInsetY, width: clipWidth, height: metrics.clipHeight, opacity: silenced && transport === "playing" ? 0.45 : 1 }}
-                  >
-                    {clip.kind === "midi" ? (
-                      <MidiClipLite {...common} profile={(clip.profile as MidiProfile) ?? "keys"} selected={clip.selected} />
-                    ) : (
-                      <AudioClipLite {...common} profile={(clip.profile as AudioProfile) ?? "mix"} />
-                    )}
-                  </div>
-                );
-              })}
+              <LaneClips clips={lane.clips} color={lane.color} muted={lane.muted} kind={kind}
+                seed={index + 1} laneHeight={laneHeight} pixelsPerSecond={pixelsPerSecond} tempo={tempo}
+                silenced={silenced && transport === "playing"} />
             </div>
           );
         })}
@@ -192,3 +164,45 @@ export const ArrangementLanes = memo(function ArrangementLanes({
     </div>
   );
 });
+
+// Time and meter levels change every frame; the clip artwork usually does not.
+const LaneClips = memo(function LaneClips({ clips, color, muted, kind, seed, laneHeight, pixelsPerSecond, tempo, silenced }: {
+  clips: readonly LaneClip[]; color: string; muted?: boolean; kind: "audio" | "midi";
+  seed: number; laneHeight: number; pixelsPerSecond: number; tempo: number; silenced: boolean;
+}) {
+  return (
+    <>
+      {clips.map((clip) => {
+        const metrics = rowMetrics(clip.kind === "midi" ? "midi" : kind, laneHeight);
+        const clipWidth = Math.max(0, clip.duration * pixelsPerSecond);
+        if (clipWidth < 1) return null;
+        const common = {
+          color,
+          duration: clip.duration,
+          height: metrics.clipHeight,
+          muted,
+          name: clip.label,
+          offset: clip.offset,
+          pixelsPerSecond,
+          recording: clip.recording,
+          seed: clip.seed ?? seed,
+          tempo,
+          width: clipWidth,
+        };
+        return (
+          <div
+            key={clip.label}
+            className="absolute z-[1] transition-opacity duration-300"
+            style={{ left: clip.start * pixelsPerSecond, top: metrics.clipInsetY, width: clipWidth, height: metrics.clipHeight, opacity: silenced ? 0.45 : 1 }}
+          >
+            {clip.kind === "midi" ? (
+              <MidiClipLite {...common} profile={(clip.profile as MidiProfile) ?? "keys"} selected={clip.selected} />
+            ) : (
+              <AudioClipLite {...common} profile={(clip.profile as AudioProfile) ?? "mix"} />
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});
diff --git a/src/features/daw-preview/ChannelStripLite.tsx b/src/features/daw-preview/ChannelStripLite.tsx
index d2c445b..6262e81 100644
--- a/src/features/daw-preview/ChannelStripLite.tsx
+++ b/src/features/daw-preview/ChannelStripLite.tsx
@@ -3,7 +3,7 @@
 // Every `useDAWStore` selector is a prop, and the FX chain panel, context menu,
 // native-bridge clip reset, scoped-action executor and grouped wheel handlers
 // are dropped. Markup and Tailwind classes are otherwise kept as-is.
-import { memo } from "react";
+import { createContext, memo, useContext, useMemo } from "react";
 import { ChevronDown, Power } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { DawButton } from "./DawButton";
@@ -94,7 +94,23 @@ export interface ChannelStripLiteProps {
   sendCount?: number;
 }
 
-export const ChannelStripLite = memo(function ChannelStripLite({
+const MeterContext = createContext({ level: 0, clipping: false });
+
+const ChannelMeter = ({ isMaster, name }: { isMaster: boolean; name: string }) => {
+  const { level, clipping } = useContext(MeterContext);
+  return isMaster ? <MasterPeakMeterCluster level={level} clipping={clipping} /> : (
+    <PeakMeter level={level} ariaLabel={`${name} meter: audio output`} stereo={true}
+      clipping={clipping} scaleMode="extended" showThresholdLine={true} />
+  );
+};
+
+// Meter values update independently of the much larger control/label subtree.
+export const ChannelStripLite = memo(function ChannelStripLite({ level, clipping = false, ...controls }: ChannelStripLiteProps) {
+  const meter = useMemo(() => ({ level, clipping }), [level, clipping]);
+  return <MeterContext.Provider value={meter}><ChannelStripControls {...controls} /></MeterContext.Provider>;
+});
+
+const ChannelStripControls = memo(function ChannelStripControls({
   name,
   trackIndex,
   color,
@@ -108,13 +124,11 @@ export const ChannelStripLite = memo(function ChannelStripLite({
   armed = false,
   isSelected = false,
   isMaster = false,
-  level,
-  clipping = false,
   mono = false,
   automationRead = true,
   automationWrite = false,
   sendCount = 0,
-}: ChannelStripLiteProps) {
+}: Omit<ChannelStripLiteProps, "level" | "clipping">) {
   const panDisplay = pan === 0 ? "C" : pan > 0 ? `R${Math.round(Math.abs(pan * 100))}` : `L${Math.round(Math.abs(pan * 100))}`;
   const dbMarks = isMaster ? DB_MARKS : DB_MARKS.filter((m) => [12, 0, -12, -48, -60].includes(m.db));
 
@@ -273,18 +287,7 @@ export const ChannelStripLite = memo(function ChannelStripLite({
       {/* Meter + Fader Section */}
       <div className="flex-1 flex gap-0.5 px-1 py-0.5 min-h-0 overflow-hidden">
         <div className="shrink-0 h-full">
-          {isMaster ? (
-            <MasterPeakMeterCluster level={level} clipping={clipping} />
-          ) : (
-            <PeakMeter
-              level={level}
-              ariaLabel={`${name} meter: audio output`}
-              stereo={true}
-              clipping={clipping}
-              scaleMode="extended"
-              showThresholdLine={true}
-            />
-          )}
+          <ChannelMeter isMaster={isMaster} name={name} />
         </div>
 
         <div className={`relative ${CHANNEL_STRIP_DB_LABEL_WIDTH_CLASS} shrink-0 h-full`}>
diff --git a/src/features/daw-preview/TrackHeaderLite.tsx b/src/features/daw-preview/TrackHeaderLite.tsx
index 5c20ca5..d7668d8 100644
--- a/src/features/daw-preview/TrackHeaderLite.tsx
+++ b/src/features/daw-preview/TrackHeaderLite.tsx
@@ -5,7 +5,7 @@
 // dropped. The control row wraps exactly like upstream's TCP (a flex-wrap
 // row that the lane height clips), at a 20 px density so two rows fit the
 // 48 px lanes of a 640 px stage.
-import { memo } from "react";
+import { createContext, memo, useContext } from "react";
 import { Power, StickyNote, Volume2 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { DawButton } from "./DawButton";
@@ -103,7 +103,28 @@ export interface TrackHeaderLiteProps {
 /** Meter gradient thresholds from upstream getMeterColor(). */
 const meterColor = (dbNorm: number) => (dbNorm > 0.92 ? "#ef4444" : dbNorm > 0.85 ? "#facc15" : "#16a34a");
 
-export const TrackHeaderLite = memo(function TrackHeaderLite({
+const ActivityContext = createContext(0);
+const TrackActivity = ({ type }: { type: TrackType }) => {
+  const level = useContext(ActivityContext);
+  const dbNorm = level > 0.001 ? Math.max(0, (20 * Math.log10(level) + 60) / 72) : 0;
+  return (
+    <div className="w-2 pt-1 bg-neutral-900 flex flex-col-reverse border-l border-neutral-800 shrink-0 mr-1" data-meter-source={type === "audio" ? "audio_output" : "midi_input"}>
+      <div
+        className="w-full"
+        style={{
+          height: `${Math.min(100, dbNorm * 100)}%`,
+          background: type === "audio" ? meterColor(dbNorm) : "linear-gradient(to top, #22d3ee, #a5f3fc)",
+        }}
+      />
+    </div>
+  );
+};
+
+export const TrackHeaderLite = memo(function TrackHeaderLite({ level = 0, ...controls }: TrackHeaderLiteProps) {
+  return <ActivityContext.Provider value={level}><TrackControls {...controls} /></ActivityContext.Provider>;
+});
+
+const TrackControls = memo(function TrackControls({
   name,
   color,
   type = "audio",
@@ -117,11 +138,9 @@ export const TrackHeaderLite = memo(function TrackHeaderLite({
   soloed = false,
   armed = false,
   selected = false,
-  level = 0,
   height,
   entering = false,
-}: TrackHeaderLiteProps) {
-  const dbNorm = level > 0.001 ? Math.max(0, (20 * Math.log10(level) + 60) / 72) : 0;
+}: Omit<TrackHeaderLiteProps, "level">) {
   const twoRows = height >= TWO_ROW_LANE_HEIGHT;
   const typeLabel = type === "audio" ? "Audio" : type === "midi" ? "MIDI" : "Instrument";
 
@@ -189,15 +208,7 @@ export const TrackHeaderLite = memo(function TrackHeaderLite({
         {/* Right side: vertical activity meter. Upstream pulses this while an
             armed track has signal and eases it over 75 ms; the stage feeds it
             every frame, so both read as flicker and are left out. */}
-        <div className="w-2 pt-1 bg-neutral-900 flex flex-col-reverse border-l border-neutral-800 shrink-0 mr-1" data-meter-source={type === "audio" ? "audio_output" : "midi_input"}>
-          <div
-            className="w-full"
-            style={{
-              height: `${Math.min(100, dbNorm * 100)}%`,
-              background: type === "audio" ? meterColor(dbNorm) : "linear-gradient(to top, #22d3ee, #a5f3fc)",
-            }}
-          />
-        </div>
+        <TrackActivity type={type} />
       </div>
     </div>
   );
diff --git a/src/features/daw-preview/stage/meterPlayback.ts b/src/features/daw-preview/stage/meterPlayback.ts
new file mode 100644
index 0000000..6054d44
--- /dev/null
+++ b/src/features/daw-preview/stage/meterPlayback.ts
@@ -0,0 +1,53 @@
+/** Schedule a meter only when its own canvas is visible and its stage can play.
+ * Keep the canvas and elapsed animation time across pauses; never clear on exit.
+ */
+export function startMeterPlayback(canvas: HTMLCanvasElement, draw: (time: number) => void, initialTime = 0) {
+  const stage = canvas.closest<HTMLElement>(".daw-session");
+  const motion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  let intersecting = !("IntersectionObserver" in window);
+  let frame: number | null = null;
+  let lastTime: number | null = null;
+  let elapsed = initialTime;
+  let disposed = false;
+  const visible = () => intersecting && document.visibilityState === "visible";
+  const playing = () => visible() && !motion.matches && (!stage || stage.dataset.stagePlaying === "true");
+  const tick = (time: number) => {
+    frame = null;
+    if (disposed || !visible()) return;
+    // The upstream meter uses timestamps for peak hold/decay. Hidden time must
+    // not advance it or produce a jump when the same canvas resumes.
+    elapsed += lastTime === null ? 50 : time - lastTime;
+    lastTime = time;
+    draw(elapsed);
+    if (playing()) frame = requestAnimationFrame(tick);
+    else lastTime = null;
+  };
+  const sync = () => {
+    if (frame !== null) cancelAnimationFrame(frame);
+    frame = null;
+    lastTime = null;
+    // One rest-frame paint also keeps reduced-motion and resized meters legible.
+    if (visible()) frame = requestAnimationFrame(tick);
+  };
+  const observer = "IntersectionObserver" in window ? new IntersectionObserver(entries => {
+    for (const entry of entries) if (entry.target === canvas) intersecting = entry.isIntersecting;
+    sync();
+  }) : null;
+  observer?.observe(canvas);
+  const stageObserver = new MutationObserver(sync);
+  if (stage) stageObserver.observe(stage, { attributes: true, attributeFilter: ["data-stage-playing"] });
+  const resizeObserver = new ResizeObserver(sync);
+  resizeObserver.observe(canvas);
+  document.addEventListener("visibilitychange", sync);
+  motion.addEventListener("change", sync);
+  sync();
+  return () => {
+    disposed = true;
+    if (frame !== null) cancelAnimationFrame(frame);
+    observer?.disconnect();
+    stageObserver.disconnect();
+    resizeObserver.disconnect();
+    document.removeEventListener("visibilitychange", sync);
+    motion.removeEventListener("change", sync);
+  };
+}
diff --git a/src/features/daw-preview/stage/useStageTimeline.ts b/src/features/daw-preview/stage/useStageTimeline.ts
index e1c46cf..6219170 100644
--- a/src/features/daw-preview/stage/useStageTimeline.ts
+++ b/src/features/daw-preview/stage/useStageTimeline.ts
@@ -58,6 +58,7 @@ export const useStageTimeline = <TState,>(
 
   useEffect(() => {
     if (!animate) {
+      if (scope.current) scope.current.dataset.stagePlaying = "false";
       setState(spec.static());
       return;
     }
@@ -90,6 +91,8 @@ export const useStageTimeline = <TState,>(
 
     const syncPlayback = () => {
       const shouldPlay = pageVisible && isStageAllowed(entry);
+      const playing = String(shouldPlay && Boolean(timeline));
+      if (element.dataset.stagePlaying !== playing) element.dataset.stagePlaying = playing;
       if (!timeline) {
         if (shouldPlay) prepareTimeline();
         return;
@@ -129,8 +132,9 @@ export const useStageTimeline = <TState,>(
       "IntersectionObserver" in window
         ? new IntersectionObserver(
             (entries) => {
-              const visible = entries.find((item) => item.target === element);
-              if (visible) updateStageRatio(entry, visible.isIntersecting ? Math.max(visible.intersectionRatio, 0.01) : 0);
+              for (const visible of entries) {
+                if (visible.target === element) updateStageRatio(entry, visible.isIntersecting ? Math.max(visible.intersectionRatio, 0.01) : 0);
+              }
             },
             { threshold: [0, 0.05, 0.25, 0.5, 0.75, 1] },
           )
@@ -166,6 +170,7 @@ export const useStageTimeline = <TState,>(
       document.removeEventListener("visibilitychange", onVisibility);
       unregister();
       timeline?.kill();
+      element.dataset.stagePlaying = "false";
     };
   }, [animate, scope, spec, startDelay, fps, priority]);
 
diff --git a/src/features/daw-preview/vendor/PeakMeter.tsx b/src/features/daw-preview/vendor/PeakMeter.tsx
index feeffc2..d43d643 100644
--- a/src/features/daw-preview/vendor/PeakMeter.tsx
+++ b/src/features/daw-preview/vendor/PeakMeter.tsx
@@ -1,6 +1,7 @@
 // Source: OpenStudio frontend/src/components/PeakMeter.tsx @ d2056151222fefcede123ef614ec38c6893cbfd5
 // Vendored by scripts/vendor-openstudio-ui.mjs — do not edit by hand, re-run the script.
 import { useEffect, useRef, useCallback } from "react";
+import { startMeterPlayback } from "../stage/meterPlayback";
 import {
   getMeterSegmentColor,
   getPeakIndicatorColor,
@@ -94,7 +95,6 @@ export function PeakMeter({
   // Peak hold with 3 dB/sec decay
   const peakHoldLevelRef = useRef(0);
   const peakHoldTimerRef = useRef(0); // timestamp when peak was captured
-  const animFrameRef = useRef<number | null>(null);
   const lastDrawTimeRef = useRef(0);
 
   // RMS simulation via exponential smoothing of squared peak values
@@ -163,13 +163,12 @@ export function PeakMeter({
   useEffect(() => {
     const draw = (timestamp: number) => {
       const canvas = canvasRef.current;
-      if (!canvas) { animFrameRef.current = requestAnimationFrame(draw); return; }
+      if (!canvas) { return; }
       const ctx = canvas.getContext("2d");
-      if (!ctx) { animFrameRef.current = requestAnimationFrame(draw); return; }
+      if (!ctx) { return; }
 
       // Throttle to ~20fps; backend meter events arrive around 10Hz.
       if (timestamp - lastDrawTimeRef.current < 50) {
-        animFrameRef.current = requestAnimationFrame(draw);
         return;
       }
       lastDrawTimeRef.current = timestamp;
@@ -191,7 +190,7 @@ export function PeakMeter({
       const shouldShowRulingLines = showRulingLinesRef.current;
       const currentColorScheme = colorSchemeRef.current;
       const ch = height || containerHeightRef.current;
-      if (ch <= 0) { animFrameRef.current = requestAnimationFrame(draw); return; }
+      if (ch <= 0) { return; }
 
       // Sync canvas pixel resolution only when it actually changed
       if (canvas.height !== ch) {
@@ -384,15 +383,11 @@ export function PeakMeter({
         ctx.fillRect(0, 0, width, 3);
       }
 
-      animFrameRef.current = requestAnimationFrame(draw);
     };
 
-    animFrameRef.current = requestAnimationFrame(draw);
-    return () => {
-      if (animFrameRef.current !== null) {
-        cancelAnimationFrame(animFrameRef.current);
-      }
-    };
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    return startMeterPlayback(canvas, draw, lastDrawTimeRef.current);
   }, [height]);
 
   return (
diff --git a/src/features/daw-preview/vendor/README.md b/src/features/daw-preview/vendor/README.md
index bf6ec40..9cd0661 100644
--- a/src/features/daw-preview/vendor/README.md
+++ b/src/features/daw-preview/vendor/README.md
@@ -17,6 +17,7 @@ What the script changes on the way in:
 
 | File | Change |
 |---|---|
+| `PeakMeter.tsx` | drawing is unchanged; the local meter scheduler gates frame callbacks by canvas intersection, stage playback, tab visibility and reduced motion, retaining the canvas and peak-hold time while paused |
 | `NAMRackControlAssets.ts` | `new URL(../assets/…, import.meta.url)` → `/assets/openstudio/nam/controls/…` public paths; frame size 192 → 96 px |
 | `NAMRackKnob.tsx` | store-bound imports (`services/NativeBridge`, `utils/builtInParamValue`, `utils/parameterWheel`) → `./stubs/*` |
 | `stubs/builtInParamValue.ts` | same import rewrite |
diff --git a/src/lib/analyticsConsent.ts b/src/lib/analyticsConsent.ts
index 5fd4b54..e7aa8f4 100644
--- a/src/lib/analyticsConsent.ts
+++ b/src/lib/analyticsConsent.ts
@@ -1,7 +1,8 @@
+import { CONSENT_KEY, CONSENT_MAX_AGE_MS, parseConsentRecord } from "./consentRecord";
 export const CONSENT_EVENT = "openstudio:analytics-consent";
 export const PRIVACY_CHOICES_EVENT = "openstudio:privacy-choices";
-const KEY = "openstudio.analytics-consent.v1";
-const MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000;
+const KEY = CONSENT_KEY;
+const MAX_AGE_MS = CONSENT_MAX_AGE_MS;
 // Browsers overflow longer timeout delays, so renew the timer for distant expiry.
 const MAX_TIMEOUT_MS = 2 ** 31 - 1;
 export type AnalyticsConsent = "accepted" | "rejected" | null;
@@ -11,16 +12,7 @@ function readStoredConsent(): { choice: Exclude<AnalyticsConsent, null>; time: n
   if (typeof window === "undefined") return null;
 
   try {
-    const record = JSON.parse(window.localStorage.getItem(KEY) ?? "null");
-    if (
-      record &&
-      (record.choice === "accepted" || record.choice === "rejected") &&
-      Number.isFinite(record.time) &&
-      Date.now() >= record.time &&
-      Date.now() - record.time < MAX_AGE_MS
-    ) {
-      return record;
-    }
+    return parseConsentRecord(window.localStorage.getItem(KEY), Date.now(), MAX_AGE_MS);
   } catch {
     // Only an explicit choice made in this page can enable analytics without storage.
   }
diff --git a/src/lib/consentRecord.ts b/src/lib/consentRecord.ts
new file mode 100644
index 0000000..8a75377
--- /dev/null
+++ b/src/lib/consentRecord.ts
@@ -0,0 +1,16 @@
+export const CONSENT_KEY = "openstudio.analytics-consent.v1";
+export const CONSENT_MAX_AGE_MS = 180 * 24 * 60 * 60 * 1000;
+
+// Self-contained so prerendering can serialize this same validation into the
+// tiny pre-paint bootstrap. Never treat malformed/expired storage as consent.
+export function parseConsentRecord(raw: string | null, now: number, maxAge: number): { choice: "accepted" | "rejected"; time: number } | null {
+  try {
+    const record: unknown = JSON.parse(raw ?? "null");
+    if (record && typeof record === "object" && "choice" in record && "time" in record &&
+      (record.choice === "accepted" || record.choice === "rejected") &&
+      typeof record.time === "number" && Number.isFinite(record.time) && now >= record.time && now - record.time < maxAge) {
+      return { choice: record.choice, time: record.time };
+    }
+  } catch { /* Unavailable or invalid storage requires a new choice. */ }
+  return null;
+}
diff --git a/src/prerender.tsx b/src/prerender.tsx
index 490d8f0..0108247 100644
--- a/src/prerender.tsx
+++ b/src/prerender.tsx
@@ -2,6 +2,8 @@ import { type ComponentType, type ReactElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import SiteShell from "@/components/layout/SiteShell";
+import PrivacyChoices from "@/components/PrivacyChoices";
+import { CONSENT_KEY, CONSENT_MAX_AGE_MS, parseConsentRecord } from "./lib/consentRecord";
 import { DOCS, loadDocContent } from "@/features/docs";
 import { blogPosts } from "./data/blogs";
 import { loadBlogPostContent } from "./data/blogContent";
@@ -91,5 +93,17 @@ export async function renderRoute(pathname: string) {
   renderToStaticMarkup(tree());
   const html = renderToStaticMarkup(tree());
   if (!state.seo) throw new Error(`Missing SEO: ${pathname}`);
-  return { html, seo: state.seo, updated: state.docContent?.updated };
+  const privacyHtml = renderToStaticMarkup(<MemoryRouter><PrivacyChoices /></MemoryRouter>);
+  // The parser is shared with runtime consent. This only controls visibility;
+  // it cannot initialize analytics or grant permission.
+  const privacyBootstrap = `(() => {
+    let chosen = false;
+    try { chosen = Boolean((${parseConsentRecord.toString()})(localStorage.getItem(${JSON.stringify(CONSENT_KEY)}), Date.now(), ${CONSENT_MAX_AGE_MS})); } catch {}
+    const host = document.getElementById("openstudio-privacy");
+    if (host) host.hidden = chosen;
+    window.addEventListener("openstudio:static-route-restored", () => {
+      if (host?.querySelector("[data-privacy-prerender]")) host.hidden = true;
+    }, { once: true });
+  })();`;
+  return { html, privacyHtml, privacyBootstrap, seo: state.seo, updated: state.docContent?.updated };
 }
diff --git a/test/daw-meter-playback-browser.test.mjs b/test/daw-meter-playback-browser.test.mjs
new file mode 100644
index 0000000..4796500
--- /dev/null
+++ b/test/daw-meter-playback-browser.test.mjs
@@ -0,0 +1,70 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { chromium } from "playwright";
+import { preview } from "vite";
+
+test("meter canvases stop drawing offscreen, hidden and in reduced motion, and resume in place", { timeout: 60_000 }, async t => {
+  const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0 } });
+  const browser = await chromium.launch();
+  try {
+    for (const width of [390, 1440]) await t.test(`${width}px viewport`, async () => {
+      const context = await browser.newContext({ viewport: { width, height: 900 } });
+      await context.route("https://**/*", route => route.abort());
+      await context.addInitScript(() => {
+        localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify({ choice: "rejected", time: Date.now() }));
+        const counts = new WeakMap();
+        const fill = CanvasRenderingContext2D.prototype.fillRect;
+        CanvasRenderingContext2D.prototype.fillRect = function(x, y, w, h) {
+          if (this.canvas.matches("canvas[data-meter-source]") && x === 0 && y === 0 && w === this.canvas.width && h === this.canvas.height) {
+            counts.set(this.canvas, (counts.get(this.canvas) ?? 0) + 1);
+          }
+          return fill.call(this, x, y, w, h);
+        };
+        window.meterPaints = () => [...document.querySelectorAll("canvas[data-meter-source]")].reduce((sum, canvas) => sum + (counts.get(canvas) ?? 0), 0);
+      });
+      const page = await context.newPage();
+      try {
+        await page.goto(server.resolvedUrls.local[0]);
+        await page.waitForFunction(() => window.__openstudioAppReady && window.__openstudioIntroHidden);
+        const meter = page.locator("canvas[data-meter-source]").first();
+        await meter.scrollIntoViewIfNeeded();
+        await page.waitForFunction(() => window.meterPaints() > 5);
+        await meter.evaluate(el => { window.originalMeter = el; });
+        const sample = () => page.evaluate(() => window.meterPaints());
+        const stopped = async () => {
+          await page.waitForTimeout(250);
+          const before = await sample();
+          await page.waitForTimeout(800);
+          assert.equal(await sample(), before, "no canvas draw work while paused");
+        };
+        const resumed = async () => {
+          const before = await sample();
+          await page.waitForFunction(previous => window.meterPaints() > previous + 4, before);
+          assert.equal(await meter.evaluate(el => el === window.originalMeter), true);
+        };
+        await page.evaluate(() => scrollTo({ top: document.body.scrollHeight, behavior: "instant" }));
+        await stopped();
+        await meter.scrollIntoViewIfNeeded();
+        await resumed();
+        // Exercise our visibility handler explicitly; not a physical OS-tab test.
+        await page.evaluate(() => {
+          Object.defineProperty(document, "visibilityState", { configurable: true, value: "hidden" });
+          document.dispatchEvent(new Event("visibilitychange"));
+        });
+        await stopped();
+        await page.evaluate(() => {
+          delete document.visibilityState;
+          document.dispatchEvent(new Event("visibilitychange"));
+        });
+        await resumed();
+        await page.emulateMedia({ reducedMotion: "reduce" });
+        await stopped();
+        await page.emulateMedia({ reducedMotion: "no-preference" });
+        await resumed();
+      } finally { await context.close(); }
+    });
+  } finally {
+    await browser.close();
+    await new Promise(resolve => server.httpServer.close(resolve));
+  }
+});
diff --git a/test/privacy-prerender-browser.test.mjs b/test/privacy-prerender-browser.test.mjs
new file mode 100644
index 0000000..8f4002e
--- /dev/null
+++ b/test/privacy-prerender-browser.test.mjs
@@ -0,0 +1,70 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { chromium } from "playwright";
+import { preview } from "vite";
+
+test("prerendered privacy choices preserve stored consent before application JavaScript", { timeout: 60_000 }, async t => {
+  const server = await preview({ logLevel: "error", preview: { host: "127.0.0.1", port: 0 } });
+  const browser = await chromium.launch();
+  try {
+    for (const [name, record, visible] of [
+      ["fresh", null, true],
+      ["accepted", { choice: "accepted", time: Date.now() }, false],
+      ["rejected", { choice: "rejected", time: Date.now() }, false],
+      ["expired", { choice: "accepted", time: 0 }, true],
+      ["future", { choice: "accepted", time: Date.now() + 86400000 }, true],
+      ["malformed", { choice: "yes", time: Date.now() }, true],
+    ]) await t.test(name, async () => {
+      const context = await browser.newContext();
+      await context.route("https://**/*", route => route.abort());
+      await context.addInitScript(value => {
+        if (value) localStorage.setItem("openstudio.analytics-consent.v1", JSON.stringify(value));
+      }, record);
+      let release;
+      const held = new Promise(resolve => { release = resolve; });
+      await context.route("**/assets/*.js", async route => { await held; await route.continue().catch(() => {}); });
+      const page = await context.newPage();
+      try {
+        await page.goto(server.resolvedUrls.local[0] + "privacy", { waitUntil: "commit" });
+        await page.locator("[data-privacy-prerender]").waitFor({ state: "attached" });
+        await page.waitForFunction(() => document.readyState !== "loading" || document.querySelector("#openstudio-privacy + script"));
+        assert.equal(await page.locator("#openstudio-privacy section").isVisible(), visible);
+        assert.equal(await page.evaluate(() => Boolean(window.__openstudioAppReady)), false);
+        release();
+        await page.waitForFunction(() => window.__openstudioAppReady);
+        const banner = page.getByRole("region", { name: "Website privacy choices" });
+        assert.equal(await banner.count(), visible ? 1 : 0, "exactly one banner after the handoff");
+        assert.equal(await page.locator("[data-privacy-prerender]").count(), 0);
+        if (visible) {
+          await page.getByRole("button", { name: "Reject analytics", exact: true }).click();
+          await banner.waitFor({ state: "detached" });
+        }
+        await page.getByRole("button", { name: "Privacy choices", exact: true }).click();
+        await banner.waitFor();
+      } finally { release(); await context.close(); }
+    });
+    await t.test("a failed application download removes the inert panel", async () => {
+      const context = await browser.newContext();
+      try {
+        await context.route("**/assets/*.js", route => route.abort());
+        const page = await context.newPage();
+        await page.goto(server.resolvedUrls.local[0] + "privacy");
+        await page.waitForFunction(() => window.__openstudioStaticRouteRestored);
+        assert.equal(await page.locator("#openstudio-privacy section").isVisible(), false);
+        assert.equal(await page.locator("h1").isVisible(), true);
+      } finally { await context.close(); }
+    });
+    await t.test("no JavaScript leaves legal text readable without inert consent controls", async () => {
+      const context = await browser.newContext({ javaScriptEnabled: false });
+      try {
+        const page = await context.newPage();
+        await page.goto(server.resolvedUrls.local[0] + "privacy");
+        assert.equal(await page.locator("#openstudio-privacy section").isVisible(), false);
+        assert.equal(await page.locator("h1").isVisible(), true);
+      } finally { await context.close(); }
+    });
+  } finally {
+    await browser.close();
+    await new Promise(resolve => server.httpServer.close(resolve));
+  }
+});