@xenterprises/nuxt-x-marketing 1.4.15 → 1.5.1

package/CHANGELOG.md

@@ -30,6 +30,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   section and its sample product data were dropped with them. Every other section of the
   demo page is unchanged.
 
+## [1.5.1] - 2026-10-12
+
+### Fixed
+
+- Scroll reveal content (`.xFadeUp`, `.xFadeIn`, `.xFadeLeft`, `.xFadeRight`, `.xScale`, `.xFadeUp-stagger`, `[data-reveal]`) could stay invisible on prerendered sites and in headless Chrome. Reveal is now progressive enhancement only:
+  - Content is visible by default. Hidden initial states apply only under `html.x-reveal-armed`, which the client plugin sets after JS runs, so SSR, prerendered and no-JS output always shows content.
+  - `prefers-reduced-motion: reduce` never hides and never animates.
+  - Elements already in the viewport are marked visible synchronously (getBoundingClientRect) before arming, so above-the-fold content never flashes hidden.
+  - Without IntersectionObserver, everything is shown. If IO never fires, on-screen elements are revealed after 1.5s.
+  - The plugin now initializes on `app:mounted` (initial hydration) as well as `page:finish` (navigations).
+  - One observer app-wide: repeated `initScrollReveal()` calls, including an `app.vue` workaround, replace the previous observer instead of stacking.
+- `XMarkHero` eyebrow, title, subtitle and buttons no longer use reveal classes, so hero text is never gated on JS.
+
+## [1.5.0] - 2026-10-12
+
+### Added
+
+- `XMarkHero` `overlay="heavier"`: flat 75% black (title about 8:1 on the worst measured desk-lamps image area, versus about 5.9:1 with `heavy`).
+- `XMarkHero` `overlay="scrim-left"` and `overlay="scrim-bottom"`: 90% black where the text sits, fading to 30%. White title holds 7:1 (subtitle 5.2:1) even over pure white image areas. `scrim-left` is a full 90% below `md`.
+- `XMarkHero` `height` prop: `full` (default, unchanged), `tall` (75svh), `short` (50svh).
+- `XMarkHero` `imagePosition` prop: CSS `object-position` for the background image or video, e.g. `left center`.
+
+Existing values are unchanged: `heavy` stays 60%, and the default height is still full viewport.
+
 ## [1.4.15] - 2026-10-12
 
 ### Fixed

package/app/assets/css/x-marketing.css

@@ -103,88 +103,93 @@
    * X MARKETING SCROLL ANIMATIONS
    * ============================================ */
 
-  /* xFadeUp - Global fade up on scroll */
-  .xFadeUp {
-    opacity: 0;
-    transform: translateY(24px);
-    transition:
-      opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
-      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .xFadeUp.is-visible {
-    opacity: 1;
-    transform: translateY(0);
-    transition:
-      opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
-      transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
-      box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  /* Stagger children */
-  .xFadeUp-stagger > * {
-    opacity: 0;
-    transform: translateY(24px);
-    transition:
-      opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
-      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-
-  .xFadeUp-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
-  .xFadeUp-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
-  .xFadeUp-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
-  .xFadeUp-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
-  .xFadeUp-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
-  .xFadeUp-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
-
-  /* xFadeIn - Simple fade */
-  .xFadeIn {
-    opacity: 0;
-    transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  .xFadeIn.is-visible { opacity: 1; }
-
-  /* xFadeLeft - Fade from left */
-  .xFadeLeft {
-    opacity: 0;
-    transform: translateX(-24px);
-    transition:
-      opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
-      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  .xFadeLeft.is-visible { opacity: 1; transform: translateX(0); }
+  /* Reveal is progressive enhancement: hidden states apply only after the
+   * client plugin sets html.x-reveal-armed, and never with reduced motion.
+   * SSR, prerendered and no-JS output always shows content. */
+  @media (prefers-reduced-motion: no-preference) {
+    /* xFadeUp - Global fade up on scroll */
+    html.x-reveal-armed .xFadeUp {
+      opacity: 0;
+      transform: translateY(24px);
+      transition:
+        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
+        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
 
-  /* xFadeRight - Fade from right */
-  .xFadeRight {
-    opacity: 0;
-    transform: translateX(24px);
-    transition:
-      opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
-      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  .xFadeRight.is-visible { opacity: 1; transform: translateX(0); }
+    html.x-reveal-armed .xFadeUp.is-visible {
+      opacity: 1;
+      transform: translateY(0);
+      transition:
+        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
+        transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
+        box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
 
-  /* xScale - Scale in */
-  .xScale {
-    opacity: 0;
-    transform: scale(0.95);
-    transition:
-      opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
-      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
-  .xScale.is-visible { opacity: 1; transform: scale(1); }
+    /* Stagger children */
+    html.x-reveal-armed .xFadeUp-stagger > * {
+      opacity: 0;
+      transform: translateY(24px);
+      transition:
+        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
+        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
 
-  /* Legacy reveal (kept for compatibility) */
-  [data-reveal] {
-    opacity: 0;
-    transform: translateY(40px);
-    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
-                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
-  }
+    html.x-reveal-armed .xFadeUp-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: translateY(0); }
+    html.x-reveal-armed .xFadeUp-stagger.is-visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
+    html.x-reveal-armed .xFadeUp-stagger.is-visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
+    html.x-reveal-armed .xFadeUp-stagger.is-visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
+    html.x-reveal-armed .xFadeUp-stagger.is-visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
+    html.x-reveal-armed .xFadeUp-stagger.is-visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }
+
+    /* xFadeIn - Simple fade */
+    html.x-reveal-armed .xFadeIn {
+      opacity: 0;
+      transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    html.x-reveal-armed .xFadeIn.is-visible { opacity: 1; }
+
+    /* xFadeLeft - Fade from left */
+    html.x-reveal-armed .xFadeLeft {
+      opacity: 0;
+      transform: translateX(-24px);
+      transition:
+        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
+        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    html.x-reveal-armed .xFadeLeft.is-visible { opacity: 1; transform: translateX(0); }
+
+    /* xFadeRight - Fade from right */
+    html.x-reveal-armed .xFadeRight {
+      opacity: 0;
+      transform: translateX(24px);
+      transition:
+        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
+        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    html.x-reveal-armed .xFadeRight.is-visible { opacity: 1; transform: translateX(0); }
+
+    /* xScale - Scale in */
+    html.x-reveal-armed .xScale {
+      opacity: 0;
+      transform: scale(0.95);
+      transition:
+        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
+        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+    }
+    html.x-reveal-armed .xScale.is-visible { opacity: 1; transform: scale(1); }
+
+    /* Legacy reveal (kept for compatibility) */
+    html.x-reveal-armed [data-reveal] {
+      opacity: 0;
+      transform: translateY(40px);
+      transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
+                  transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
+    }
 
-  [data-reveal].is-visible {
-    opacity: 1;
-    transform: translateY(0);
+    html.x-reveal-armed [data-reveal].is-visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
   /* ============================================

package/app/components/X/Mark/Hero/index.vue

@@ -1,7 +1,8 @@
 <template>
 	<section
-		class="relative min-h-[calc(100svh-var(--ui-header-height))] flex overflow-hidden"
+		class="relative flex overflow-hidden"
 		:class="[
+			heightClass,
 			alignmentClasses,
 			verticalAlignClasses,
 			{ 'pt-20': includeNavPadding },
@@ -21,6 +22,7 @@
 					muted
 					playsinline
 					class="absolute inset-0 w-full h-full object-cover xParallax"
+					:style="imagePositionStyle"
 					data-parallax-speed="0.3"
 				/>
 
@@ -31,6 +33,7 @@
 					:alt="img.alt || ''"
 					fetchpriority="high"
 					class="absolute inset-0 w-full h-full object-cover xParallax"
+					:style="imagePositionStyle"
 					data-parallax-speed="0.3"
 				/>
 			</slot>
@@ -47,14 +50,13 @@
 		<div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 			<div class="max-w-3xl pb-6 md:pb-8" :class="contentAlignmentClasses">
 				<!-- Eyebrow -->
-				<p v-if="eyebrow" class="xText-eyebrow text-white/70 mb-4 xFadeUp">
+				<p v-if="eyebrow" class="xText-eyebrow text-white/70 mb-4">
 					{{ eyebrow }}
 				</p>
 
 				<!-- Title -->
 				<h1
-					class="xText-display text-white xText-balance xFadeUp"
-					style="transition-delay: 100ms"
+					class="xText-display text-white xText-balance"
 				>
 					<slot name="title">{{ title }}</slot>
 				</h1>
@@ -62,8 +64,7 @@
 				<!-- Subtitle -->
 				<p
 					v-if="subtitle || $slots.subtitle"
-					class="mt-6 text-xl text-white/80 max-w-2xl xFadeUp"
-					style="transition-delay: 200ms"
+					class="mt-6 text-xl text-white/80 max-w-2xl"
 				>
 					<slot name="subtitle">{{ subtitle }}</slot>
 				</p>
@@ -71,12 +72,11 @@
 				<!-- Actions -->
 				<div
 					v-if="buttons.length || $slots.actions"
-					class="mt-10 flex flex-wrap gap-4 xFadeUp"
+					class="mt-10 flex flex-wrap gap-4"
 					:class="{
 						'justify-center': align === 'center',
 						'justify-end': align === 'right',
 					}"
-					style="transition-delay: 300ms"
 				>
 					<slot name="actions">
 						<UButton
@@ -137,7 +137,15 @@ const props = defineProps({
 	overlay: {
 		type: String,
 		default: "gradient",
-		validator: (v) => ["light", "heavy", "gradient", "none"].includes(v),
+		validator: (v) => [
+				"light",
+				"heavy",
+				"heavier",
+				"gradient",
+				"scrim-left",
+				"scrim-bottom",
+				"none",
+			].includes(v),
 	},
 	/** Small text above title */
 	eyebrow: {
@@ -177,6 +185,17 @@ const props = defineProps({
 		type: Boolean,
 		default: true,
 	},
+	/** Section height: full (viewport minus header, default), tall (75svh), short (50svh) */
+	height: {
+		type: String,
+		default: "full",
+		validator: (v) => ["full", "tall", "short"].includes(v),
+	},
+	/** CSS object-position for the background image/video, e.g. "left center" */
+	imagePosition: {
+		type: String,
+		default: "",
+	},
 	/** Add top padding for non-transparent nav */
 	includeNavPadding: {
 		type: Boolean,
@@ -188,11 +207,33 @@ const overlayClass = computed(() => {
 	const overlays = {
 		light: "bg-black/30",
 		heavy: "bg-black/60",
+		// 75% flat: white title >= 8:1 on image areas up to ~0.32 relative luminance
+		heavier: "bg-black/75",
 		gradient: "bg-gradient-to-t from-black/80 via-black/40 to-transparent",
+		// 90% where text sits: white title >= 7:1 even over pure white image areas.
+		// Full 90% on small screens where text spans the width.
+		"scrim-left":
+			"bg-black/90 md:bg-transparent md:bg-gradient-to-r md:from-black/90 md:via-black/90 md:via-55% md:to-black/30",
+		// 90% across the bottom half; pair with verticalAlign="bottom"
+		"scrim-bottom":
+			"bg-gradient-to-t from-black/90 via-black/90 via-50% to-black/30",
 	};
 	return overlays[props.overlay] || "";
 });
 
+const heightClass = computed(() => {
+	const heights = {
+		full: "min-h-[calc(100svh-var(--ui-header-height))]",
+		tall: "min-h-[75svh]",
+		short: "min-h-[50svh]",
+	};
+	return heights[props.height] || heights.full;
+});
+
+const imagePositionStyle = computed(() =>
+	props.imagePosition ? { objectPosition: props.imagePosition } : undefined,
+);
+
 const alignmentClasses = computed(() => {
 	const aligns = {
 		left: "text-left",

package/app/composables/useScrollReveal.js

@@ -8,6 +8,39 @@
  * - .xFadeUp, .xFadeIn, .xFadeLeft, .xFadeRight, .xScale classes
  * - .xFadeUp-stagger for staggered child animations
  */
+// Class set on <html> once JS has armed reveal. Hidden initial states in
+// x-marketing.css only apply under it, so SSR, prerendered and no-JS pages
+// always render reveal content visible (progressive enhancement).
+export const REVEAL_ARMED_CLASS = 'x-reveal-armed';
+export const REVEAL_FALLBACK_MS = 1500;
+
+const animationSelectors = [
+  '[data-reveal]',
+  '.xFadeUp',
+  '.xFadeIn',
+  '.xFadeLeft',
+  '.xFadeRight',
+  '.xScale',
+  '.xFadeUp-stagger',
+].join(', ');
+
+// One active observer app-wide. Every init (plugin, app.vue workaround,
+// component) replaces the previous one, so callers never stack observers.
+let activeObserver = null;
+let fallbackTimer = null;
+
+const prefersReducedMotion = () =>
+  typeof window !== 'undefined' &&
+  typeof window.matchMedia === 'function' &&
+  Boolean(window.matchMedia('(prefers-reduced-motion: reduce)')?.matches);
+
+const inViewport = (el) => {
+  const r = el.getBoundingClientRect();
+  const vh = window.innerHeight || document.documentElement.clientHeight;
+  const vw = window.innerWidth || document.documentElement.clientWidth;
+  return r.bottom > 0 && r.right > 0 && r.top < vh && r.left < vw;
+};
+
 export const useScrollReveal = (options = {}) => {
   // Lifecycle hooks are only registered inside a component instance.
   // Outside one (e.g. a plugin) the caller drives initScrollReveal/cleanup itself.
@@ -21,44 +54,62 @@ export const useScrollReveal = (options = {}) => {
 
   const observer = ref(null);
 
-  // Selector for all animation elements
-  const animationSelectors = [
-    '[data-reveal]',
-    '.xFadeUp',
-    '.xFadeIn',
-    '.xFadeLeft',
-    '.xFadeRight',
-    '.xScale',
-    '.xFadeUp-stagger',
-  ].join(', ');
-
   const initScrollReveal = () => {
-    if (import.meta.client && typeof IntersectionObserver !== 'undefined') {
-      if (observer.value) observer.value.disconnect();
-      observer.value = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add('is-visible');
-            // Optionally unobserve after animation
-            if (options.once !== false) {
-              observer.value?.unobserve(entry.target);
-            }
-          } else if (options.once === false) {
-            // Re-hide if not in view and once is false
-            entry.target.classList.remove('is-visible');
-          }
-        });
-      }, defaultOptions);
+    if (!import.meta.client || typeof document === 'undefined') return;
+    const root = document.documentElement;
+    const elements = Array.from(document.querySelectorAll(animationSelectors));
 
-      // Observe all animation elements
-      const elements = document.querySelectorAll(animationSelectors);
-      elements.forEach((el) => observer.value?.observe(el));
+    // No IO or reduced motion: never hide, show everything, no animation.
+    if (typeof IntersectionObserver === 'undefined' || prefersReducedMotion()) {
+      root.classList.remove(REVEAL_ARMED_CLASS);
+      elements.forEach((el) => el.classList.add('is-visible'));
+      return;
     }
+
+    // Mark what is already on screen visible synchronously, before arming,
+    // so above-the-fold content never flashes hidden.
+    elements.forEach((el) => {
+      if (!el.classList.contains('is-visible') && inViewport(el)) {
+        el.classList.add('is-visible');
+      }
+    });
+    root.classList.add(REVEAL_ARMED_CLASS);
+
+    if (activeObserver && activeObserver !== observer.value) activeObserver.disconnect();
+    if (observer.value) observer.value.disconnect();
+
+    observer.value = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('is-visible');
+          if (options.once !== false) {
+            observer.value?.unobserve(entry.target);
+          }
+        } else if (options.once === false) {
+          entry.target.classList.remove('is-visible');
+        }
+      });
+    }, defaultOptions);
+    activeObserver = observer.value;
+
+    elements.forEach((el) => observer.value?.observe(el));
+
+    // Fallback: if IO never fires, reveal anything on screen after a short wait.
+    if (fallbackTimer) clearTimeout(fallbackTimer);
+    fallbackTimer = setTimeout(() => {
+      fallbackTimer = null;
+      document.querySelectorAll(animationSelectors).forEach((el) => {
+        if (!el.classList.contains('is-visible') && inViewport(el)) {
+          el.classList.add('is-visible');
+        }
+      });
+    }, REVEAL_FALLBACK_MS);
   };
 
   const cleanup = () => {
     if (observer.value) {
       observer.value.disconnect();
+      if (activeObserver === observer.value) activeObserver = null;
       observer.value = null;
     }
   };

package/app/plugins/marketing.client.ts

@@ -5,14 +5,15 @@
  * From spec-prompt.md specification
  */
 export default defineNuxtPlugin((nuxtApp) => {
-  // Initialize scroll reveal globally. A plugin has no component instance,
-  // so drive the observer from page lifecycle hooks: initial hydration and
-  // every client-side navigation re-scan the DOM for reveal elements.
-  const { initScrollReveal, cleanup } = useScrollReveal();
-  nuxtApp.hook('page:finish', () => {
-    cleanup();
-    nextTick(() => setTimeout(initScrollReveal, 100));
-  });
+  // Scroll reveal is progressive enhancement. A plugin has no component
+  // instance, so drive it from app hooks: app:mounted covers initial
+  // hydration (including prerendered pages, where page:finish can fire
+  // before mount or not at all), page:finish covers client navigations.
+  // initScrollReveal is idempotent and keeps one observer app-wide.
+  const { initScrollReveal } = useScrollReveal();
+  const run = () => nextTick(() => initScrollReveal());
+  nuxtApp.hook('app:mounted', run);
+  nuxtApp.hook('page:finish', run);
 
   // Initialize parallax globally
   useParallax();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.4.15",
+  "version": "1.5.1",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",