@tokenoftrust/storefront-runner 3.12.3 → 3.12.4

package/apps/storefront/public/shared/commerce-chrome.css

@@ -454,10 +454,16 @@ a.article-card__tag:hover { text-decoration: underline; }
 .site-footer[data-variant="light-collapsible"] .footer-disclaimer p { color: var(--color-text); }
 
 /* --- Reveal-on-scroll (raw-chrome markup uses .reveal/.in) ---------------- */
-.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
+/* Unmarked .reveal stays visible. Opacity 0 applies only with .is-below,
+   the same below-the-fold mark as [data-reveal], so an in-viewport block
+   is not hidden before a script adds .in. */
+.reveal { opacity: 1; }
+.reveal.is-below { transition: opacity .5s ease, transform .5s ease; }
+.reveal.is-below:not(.in) { opacity: 0; transform: translateY(18px); }
 .reveal.in { opacity: 1; transform: none; }
 @media (prefers-reduced-motion: reduce) {
-  .reveal { opacity: 1; transform: none; transition: none; }
+  .reveal,
+  .reveal.is-below:not(.in) { opacity: 1; transform: none; transition: none; }
 }
 
 /* --- Responsive ----------------------------------------------------------- */

package/apps/storefront/src/layouts/Layout.astro

@@ -582,14 +582,26 @@ const footerWidgets = await renderWidgetSlot(
       mountWidgetPostMessageBridge();
     </script>
 
-    {/* Scroll-reveal + analytics pageview hook. ~0.5KB, no framework. */}
+    {/* Scroll-reveal. Initial-viewport blocks stay visible (no .is-below).
+        Only blocks below the fold start hidden, then .is-in shows them. */}
     <script>
-      // Reveal-on-scroll (respects reduced motion via CSS).
+      // Reveal-on-scroll. Reduced motion stays visible via CSS and .is-in.
       const els = document.querySelectorAll("[data-reveal]");
-      if (
-        els.length &&
-        !window.matchMedia("(prefers-reduced-motion: reduce)").matches
-      ) {
+      const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const fold = window.innerHeight || document.documentElement.clientHeight || 0;
+      const below: Element[] = [];
+      for (const el of els) {
+        const rect = el.getBoundingClientRect();
+        const laidOut = rect.width > 0 && rect.height > 0;
+        const inView = !laidOut || fold <= 0 || (rect.bottom > 0 && rect.top < fold);
+        if (reduce || inView || typeof IntersectionObserver !== "function") {
+          el.classList.add("is-in");
+        } else {
+          el.classList.add("is-below");
+          below.push(el);
+        }
+      }
+      if (below.length) {
         const io = new IntersectionObserver(
           (entries) => {
             for (const e of entries) {
@@ -601,9 +613,7 @@ const footerWidgets = await renderWidgetSlot(
           },
           { rootMargin: "0px 0px -8% 0px", threshold: 0.05 },
         );
-        els.forEach((el) => io.observe(el));
-      } else {
-        els.forEach((el) => el.classList.add("is-in"));
+        for (const el of below) io.observe(el);
       }
     </script>
 

package/apps/storefront/src/styles/global.css

@@ -335,18 +335,30 @@
   h2:is(.display-xl, .display-lg, .display-md) { font-size: var(--heading-h2, var(--display-size)); }
   h3:is(.display-xl, .display-lg, .display-md) { font-size: var(--heading-h3, var(--display-size)); }
 
-  /* Tasteful scroll-reveal; opt-in via [data-reveal], JS toggles .is-in. */
+  /* Scroll-reveal only after the script marks a block below the fold.
+     An unmarked [data-reveal] stays at opacity 1, so a block already in the
+     initial viewport is visible with no IntersectionObserver and no tenant flag. */
   [data-reveal] {
+    opacity: 1;
+  }
+  [data-reveal].is-below {
+    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  [data-reveal].is-below:not(.is-in) {
     opacity: 0;
     transform: translateY(14px);
-    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
   }
   [data-reveal].is-in {
     opacity: 1;
     transform: none;
   }
   @media (prefers-reduced-motion: reduce) {
-    [data-reveal] { opacity: 1; transform: none; }
+    [data-reveal],
+    [data-reveal].is-below:not(.is-in) {
+      opacity: 1;
+      transform: none;
+      transition: none;
+    }
   }
 
   /* Island animations (MobileNav drawer slide-in). Globally neutralized by the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "3.12.3",
+  "version": "3.12.4",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",