srcdev-nuxt-components 9.4.11 → 9.5.0

package/app/components/01.atoms/animations/entry/.nuxt/types/nitro-nuxt.d.ts

@@ -0,0 +1,64 @@
+
+/// <reference path="nitro-layouts.d.ts" />
+/// <reference path="app.config.d.ts" />
+/// <reference path="runtime-config.d.ts" />
+/// <reference path="../../../../../../../node_modules/@nuxt/nitro-server/dist/index.d.mts" />
+/// <reference path="middleware.d.ts" />
+
+import type { RuntimeConfig } from 'nuxt/schema'
+import type { H3Event } from 'h3'
+import type { LogObject } from 'consola'
+import type { NuxtIslandContext, NuxtIslandResponse, NuxtRenderHTMLContext } from 'nuxt/app'
+
+declare module 'nitropack' {
+  interface NitroRuntimeConfigApp {
+    buildAssetsDir: string
+    cdnURL: string
+  }
+  interface NitroRuntimeConfig extends RuntimeConfig {}
+  interface NitroRouteConfig {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+  }
+  interface NitroRouteRules {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+    appMiddleware?: Record<string, boolean>
+    appLayout?: string | false
+  }
+  interface NitroRuntimeHooks {
+    'dev:ssr-logs': (ctx: { logs: LogObject[], path: string }) => void | Promise<void>
+    'render:html': (htmlContext: NuxtRenderHTMLContext, context: { event: H3Event }) => void | Promise<void>
+    'render:island': (islandResponse: NuxtIslandResponse, context: { event: H3Event, islandContext: NuxtIslandContext }) => void | Promise<void>
+  }
+}
+declare module 'nitropack/types' {
+  interface NitroRuntimeConfigApp {
+    buildAssetsDir: string
+    cdnURL: string
+  }
+  interface NitroRuntimeConfig extends RuntimeConfig {}
+  interface NitroRouteConfig {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+  }
+  interface NitroRouteRules {
+    ssr?: boolean
+    noScripts?: boolean
+    /** @deprecated Use `noScripts` instead */
+    experimentalNoScripts?: boolean
+    appMiddleware?: Record<string, boolean>
+    appLayout?: string | false
+  }
+  interface NitroRuntimeHooks {
+    'dev:ssr-logs': (ctx: { logs: LogObject[], path: string }) => void | Promise<void>
+    'render:html': (htmlContext: NuxtRenderHTMLContext, context: { event: H3Event }) => void | Promise<void>
+    'render:island': (islandResponse: NuxtIslandResponse, context: { event: H3Event, islandContext: NuxtIslandContext }) => void | Promise<void>
+  }
+}

package/app/components/01.atoms/animations/entry/.nuxt/types/plugins.d.ts

@@ -0,0 +1,29 @@
+// Generated by Nuxt'
+import type { Plugin } from '#app'
+
+type Decorate<T extends Record<string, any>> = { [K in keyof T as K extends string ? `$${K}` : never]: T[K] }
+
+type InjectionType<A extends Plugin> = A extends {default: Plugin<infer T>} ? Decorate<T> : unknown
+
+type NuxtAppInjections = 
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/revive-payload.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/head/runtime/plugins/unhead.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/router.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/navigation-repaint.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/check-outdated-build.client.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/revive-payload.server.js")> &
+  InjectionType<typeof import("../../../../../../../node_modules/nuxt/dist/app/plugins/chunk-reload.client.js")>
+
+declare module '#app' {
+  interface NuxtApp extends NuxtAppInjections { }
+
+  interface NuxtAppLiterals {
+    pluginName: 'nuxt:revive-payload:client' | 'nuxt:head' | 'nuxt:router' | 'nuxt:revive-payload:server' | 'nuxt:chunk-reload' | 'nuxt:global-components'
+  }
+}
+
+declare module 'vue' {
+  interface ComponentCustomProperties extends NuxtAppInjections { }
+}
+
+export { }

package/app/components/01.atoms/animations/entry/.nuxt/types/runtime-config.d.ts

@@ -0,0 +1,32 @@
+import { RuntimeConfig as UserRuntimeConfig, PublicRuntimeConfig as UserPublicRuntimeConfig } from 'nuxt/schema'
+  interface SharedRuntimeConfig {
+   app: {
+      buildId: string,
+
+      baseURL: string,
+
+      buildAssetsDir: string,
+
+      cdnURL: string,
+   },
+
+   nitro: {
+      envPrefix: string,
+   },
+  }
+  interface SharedPublicRuntimeConfig {
+
+  }
+declare module '@nuxt/schema' {
+  interface RuntimeConfig extends UserRuntimeConfig {}
+  interface PublicRuntimeConfig extends UserPublicRuntimeConfig {}
+}
+declare module 'nuxt/schema' {
+  interface RuntimeConfig extends SharedRuntimeConfig {}
+  interface PublicRuntimeConfig extends SharedPublicRuntimeConfig {}
+}
+declare module 'vue' {
+        interface ComponentCustomProperties {
+          $config: UserRuntimeConfig
+        }
+      }

package/app/components/01.atoms/animations/entry/.nuxt/types/shared-imports.d.ts

@@ -0,0 +1,10 @@
+// Generated by auto imports
+export {}
+declare global {
+  const useRuntimeConfig: (event?: import('h3').H3Event) => import('nuxt/schema').RuntimeConfig
+  const useAppConfig: () => import('nuxt/schema').AppConfig
+  const defineAppConfig: <C extends import('nuxt/schema').AppConfigInput>(config: C) => C
+  const createError: typeof import('h3')['createError']
+  const setResponseStatus: typeof import('h3')['setResponseStatus']
+
+}

package/app/components/01.atoms/animations/entry/.nuxtrc

@@ -0,0 +1 @@
+setups.@nuxt/test-utils="4.1.0"

package/app/components/01.atoms/animations/entry/CONSUMER-STYLING.md

@@ -0,0 +1,65 @@
+# EntryAnimation — Consumer Styling Guide
+
+## Public token API
+
+None. EntryAnimation has no `<style>` block and no `--entry-animation-*` tokens. It only applies
+one of the shared animation utility classes; the keyframes, scroll timeline and
+`prefers-reduced-motion` guard live in
+`app/assets/styles/setup/06.utility-classes/animations/`, which don't expose tokens either.
+
+No private `--_` tokens.
+
+---
+
+## State hooks
+
+| Class | When |
+|---|---|
+| `.entry-slide-in` | `animation-type="entry-slide-in"` (default) and `skip-animation` is off |
+| `.entry-zoom-reveal` | `animation-type="entry-zoom-reveal"` and `skip-animation` is off |
+| `.entry-exit-blur` | `animation-type="entry-exit-blur"` and `skip-animation` is off |
+
+With `skip-animation`, none of these is applied. The root has no class of its own beyond these and
+any passthrough classes.
+
+> Changed 2026-09-27: the animation class used to be added once at setup, so changing
+> `animation-type` or `skip-animation` after mount left the old class in place. It's now bound
+> reactively.
+
+---
+
+## Motion
+
+- All three classes only animate inside `@media (prefers-reduced-motion: no-preference)`.
+- They use `animation-timeline: view(...)` (scroll-driven). In a browser without scroll-driven
+  animation support the animation completes immediately, so the content just appears in place.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** there are no tokens to set. To change the motion (distance, timeline range), override
+the utility class's `animation`/`animation-timeline` on your own passthrough class, inside the
+same `prefers-reduced-motion: no-preference` guard:
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  .my-card.entry-slide-in {
+    animation-timeline: view(60% 10%);
+  }
+}
+```
+
+---
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root element (the element that also carries the
+animation class). It's applied whether or not `skip-animation` is on. A plain `class` attribute
+falls through to the same element.

package/app/components/01.atoms/animations/entry/EntryAnimation.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" :class="[elementClasses]">
+  <component :is="tag" :class="[elementClasses, skipAnimation ? null : animationType]">
     <slot name="default"></slot>
   </component>
 </template>
@@ -20,9 +20,10 @@ const props = withDefaults(defineProps<Props>(), {
   styleClassPassthrough: () => [],
 });
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-if (!props.skipAnimation) {
-  updateElementClasses(props.animationType);
-}
+watch(
+  () => props.styleClassPassthrough,
+  () => resetElementClasses(props.styleClassPassthrough)
+);
 </script>

package/app/components/01.atoms/animations/entry/node_modules/.cache/nuxt/chrome-workspace.json

@@ -0,0 +1 @@
+{"uuid":"4bddd330-9d58-42dc-984e-629f2c5338a9"}

package/app/components/01.atoms/animations/entry/node_modules/.cache/vite/client/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -0,0 +1 @@
+{"version":"4.1.11","results":[[":tests/EntryAnimation.spec.ts",{"duration":0,"failed":true}]]}

package/app/components/01.atoms/animations/entry/stories/EntryAnimation.stories.ts

@@ -2,7 +2,7 @@ import EntryAnimation from "../EntryAnimation.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 
 const meta: Meta<typeof EntryAnimation> = {
-  title: "Components/Effects/EntryAnimation",
+  title: "Atoms/Effects/EntryAnimation",
   component: EntryAnimation,
   argTypes: {
     tag: {

package/app/components/01.atoms/animations/entry/tests/EntryAnimation.spec.ts

@@ -55,3 +55,28 @@ describe("EntryAnimation", () => {
     expect(wrapper.text()).toContain("Content");
   });
 });
+
+describe("EntryAnimation reactivity", () => {
+  it("swaps the animation class when animationType changes after mount", async () => {
+    wrapper = await wrapperFactory({ animationType: "entry-slide-in" });
+    await wrapper.setProps({ animationType: "entry-exit-blur" });
+    expect(wrapper.classes()).toContain("entry-exit-blur");
+    expect(wrapper.classes()).not.toContain("entry-slide-in");
+  });
+
+  it("removes and restores the animation class when skipAnimation toggles", async () => {
+    wrapper = await wrapperFactory();
+    await wrapper.setProps({ skipAnimation: true });
+    expect(wrapper.classes()).not.toContain("entry-slide-in");
+    await wrapper.setProps({ skipAnimation: false });
+    expect(wrapper.classes()).toContain("entry-slide-in");
+  });
+
+  it("updates classes when styleClassPassthrough changes", async () => {
+    wrapper = await wrapperFactory({ styleClassPassthrough: ["original"] });
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+    expect(wrapper.classes()).toContain("entry-slide-in");
+  });
+});

package/app/components/01.atoms/animations/glowing-border/CONSUMER-STYLING.md

@@ -17,6 +17,8 @@
 </GlowingBorder>
 ```
 
+---
+
 ## Variant colour stops
 
 Each `variant` drives a 5-stop conic gradient. Every stop is an individually overridable token,
@@ -39,11 +41,33 @@ named `--glowing-border-{variant}-color-{1-5}`:
 </GlowingBorder>
 ```
 
+---
+
 ## Motion
 
 The glow rotates continuously via CSS animation and stops automatically when the visitor has
 `prefers-reduced-motion: reduce` set.
 
+---
+
+## Internal (non-overridable) custom properties
+
+`--_glow-deg`, `--_clr-1` through `--_clr-5`, and `--_gradient-glow` are internal composition
+plumbing (the resolved per-variant colour stops and the animated rotation angle) — use the public
+tokens above instead.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+---
+
 ## Class passthrough
 
 Use `styleClassPassthrough` to add classes to the root element for layout purposes (positioning,
@@ -54,8 +78,3 @@ above.
 <GlowingBorder style-class-passthrough="my-glowing-border">...</GlowingBorder>
 ```
 
-## Internal (non-overridable) custom properties
-
-`--_glow-deg`, `--_clr-1` through `--_clr-5`, and `--_gradient-glow` are internal composition
-plumbing (the resolved per-variant colour stops and the animated rotation angle) — use the public
-tokens above instead.

package/app/components/01.atoms/animations/marquee-scroller/CONSUMER-STYLING.md

@@ -31,6 +31,8 @@
 }
 ```
 
+---
+
 ## High-contrast mode colours are not tokenised
 
 Under `prefers-contrast: high`, the control button switches to the system colour keywords
@@ -40,6 +42,8 @@ theme, which a component-level override would defeat. Only the border *width* in
 token (`--marquee-scroller-control-border-width`), since it's a plain dimension with no such
 constraint.
 
+---
+
 ## Item size and spacing are prop-driven, not tokens
 
 Item `width`/`height`/`gap` and the animation duration are set via the `itemConfig` and
@@ -53,6 +57,8 @@ layout math (`aspect-ratio`, track width). Override those through props:
 />
 ```
 
+---
+
 ## Item content via slots
 
 Each entry in `marqueeData` (`{ id, content }`) renders a slot named after its `id`. Provide the
@@ -69,6 +75,8 @@ markup for each item via that dynamically-named slot:
 </MarqueeScroller>
 ```
 
+---
+
 ## Control button icon and copy
 
 The pause/play button's icon and its `aria-label` copy are all overridable — see `playIcon`/
@@ -92,3 +100,15 @@ The pause/play button's icon and its `aria-label` copy are all overridable — s
   </template>
 </MarqueeScroller>
 ```
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a plain `class` on the
+component (it falls through to the root element)): they inherit down into the component. Keep the
+block **unlayered** (no `@layer` wrapper) so it beats the library's `@layer components`. If your own
+file uses `<style scoped>`, tokens set on your element still work, but selectors that reach inside
+the component need `:deep()`. Patterns and examples:
+`.claude/skills/component-local-style-override.md`.
+

package/app/components/01.atoms/animations/rotating-carousel-image/CONSUMER-STYLING.md

@@ -30,6 +30,8 @@
 }
 ```
 
+---
+
 ## High-contrast mode colours are not tokenised
 
 Under `prefers-contrast: high`, the control button switches to the system colour keywords
@@ -37,6 +39,8 @@ Under `prefers-contrast: high`, the control button switches to the system colour
 user's OS-level high-contrast theme. Only the border *width* in that mode is a token
 (`--rotating-carousel-control-border-width`).
 
+---
+
 ## Rotation geometry is prop-driven, not tokens
 
 `rotateX`, `perspective`, and `translateZ` control the 3D tilt and radius of the rotation and are
@@ -47,8 +51,21 @@ parallax math:
 <RotatingCarouselImage :data="images" :perspective="1200" :translate-z="1200" />
 ```
 
+---
+
 ## Control button icon and copy
 
 The pause/play button's icon and its `aria-label` copy are overridable via `playIcon`/`pauseIcon`/
 `playLabel`/`pauseLabel` props, or the `toggle-icon` slot for a fully custom icon (scoped with
 `isPaused`) — same pattern as `MarqueeScroller`.
+
+---
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the component need
+`:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+

package/app/components/01.atoms/animations/scroll-reveal-frame/CONSUMER-STYLING.md

@@ -0,0 +1,77 @@
+# ScrollRevealFrame — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Set by prop | Controls |
+|---|---|---|---|
+| `--scroll-reveal-frame-height` | `540px` | `frameHeight` | Height of the visible clipping frame |
+| `--scroll-reveal-frame-parallax-offset` | `36rem` | `parallaxOffset` | How much taller the content is than the frame, and so how far it travels |
+| `--scroll-reveal-frame-radius` | `0px` | `radius` | Frame `border-radius` (content is clipped to it) |
+
+Each prop, when passed, writes its token as an inline style on the root `<figure>`, which beats any
+CSS you set. Leave the prop off to control the value from CSS instead (e.g. per breakpoint). Props
+have no default of their own; the defaults above live in the CSS.
+
+> **Changed 2026-09-27**: these were private `--_frame-height`/`--_parallax-offset`/`--_radius`
+> tokens, always written inline from props that had defaults. Any CSS override (including the
+> responsive example the skill doc used to recommend) could never win against the inline style.
+> They're now public tokens, and the props only write them when passed.
+
+Private tokens (not public API): `--_parallax-offset` on `.scroll-reveal-frame-content`, which
+resolves the public offset once for both the content height and the keyframes.
+
+## State hooks
+
+No `data-*` attributes. Inner elements:
+
+- `.scroll-reveal-frame`: the root `<figure>` (clipping window, `overflow: hidden`, `margin: 0`).
+- `.scroll-reveal-frame-content`: the taller wrapper that pans; slot content fills it.
+
+> **Changed 2026-09-27**: renamed from the generic `.reveal-frame`/`.reveal-content`. The keyframes
+> (`scroll-reveal-frame-pan`) and view timeline (`--scroll-reveal-frame-timeline`) were renamed to
+> match.
+
+## Motion
+
+Driven by a CSS scroll-driven animation (`view-timeline` on the frame, `animation-timeline` on the
+content), running from the frame entering the viewport to it leaving. The content moves up by the
+parallax offset over that range. No JavaScript.
+
+Under `prefers-reduced-motion: reduce`, and in browsers without `animation-timeline` support, the
+animation is removed and the content is sized to the frame (a static crop).
+
+## Local overrides
+
+Set the tokens above on an element you own (a page or section class, or a class added with
+`:style-class-passthrough`): they inherit down into the component. Keep the block **unlayered** (no
+`@layer` wrapper) so it beats the library's `@layer components`. If your own file uses
+`<style scoped>`, tokens set on your element still work, but selectors that reach inside the
+component need `:deep()`. Patterns and examples: `.claude/skills/component-local-style-override.md`.
+
+**Caveat:** a prop you pass is written inline on the root and overrides these tokens, whether set on
+an ancestor or on the frame itself. To drive a value from CSS, don't pass its prop.
+
+## Recipe: responsive frame
+
+```css
+.welcome {
+  --scroll-reveal-frame-height: 320px;
+  --scroll-reveal-frame-parallax-offset: 20rem;
+
+  @media (width >= 768px) {
+    --scroll-reveal-frame-height: 540px;
+    --scroll-reveal-frame-parallax-offset: 36rem;
+  }
+}
+```
+
+```vue
+<section class="welcome">
+  <ScrollRevealFrame radius="1.6rem">...</ScrollRevealFrame>
+</section>
+```
+
+## Class passthrough
+
+`style-class-passthrough` adds classes to the root `<figure class="scroll-reveal-frame">`. It's
+reachable in normal use and is the simplest place to set the tokens for one instance.

package/app/components/01.atoms/animations/scroll-reveal-frame/ScrollRevealFrame.vue

@@ -1,59 +1,31 @@
 <template>
   <figure
-    class="reveal-frame"
+    class="scroll-reveal-frame"
     :class="[elementClasses]"
     :style="{
-      '--_frame-height': frameHeight,
-      '--_parallax-offset': parallaxOffset,
-      '--_radius': radius,
+      '--scroll-reveal-frame-height': frameHeight,
+      '--scroll-reveal-frame-parallax-offset': parallaxOffset,
+      '--scroll-reveal-frame-radius': radius,
     }"
   >
-    <div class="reveal-content">
+    <div class="scroll-reveal-frame-content">
       <slot></slot>
     </div>
   </figure>
 </template>
 
 <script setup lang="ts">
-/**
- * ScrollRevealFrame
- *
- * Generic clipping frame that pans its slot content vertically as it scrolls
- * through the viewport — driven entirely by CSS Scroll-driven Animations.
- * No scroll listeners, no JS animation.
- *
- * How it works:
- *   - The <figure> is a fixed-height clipping window (overflow: hidden).
- *   - It registers a named view-timeline scoped to itself.
- *   - The inner .reveal-content wrapper is taller than the frame by
- *     `parallaxOffset`, and animates translateY as the frame scrolls.
- *   - Any slot content (single image, grid, video, etc.) fills that wrapper.
- *
- * Browser support (as of 2026):
- *   Chrome 115+, Edge 115+, Firefox 114+, Safari 17.2+
- *   Falls back gracefully to a static cropped view in older browsers.
- *
- * For single-image use with NuxtImg optimisation and focal-point control,
- * use ScrollRevealImage instead — it wraps this component.
- */
-
 interface Props {
-  /** Height of the visible clipping frame. */
   frameHeight?: string;
-  /**
-   * How far the content travels vertically as the frame scrolls through the
-   * viewport. Larger = more content revealed = stronger parallax feel.
-   */
   parallaxOffset?: string;
-  /** Optional rounded corners on the frame. */
   radius?: string;
   styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  frameHeight: "540px",
-  parallaxOffset: "36rem",
-  radius: "0px",
+  frameHeight: undefined,
+  parallaxOffset: undefined,
+  radius: undefined,
   styleClassPassthrough: () => [],
 });
 
@@ -67,59 +39,46 @@ watch(
 
 <style lang="css">
 @layer components {
-  .reveal-frame {
-    /* Public tokens (overridable by consumer) */
-    --_frame-height: 540px;
-    --_parallax-offset: 36rem;
-    --_radius: 0px;
-
-    margin: 0; /* reset browser <figure> default margin */
+  .scroll-reveal-frame {
+    margin: 0;
     position: relative;
-    height: var(--_frame-height);
+    height: var(--scroll-reveal-frame-height, 540px);
     width: 100%;
     overflow: hidden;
-    border-radius: var(--_radius);
+    border-radius: var(--scroll-reveal-frame-radius, 0px);
 
-    /*
-     * Named view-timeline lets the child content reference this element's
-     * scroll progress rather than its own (which would be distorted by the
-     * artificially inflated height).
-     */
-    view-timeline: --reveal-frame-timeline block;
-  }
+    /* Named so the taller child animates on this element's progress, not its own. */
+    view-timeline: --scroll-reveal-frame-timeline block;
 
-  .reveal-content {
-    display: block;
-    width: 100%;
-    /*
-     * Content is taller than the frame by parallaxOffset so there is always
-     * content to travel into as the animation progresses.
-     */
-    height: calc(100% + var(--_parallax-offset));
+    .scroll-reveal-frame-content {
+      --_parallax-offset: var(--scroll-reveal-frame-parallax-offset, 36rem);
 
-    animation: reveal-pan linear both;
-    animation-timeline: --reveal-frame-timeline;
-    animation-range: entry 0% exit 100%;
-  }
+      display: block;
+      width: 100%;
+      height: calc(100% + var(--_parallax-offset));
 
-  @keyframes reveal-pan {
-    from { transform: translateY(0); }
-    to   { transform: translateY(calc(-1 * var(--_parallax-offset))); }
-  }
+      animation: scroll-reveal-frame-pan linear both;
+      animation-timeline: --scroll-reveal-frame-timeline;
+      animation-range: entry 0% exit 100%;
 
-  /* ── Fallback: browsers without Scroll-driven Animations ── */
-  @supports not (animation-timeline: scroll()) {
-    .reveal-content {
-      animation: none;
-      height: 100%;
+      @supports not (animation-timeline: scroll()) {
+        animation: none;
+        height: 100%;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        height: 100%;
+      }
     }
   }
 
-  /* ── Reduced-motion: static view, no travel ── */
-  @media (prefers-reduced-motion: reduce) {
-    .reveal-content {
-      animation: none;
-      height: 100%;
+  @keyframes scroll-reveal-frame-pan {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-1 * var(--_parallax-offset)));
     }
   }
 }