srcdev-nuxt-components 9.1.35 → 9.1.36

package/.claude/settings.json

@@ -18,36 +18,12 @@
       "Bash(git show:*)",
       "Edit(/.claude/skills/components/**)",
       "Bash(npx nuxi:*)",
-      "Bash(node -e \"const t = require\\('/Users/simoncornforth/websites/nuxt-components/node_modules/pinia-plugin-persistedstate'\\); console.log\\(Object.keys\\(t\\)\\)\")",
       "Bash(npx vue-tsc:*)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -5)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 16ac4ef --stat)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -8)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 --stat)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 -- \"*.vue\" \"*.css\")",
       "Bash(npm install:*)",
       "Bash(npm run:*)",
       "Bash(git add:*)",
-      "Bash(ls /Users/simoncornforth/websites/nuxt-components/*.md)",
       "Bash(gh release:*)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components status)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components add .claude/skills/components/services-section.md .claude/skills/components/services-section-grid.md .claude/skills/index.md app/components/03.organisms/services/services-grids/ServicesSectionGrid.vue app/components/03.organisms/services/services-section/ServicesSection.vue app/components/03.organisms/services/services-card/stories/ app/components/03.organisms/services/services-card/tests/ app/components/03.organisms/services/services-grids/stories/ app/components/03.organisms/services/services-grids/tests/ app/components/03.organisms/services/services-section/stories/ app/components/03.organisms/services/services-section/tests/)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components commit -m ':*)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline v9.1.22..HEAD)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline c401cea..HEAD)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 3058d63 --stat)",
-      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 0f99d7a --stat)",
       "Bash(node -e ':*)"
-    ],
-    "additionalDirectories": [
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",
-      "/Users/simoncornforth/websites/nuxt-components/.claude/skills",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/02.molecules/navigation/site-navigation/tests",
-      "/Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/app/pages",
-      "/Users/simoncornforth/websites/nuxt-components/app/assets/styles/extends-layer",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms",
-      "/private/tmp",
-      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video"
     ]
   }
 }

package/.claude/settings.local.json

@@ -7,7 +7,35 @@
       "Bash(grep '\"\"typescript\"\"' package.json)",
       "Bash(grep '\"\"@vue/language-server\\\\|@volar\\\\|vue-tsc\"\"' package.json)",
       "Bash(npx nuxi prepare)",
-      "Bash(ls -la /Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/.env*)"
+      "Bash(ls -la /Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/.env*)",
+      "Bash(node -e \"const t = require\\('/Users/simoncornforth/websites/nuxt-components/node_modules/pinia-plugin-persistedstate'\\); console.log\\(Object.keys\\(t\\)\\)\")",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -5)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 16ac4ef --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline -8)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 5597a15 -- \"*.vue\" \"*.css\")",
+      "Bash(ls /Users/simoncornforth/websites/nuxt-components/*.md)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components status)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components add .claude/skills/components/services-section.md .claude/skills/components/services-section-grid.md .claude/skills/index.md app/components/03.organisms/services/services-grids/ServicesSectionGrid.vue app/components/03.organisms/services/services-section/ServicesSection.vue app/components/03.organisms/services/services-card/stories/ app/components/03.organisms/services/services-card/tests/ app/components/03.organisms/services/services-grids/stories/ app/components/03.organisms/services/services-grids/tests/ app/components/03.organisms/services/services-section/stories/ app/components/03.organisms/services/services-section/tests/)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components commit -m ':*)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline v9.1.22..HEAD)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components log --oneline c401cea..HEAD)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 3058d63 --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components show 0f99d7a --stat)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components diff app/components/parallax/SectionParallax.vue)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components diff HEAD app/components/parallax/SectionParallax.vue)",
+      "Bash(git -C /Users/simoncornforth/websites/nuxt-components diff --cached)"
+    ],
+    "additionalDirectories": [
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/content-wrappers/content-width",
+      "/Users/simoncornforth/websites/nuxt-components/.claude/skills",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/02.molecules/navigation/site-navigation/tests",
+      "/Users/simoncornforth/websites/luxury-locs-by-natasha-nuxt3/app/pages",
+      "/Users/simoncornforth/websites/nuxt-components/app/assets/styles/extends-layer",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms",
+      "/private/tmp",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/banner-video",
+      "/Users/simoncornforth/websites/nuxt-components/app/components/01.atoms/scroll-parallax-section"
     ]
   }
 }

package/.claude/skills/components/scroll-parallax-section.md

@@ -0,0 +1,148 @@
+---
+name: ScrollParallaxSection
+description: ScrollParallaxSection JS-driven parallax background section — props, CSS height token, slot usage, parallaxStrength guide, reduced-motion, vs ScrollRevealFrame
+type: reference
+---
+
+# ScrollParallaxSection
+
+## Overview
+
+`ScrollParallaxSection` is a full-width section with a parallax background image driven by `requestAnimationFrame` and `IntersectionObserver`. The background image bleeds beyond the container bounds and is translated vertically as the component scrolls through the viewport.
+
+Use this component for **full-width decorative background sections** — hero banners, dividers, and atmospheric breaks between content. For arbitrary slot content that itself needs to pan (grids of images, video), use `ScrollRevealFrame` instead.
+
+### How it works
+
+- The root element is a fixed-height container with `overflow: hidden`.
+- `.scroll-parallax-section__bg` is positioned absolutely with a negative inset (derived from `parallaxStrength`) so the image bleeds beyond the frame top and bottom, ensuring full coverage at all scroll positions.
+- On scroll/resize, a `requestAnimationFrame` callback reads `getBoundingClientRect()` and sets `translateY` on the background element.
+- An `IntersectionObserver` pauses the RAF loop when the component is offscreen, reducing CPU usage.
+- The background layer uses `will-change: transform` for GPU compositing.
+
+### Difference from ScrollRevealFrame / ScrollRevealImage
+
+| | `ScrollParallaxSection` | `ScrollRevealFrame` / `ScrollRevealImage` |
+|---|---|---|
+| Mechanism | JS (RAF + IntersectionObserver) | CSS Scroll-driven Animations |
+| Browser support | All modern + older browsers | Chrome 115+, Firefox 114+, Safari 17.2+ |
+| Content | Background image only (slot above) | Slot content pans as a unit |
+| Use case | Full-width decorative background sections | Clipping frames with panning image/content |
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tag` | `"div" \| "section" \| "article" \| "aside"` | `"div"` | HTML element rendered as the container. Use `"section"` for landmark regions. |
+| `backgroundImage` | `string` | — | **Required.** Path or URL of the background image. Passed via CSS `background-image`. |
+| `parallaxStrength` | `number` | `1` | Multiplier for the parallax movement and image bleed. `0` = no movement, `1` = standard, `2` = very dramatic. See the guide below. |
+| `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes applied to the root element. |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Content placed above the parallax background at `z-index: 1`. |
+
+## CSS custom properties
+
+Height is controlled entirely via CSS — there is no `height` prop.
+
+| Property | Default | Description |
+|----------|---------|-------------|
+| `--scroll-parallax-section-height` | `25svh` | Height of the visible section. Set on the component or a parent wrapper. |
+
+## Basic usage
+
+```vue
+<ScrollParallaxSection background-image="/images/banners/banner-mid-brown.webp" />
+```
+
+## With slot content
+
+Slot content is layered at `z-index: 1` above the parallax background. Use flexbox or grid on the root element (via `styleClassPassthrough` or an inline style) to position it.
+
+```vue
+<ScrollParallaxSection
+  background-image="/images/banners/banner-ginger.webp"
+  :parallax-strength="0.8"
+  tag="section"
+  style="
+    --scroll-parallax-section-height: 40svh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  "
+>
+  <h2 style="color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.5);">Section heading</h2>
+</ScrollParallaxSection>
+```
+
+## Custom height via CSS override
+
+Override the height in a scoped stylesheet — useful for responsive breakpoints.
+
+```css
+.my-page {
+  .scroll-parallax-section {
+    --scroll-parallax-section-height: 20svh;
+
+    @media (width >= 768px) {
+      --scroll-parallax-section-height: 35svh;
+    }
+
+    @media (width >= 1200px) {
+      --scroll-parallax-section-height: 25svh;
+    }
+  }
+}
+```
+
+## Choosing parallaxStrength
+
+`parallaxStrength` controls two things simultaneously:
+
+1. **Movement** — how far the background travels per pixel of scroll.
+2. **Image bleed** — the negative inset applied to `.scroll-parallax-section__bg`. The inset is calculated as `ceil(parallaxStrength × 100)%`, ensuring the image always fills the frame even at extremes of the scroll position.
+
+| `parallaxStrength` | Character | Inset |
+|---|---|---|
+| `0` | No movement (static background) | `0%` |
+| `0.3–0.5` | Subtle — good for text-heavy sections | `30–50%` |
+| `1` (default) | Standard parallax feel | `100%` |
+| `1.5–2` | Dramatic — large image travel | `150–200%` |
+
+Values above `2` are rarely useful and increase layout memory cost.
+
+## Reduced motion
+
+The component does not yet implement a `prefers-reduced-motion` media query. If your consuming app needs to respect user motion preferences, disable the parallax effect by setting `parallaxStrength` to `0` and watching the CSS media feature:
+
+```vue
+<script setup lang="ts">
+const prefersReducedMotion = ref(false);
+
+onMounted(() => {
+  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+  prefersReducedMotion.value = mq.matches;
+  mq.addEventListener("change", (e) => {
+    prefersReducedMotion.value = e.matches;
+  });
+});
+</script>
+
+<template>
+  <ScrollParallaxSection
+    background-image="/images/banner.webp"
+    :parallax-strength="prefersReducedMotion ? 0 : 1"
+  />
+</template>
+```
+
+## Notes
+
+- `backgroundImage` is passed through `v-bind()` as a CSS `background-image` value. The image is not processed by `@nuxt/image` — use a path under `public/` or a full URL.
+- `overflow: hidden` is on the root element. Content that needs to escape (dropdowns, tooltips) must be portalled outside.
+- The background layer uses `background-position: center` and `background-size: cover`. The focal point cannot be changed per-prop — override `background-position` in CSS if needed.
+- Multiple `ScrollParallaxSection` instances on the same page each run independent observers and RAF loops. They pause individually when offscreen.
+- Do not nest `ScrollParallaxSection` inside a container with CSS `transform` — this creates a new stacking context and breaks the `getBoundingClientRect` viewport calculation.

package/.claude/skills/index.md

@@ -68,6 +68,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── input-copy-core.md      — InputCopyCore: readonly copy-to-clipboard input; props, emits, slots, CSS classes, usage
     ├── banner-video.md         — BannerVideo: full-width hero video banner, depth tier system, objectFit/objectPosition, reduced-motion fallback, CSS tokens
     ├── grid-stack.md           — GridStack: CSS Grid z-axis stacking, slot API, z-order rules, sizing, video+overlay and image+text patterns
+    ├── scroll-parallax-section.md — ScrollParallaxSection: JS-driven parallax background section, parallaxStrength guide, height token, reduced-motion pattern
     ├── scroll-reveal-frame.md  — ScrollRevealFrame: generic parallax clipping frame, slot API, image grid pattern, CSS tokens, browser support
     ├── scroll-reveal-image.md  — ScrollRevealImage: single-image parallax reveal, focalX, imgWidth/imgHeight, responsive frame height
     ├── site-navigation.md      — SiteNavigation: responsive nav with auto-collapse, burger menu, decorator indicators, CSS token API

package/app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import { nextTick } from "vue";
 import BannerVideo from "../BannerVideo.vue";
 
 const defaultProps = {
@@ -41,9 +40,9 @@ describe("BannerVideo", () => {
 
   // ─── Root element ────────────────────────────────────────────────────────
 
-  it("renders a <section> as the root element by default", async () => {
+  it("renders a <div> as the root element by default", async () => {
     const wrapper = await mountSuspended(BannerVideo, { props: defaultProps });
-    expect(wrapper.element.tagName).toBe("SECTION");
+    expect(wrapper.element.tagName).toBe("DIV");
   });
 
   it("renders the specified tag as root", async () => {
@@ -194,15 +193,12 @@ describe("BannerVideo", () => {
     expect(wrapper.attributes("data-depth")).toBe("md");
   });
 
-  it.each(["xs", "sm", "md", "lg", "xl"] as const)(
-    "sets data-depth to %s when depth prop is %s",
-    async (depth) => {
-      const wrapper = await mountSuspended(BannerVideo, {
-        props: { ...defaultProps, depth },
-      });
-      expect(wrapper.attributes("data-depth")).toBe(depth);
-    }
-  );
+  it.each(["xs", "sm", "md", "lg", "xl"] as const)("sets data-depth to %s when depth prop is %s", async (depth) => {
+    const wrapper = await mountSuspended(BannerVideo, {
+      props: { ...defaultProps, depth },
+    });
+    expect(wrapper.attributes("data-depth")).toBe(depth);
+  });
 
   // ─── CSS custom properties ───────────────────────────────────────────────
 
@@ -261,7 +257,10 @@ describe("BannerVideo", () => {
   });
 
   it("reflects verticalPosition prop in --_align-self", async () => {
-    for (const [prop, expected] of [["start", "start"], ["end", "end"]] as const) {
+    for (const [prop, expected] of [
+      ["start", "start"],
+      ["end", "end"],
+    ] as const) {
       const wrapper = await mountSuspended(BannerVideo, {
         props: { ...defaultProps, verticalPosition: prop },
       });
@@ -276,7 +275,10 @@ describe("BannerVideo", () => {
   });
 
   it("reflects horizontalPosition prop in --_justify-self", async () => {
-    for (const [prop, expected] of [["start", "start"], ["end", "end"]] as const) {
+    for (const [prop, expected] of [
+      ["start", "start"],
+      ["end", "end"],
+    ] as const) {
       const wrapper = await mountSuspended(BannerVideo, {
         props: { ...defaultProps, horizontalPosition: prop },
       });

package/app/components/01.atoms/banner-video/tests/__snapshots__/BannerVideo.spec.ts.snap

@@ -1,13 +1,13 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BannerVideo > renders correct HTML structure (all props set) 1`] = `
-"<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+"<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
     <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
-  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
+  </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
 `;
 
 exports[`BannerVideo > renders correct HTML structure (default props) 1`] = `
-"<section class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+"<div class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
     <source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
-  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></section>"
+  </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></div>"
 `;

package/app/components/01.atoms/scroll-parallax-section/ScrollParallaxSection.vue

@@ -0,0 +1,108 @@
+<template>
+  <component :is="tag" ref="containerRef" class="scroll-parallax-section" :class="[elementClasses]">
+    <div ref="bgRef" class="scroll-parallax-section__bg"></div>
+    <div class="scroll-parallax-section__content">
+      <slot></slot>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "section" | "article" | "aside";
+  backgroundImage: string;
+  parallaxStrength?: number;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  parallaxStrength: 1,
+  styleClassPassthrough: () => [],
+});
+
+const containerRef = useTemplateRef<HTMLElement>("containerRef");
+const bgRef = useTemplateRef<HTMLElement>("bgRef");
+
+const bgImage = computed(() => `url("${props.backgroundImage}")`);
+const bgInset = computed(() => `-${Math.ceil(props.parallaxStrength * 100)}% 0`);
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
+
+let rafId: number | null = null;
+let isVisible = false;
+let observer: IntersectionObserver | null = null;
+
+function updateParallax() {
+  if (!bgRef.value || !containerRef.value) return;
+  const rect = containerRef.value.getBoundingClientRect();
+  const viewportCenter = window.innerHeight / 2;
+  const elementCenter = rect.top + rect.height / 2;
+  const offset = (viewportCenter - elementCenter) * props.parallaxStrength;
+  bgRef.value.style.transform = `translate3d(0, ${offset}px, 0)`;
+}
+
+function onScroll() {
+  if (!isVisible || rafId !== null) return;
+  rafId = requestAnimationFrame(() => {
+    updateParallax();
+    rafId = null;
+  });
+}
+
+onMounted(() => {
+  updateParallax();
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      isVisible = entries[0]!.isIntersecting;
+      if (isVisible) updateParallax();
+    },
+    { rootMargin: "50px" }
+  );
+
+  if (containerRef.value) observer.observe(containerRef.value);
+
+  window.addEventListener("scroll", onScroll, { passive: true });
+  window.addEventListener("resize", onScroll, { passive: true });
+});
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", onScroll);
+  window.removeEventListener("resize", onScroll);
+  if (rafId !== null) cancelAnimationFrame(rafId);
+  observer?.disconnect();
+});
+</script>
+
+<style lang="css">
+@layer components {
+  .scroll-parallax-section {
+    --scroll-parallax-section-height: 25svh;
+    height: var(--scroll-parallax-section-height);
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    .scroll-parallax-section__bg {
+      position: absolute;
+      inset: v-bind(bgInset);
+      background-image: v-bind(bgImage);
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      will-change: transform;
+    }
+
+    .scroll-parallax-section__content {
+      position: relative;
+      z-index: 1;
+    }
+  }
+}
+</style>

package/app/components/01.atoms/scroll-parallax-section/stories/ScrollParallaxSection.stories.ts

@@ -0,0 +1,151 @@
+import ScrollParallaxSection from "../ScrollParallaxSection.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof ScrollParallaxSection> = {
+  title: "Atoms/Effects/ScrollParallaxSection",
+  component: ScrollParallaxSection,
+  argTypes: {
+    tag: {
+      control: "select",
+      options: ["div", "section", "article", "aside"],
+      description: "HTML element rendered as the container",
+      table: { category: "Layout" },
+    },
+    backgroundImage: {
+      control: "text",
+      description: "Path or URL of the background image",
+      table: { category: "Image" },
+    },
+    parallaxStrength: {
+      control: { type: "range", min: 0, max: 2, step: 0.1 },
+      description:
+        "Multiplier for the parallax offset. 0 = no movement, 1 = standard, 2 = very dramatic. Also controls the image bleed (inset) so the full image fills the frame at all scroll positions.",
+      table: { category: "Layout" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A section with a fixed-background parallax effect implemented via `requestAnimationFrame` and `IntersectionObserver`. The background image bleeds beyond the container bounds and is translated vertically as the component scrolls through the viewport. Height is controlled via the `--scroll-parallax-section-height` CSS custom property (default `25svh`). Slot content is layered above the background at `z-index: 1`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollParallaxSection>;
+
+const scrollWrapper = (inner: string) => `
+  <div style="padding-block: 60vh; max-width: 960px; margin-inline: auto;">
+    <p style="text-align: center; font-size: 1.4rem; opacity: 0.5; margin-block-end: 4rem;">Scroll to see the parallax effect</p>
+    ${inner}
+  </div>
+`;
+
+export const Default: Story = {
+  args: {
+    backgroundImage: "/images/banners/banner-mid-brown.webp",
+    parallaxStrength: 1,
+    tag: "div",
+  },
+  render: (args) => ({
+    components: { ScrollParallaxSection },
+    setup() {
+      return { args };
+    },
+    template: scrollWrapper(`<ScrollParallaxSection v-bind="args" />`),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Default configuration — standard parallax strength with no slot content.",
+      },
+    },
+  },
+};
+
+export const SubtleEffect: Story = {
+  args: {
+    backgroundImage: "/images/banners/banner-light-brunette.webp",
+    parallaxStrength: 0.4,
+    tag: "div",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "A low parallaxStrength (0.4) gives a gentle, understated movement — good for hero banners where content legibility matters.",
+      },
+    },
+  },
+};
+
+export const DramaticEffect: Story = {
+  args: {
+    backgroundImage: "/images/banners/banner-ginger.webp",
+    parallaxStrength: 1.8,
+    tag: "div",
+  },
+  render: Default.render,
+  parameters: {
+    docs: {
+      description: {
+        story: "A high parallaxStrength (1.8) creates a dramatic sweep — the image travels a much larger distance relative to the scroll position.",
+      },
+    },
+  },
+};
+
+export const WithSlotContent: Story = {
+  args: {
+    backgroundImage: "/images/page/hero/hero-dark.jpg",
+    parallaxStrength: 1,
+    tag: "section",
+  },
+  render: (args) => ({
+    components: { ScrollParallaxSection },
+    setup() {
+      return { args };
+    },
+    template: scrollWrapper(`
+      <ScrollParallaxSection v-bind="args" style="--scroll-parallax-section-height: 40svh; display: flex; align-items: center; justify-content: center;">
+        <p style="color: white; font-size: 2.4rem; font-weight: 600; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.6); padding: 2rem;">
+          Slot content sits above the parallax background
+        </p>
+      </ScrollParallaxSection>
+    `),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "Slot content is placed at `z-index: 1` above the parallax layer. Height is increased via the `--scroll-parallax-section-height` CSS custom property to accommodate the text.",
+      },
+    },
+  },
+};
+
+export const TallSection: Story = {
+  args: {
+    backgroundImage: "/images/page/hero/hero-blonde.jpg",
+    parallaxStrength: 1,
+    tag: "div",
+  },
+  render: (args) => ({
+    components: { ScrollParallaxSection },
+    setup() {
+      return { args };
+    },
+    template: scrollWrapper(`<ScrollParallaxSection v-bind="args" style="--scroll-parallax-section-height: 60svh;" />`),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: "The `--scroll-parallax-section-height` custom property overrides the default `25svh` height. Here it is set to `60svh` for a tall banner.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/scroll-parallax-section/tests/ScrollParallaxSection.spec.ts

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ScrollParallaxSection from "../ScrollParallaxSection.vue";
+
+describe("ScrollParallaxSection", () => {
+  beforeEach(() => {
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+      cb(0);
+      return 0;
+    });
+    vi.stubGlobal("cancelAnimationFrame", vi.fn());
+  });
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ScrollParallaxSection, {
+      props: { backgroundImage: "/img/bg.jpg" },
+    });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the bg and content divs", async () => {
+    const wrapper = await mountSuspended(ScrollParallaxSection, {
+      props: { backgroundImage: "/img/bg.jpg" },
+    });
+    expect(wrapper.find(".scroll-parallax-section__bg").exists()).toBe(true);
+    expect(wrapper.find(".scroll-parallax-section__content").exists()).toBe(true);
+  });
+
+  it("renders slot content inside __content", async () => {
+    const wrapper = await mountSuspended(ScrollParallaxSection, {
+      props: { backgroundImage: "/img/bg.jpg" },
+      slots: { default: "<p>Hello</p>" },
+    });
+    expect(wrapper.find(".scroll-parallax-section__content p").text()).toBe("Hello");
+  });
+
+  it("renders as the given tag", async () => {
+    const wrapper = await mountSuspended(ScrollParallaxSection, {
+      props: { backgroundImage: "/img/bg.jpg", tag: "section" },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("section");
+  });
+
+  it("defaults to div tag", async () => {
+    const wrapper = await mountSuspended(ScrollParallaxSection, {
+      props: { backgroundImage: "/img/bg.jpg" },
+    });
+    expect(wrapper.element.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("applies styleClassPassthrough classes", async () => {
+    const wrapper = await mountSuspended(ScrollParallaxSection, {
+      props: { backgroundImage: "/img/bg.jpg", styleClassPassthrough: "my-custom-class" },
+    });
+    expect(wrapper.classes()).toContain("my-custom-class");
+  });
+
+  it("adds and removes scroll and resize listeners on mount/unmount", async () => {
+    const addSpy = vi.spyOn(window, "addEventListener");
+    const removeSpy = vi.spyOn(window, "removeEventListener");
+
+    const wrapper = await mountSuspended(ScrollParallaxSection, {
+      props: { backgroundImage: "/img/bg.jpg" },
+    });
+
+    expect(addSpy).toHaveBeenCalledWith("scroll", expect.any(Function), { passive: true });
+    expect(addSpy).toHaveBeenCalledWith("resize", expect.any(Function), { passive: true });
+
+    wrapper.unmount();
+
+    expect(removeSpy).toHaveBeenCalledWith("scroll", expect.any(Function));
+    expect(removeSpy).toHaveBeenCalledWith("resize", expect.any(Function));
+  });
+
+  it("updates bg transform on scroll", async () => {
+    const wrapper = await mountSuspended(ScrollParallaxSection, {
+      props: { backgroundImage: "/img/bg.jpg", parallaxStrength: 0.3 },
+    });
+
+    const bg = wrapper.find(".scroll-parallax-section__bg").element as HTMLElement;
+
+    Object.defineProperty(wrapper.element, "offsetTop", { value: 400, configurable: true });
+    Object.defineProperty(wrapper.element, "offsetHeight", { value: 600, configurable: true });
+
+    window.dispatchEvent(new Event("scroll"));
+    await nextTick();
+
+    expect(bg.style.transform).toMatch(/translate3d\(/);
+  });
+});

package/app/components/parallax/SectionParallax.vue

@@ -5,21 +5,15 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "div",
-    validator(value: string) {
-      return ["div", "section", "article", "aside"].includes(value);
-    },
-  },
-  backgroundImage: {
-    type: String,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
+interface Props {
+  tag?: "div" | "section" | "article" | "aside";
+  backgroundImage: string;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  styleClassPassthrough: () => [],
 });
 
 const slots = useSlots();
@@ -38,25 +32,25 @@ watch(
 
 <style lang="css">
 @layer components {
-.section-parallax {
-  /* Component styles */
-
-  min-height: 100svh;
-  background-image: v-bind(backgroundImage);
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  position: relative;
-
-  background-color: light-dark(var(--slate-01), var(--slate-08));
-  width: 100%;
-
-  @media (hover: hover) and (pointer: fine) {
-    @supports (background-attachment: fixed) {
-      background-attachment: fixed;
-      min-height: 120vh;
+  .section-parallax {
+    /* Component styles */
+
+    min-height: 100svh;
+    background-image: v-bind(backgroundImage);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    position: relative;
+
+    background-color: light-dark(var(--slate-01), var(--slate-08));
+    width: 100%;
+
+    @media (hover: hover) and (pointer: fine) {
+      @supports (background-attachment: fixed) {
+        background-attachment: fixed;
+        min-height: 120vh;
+      }
     }
   }
 }
-}
 </style>

package/app/layouts/default.vue

@@ -68,6 +68,7 @@ const responsiveNavLinks = {
         { name: "Banner", path: "/ui/display-banner" },
         { name: "Banner Video", path: "/banner-video" },
         { name: "Section Parallax", path: "/ui/section-parallax" },
+        { name: "Scroll Parallax Section", path: "/ui/scroll-parallax-section" },
         { name: "Animated SVG Text", path: "/ui/animated-svg-text" },
         { name: "Carousel (Basic)", path: "/ui/carousel-basic" },
         { name: "Carousel (Infinite)", path: "/ui/carousel-infinite" },

package/app/pages/ui/scroll-parallax-section.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <NuxtLayout name="default">
+      <template #layout-content>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
+          <h1 class="page-heading-1">ScrollParallaxSection Component</h1>
+          <p class="mbe-12">
+            JS-driven fixed background — works on all devices including iOS and Safari. The background image stays
+            fixed in the viewport while the section scrolls past it, replicating <code>background-attachment: fixed</code>.
+          </p>
+        </LayoutRow>
+        <ScrollParallaxSection
+          tag="section"
+          background-image="/images/rotating-carousel/image-3.webp"
+          :style-class-passthrough="['mbe-20']"
+        >
+          <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['expanding-panel-section']">
+            <h2 class="page-heading-1">First Section</h2>
+            <p class="page-body-normal">Scroll down to see the parallax effect in action.</p>
+            <p class="page-body-normal">The background image moves slower than the page, creating a depth effect.</p>
+          </LayoutRow>
+        </ScrollParallaxSection>
+        <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
+          <h2 class="page-heading-2">Between sections</h2>
+          <p class="page-body-normal">Regular page content between two parallax sections.</p>
+        </LayoutRow>
+        <ScrollParallaxSection
+          tag="section"
+          background-image="/images/rotating-carousel/image-1.webp"
+          :style-class-passthrough="['mbe-20']"
+        >
+          <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['expanding-panel-section']">
+            <h2 class="page-heading-1">Second Section</h2>
+            <p class="page-body-normal">A second section to demonstrate multiple fixed-background sections on the same page.</p>
+          </LayoutRow>
+        </ScrollParallaxSection>
+      </template>
+    </NuxtLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: false,
+});
+
+useHead({
+  title: "ScrollParallaxSection Component",
+  meta: [
+    {
+      name: "description",
+      content: "JS-driven parallax background section — works on all devices including iOS and Safari.",
+    },
+  ],
+  bodyAttrs: {
+    class: "scroll-parallax-section-page",
+  },
+});
+</script>
+
+<style lang="css">
+.scroll-parallax-section-page {
+  margin-block-end: 100vh;
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.1.35",
+  "version": "9.1.36",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",