maverick-wave 5.10.0 → 5.11.0

package/.claude/skills/mw-maverick-wave/SKILL.md

@@ -44,14 +44,14 @@ Load the one you need - do not read them all up front.
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.9.0/maverick-wave.min.css"
+  href="https://cdn.jsdelivr.net/npm/maverick-wave@5.11.0/maverick-wave.min.css"
 />
 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
 />
 ...
-<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.9.0/maverick-wave.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.11.0/maverick-wave.min.js"></script>
 ```
 
 Pin the version. The JS file is optional and only for server-rendered/static pages -
@@ -265,7 +265,7 @@ feature frame) ·
 `mw-section` (+ `mw-section-intro`) · `mw-page-header` · `mw-grid-*` ·
 `mw-columns-2/3` · `mw-row-split` · `mw-hero` (+ `mw-scroll-hint`, `-end`) ·
 `mw-parallax` (+ `-media`, `-content`, `-dimmed`, `-sticky`, `-rise`,
-`-pattern`) · `mw-footer`
+`-slow`, `-pattern`) · `mw-footer`
 
 **Utilities** (`references/layout.md`) `mw-sr-only` / `mw-sr-only-focusable` /
 `mw-skip-link` · `mw-row-split` (+ `center`) · `mw-text-numeric` /
@@ -424,4 +424,6 @@ feature frame) ·
     reaches that content as a _sibling_. Put the class on the hero itself and
     nothing pins and nothing covers - no error, no effect, and the picture shows
     through every transparent section below. `mw-parallax` and the
-    `mw-parallax-media` child stay where the image is: on the container.
+    `mw-parallax-media` child stay where the image is: on the container. Same
+    split for `mw-parallax-slow`, and `--mw-parallax-slow-travel` goes with the
+    class on the section - on the inner block it never reaches the animation.

package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md

@@ -20,7 +20,7 @@ accordion FAQ.
 
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.9.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.11.0/maverick-wave.min.css"
     />
     <link
       rel="stylesheet"
@@ -487,7 +487,7 @@ accordion FAQ.
       <div class="mw-modal-backdrop" onclick="closeModal('demo')"></div>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.9.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.11.0/maverick-wave.min.js"></script>
     <script>
       // The only thing the shipped script does not cover: opening a modal.
       // Closing works through .mw-modal-close, the backdrop is wired above.

package/.claude/skills/mw-maverick-wave/references/javascript.md

@@ -47,23 +47,23 @@ classes are the entire contract.
 | Color swatches      | Showcase-only (prints computed hex values); exposes `window.mwRefreshColorSwatches` to read them again after a root colour changed                                                                                                                                              | Not needed                                                                                                                                                                                                                   |
 | Dropdown            | Delegated to the document: closes the open `mw-dropdown` on Escape, on a click elsewhere and on a click on a `mw-dropdown-item`, and returns focus to the `summary`                                                                                                             | The `<details>` does the opening, the keyboard and the state on its own. Rebuild only the two behaviours markup cannot express - or bind `[attr.open]` and keep them in the component                                        |
 | Language switcher   | Keeps the trigger's flag and code in step with the chosen item, moves `mw-active` and `aria-current`, and fires `mw-language-change` (`detail: { lang, name }`) on the switcher                                                                                                 | Bind the trigger from your locale signal and switch the language in your own i18n service; the menu itself is a `<details>` and needs nothing                                                                                |
-| Scroll reveal       | Firefox only: an `IntersectionObserver` adds `mw-reveal-hidden` to what is still below the fold and swaps it for `mw-reveal-run` on entry, with an `animation-delay` per grid column                                                                                            | A directive per element - see `examples/angular-services.md`                                                                                                                                                                 |
-| Header reveal       | Firefox only: toggles `mw-header-away` and `mw-announcement-away` past 270px of scroll, and adds the transition class one frame later so the bar does not slide away on load                                                                                                    | The same two classes bound to a scroll signal, behind the same guard                                                                                                                                                         |
-| Parallax            | Firefox only: writes `--mw-parallax-progress` (0 to 1) on every `mw-parallax-media` from a `requestAnimationFrame` loop                                                                                                                                                         | The same, reading every layer's rect before writing to any of them                                                                                                                                                           |
+| Scroll reveal       | Older browsers only: an `IntersectionObserver` adds `mw-reveal-hidden` to what is still below the fold and swaps it for `mw-reveal-run` on entry, with an `animation-delay` per grid column                                                                                     | A directive per element - see `examples/angular-services.md`                                                                                                                                                                 |
+| Header reveal       | Older browsers only: toggles `mw-header-away` and `mw-announcement-away` past 270px of scroll, and adds the transition class one frame later so the bar does not slide away on load                                                                                             | The same two classes bound to a scroll signal, behind the same guard                                                                                                                                                         |
+| Parallax            | Older browsers only: writes `--mw-parallax-progress` (0 to 1) on every `mw-parallax-media` from a `requestAnimationFrame` loop                                                                                                                                                  | The same, reading every layer's rect before writing to any of them                                                                                                                                                           |
 
 ## Scroll-driven animations
 
 Four things ride the browser's own scroll timeline: `mw-reveal`,
-`mw-header-reveal`, `mw-parallax` and the `mw-progress-fill` scrub. In Chrome,
-Edge and Safari they need no script at all. Firefox ships no scroll timelines,
-so there - and only there - the shipped JS stands in for them. Each one checks
-`CSS.supports('animation-timeline', ...)` first and does nothing where the
-browser has it.
-
-Without the script Firefox loses the motion and nothing else: cards stand in
-place, the picture holds still. The exception is `mw-header-reveal`, where the
-bar then sits over the hero from the first paint - a layout difference, not a
-missing effect.
+`mw-header-reveal`, `mw-parallax` and the `mw-progress-fill` scrub. Chrome and
+Edge have had timelines since 115, Firefox since 158 and Safari since 26, and
+there they need no script at all. Older versions get the shipped JS instead.
+Each one checks `CSS.supports('animation-timeline', ...)` first and does nothing
+where the browser has it.
+
+Without the script an older browser loses the motion and nothing else: cards
+stand in place, the picture holds still. The exception is `mw-header-reveal`,
+where the bar then sits over the hero from the first paint - a layout
+difference, not a missing effect.
 
 ## Modals and progress bars
 

package/.claude/skills/mw-maverick-wave/references/layout.md

@@ -323,10 +323,10 @@ is taken on a phone. The bobbing stops under `prefers-reduced-motion`.
 **Parallax** - `mw-parallax` on the container plus a `mw-parallax-media` child
 moves the picture into its own layer. The container drops its own background and
 the layer reads `--mw-hero-background`, so the image stays configured in one
-place. Both modes run on the browser's scroll timeline, and on no
-`background-attachment: fixed`, which iOS ignores. Firefox has neither timeline;
-there the shipped JS moves the layers instead, and without it the picture simply
-sits still (`javascript.md`).
+place. Every mode runs on the browser's scroll timeline, and on no
+`background-attachment: fixed`, which iOS ignores. Older Safari and Firefox have
+no timelines; there the shipped JS moves the layers instead, and without it the
+picture simply sits still (`javascript.md`).
 
 ```html
 <header class="mw-header mw-header-reveal">...</header>
@@ -356,7 +356,9 @@ through the viewport, so its `view()` timeline stands still with it.
 `mw-parallax-rise` puts it at `12vh` and runs the layer on the document's own
 scroll instead - the picture lifts, the text stays put. That works out to the
 same travel per scrolled pixel as a drifting band at `20vh`, which is measured
-over a much longer range.
+over a much longer range. It is a hero move only: the range is the first screen
+of document scroll, so further down a page the picture holds still. Several
+pinned blocks on one page are fine, each takes over from the one before.
 
 A second `mw-parallax-media` carrying `mw-parallax-pattern` puts a pattern over
 the picture. It travels a third of the distance the layer below it does, and
@@ -370,7 +372,20 @@ reads `$mw-hero-image`; anywhere else set `--mw-parallax-pattern-image` on it.
 Outside a hero the same classes build a standalone band: `mw-parallax`
 (`min-height: 42vh`), `mw-parallax-media` as an `<img>` or a div with a
 background image, `mw-parallax-content` for what sits on top, and
-`mw-parallax-dimmed` to turn the picture down and the text light.
+`mw-parallax-dimmed` to turn the picture down and the text light. Drop the
+`mw-container` between section and block and the picture runs full width, with
+a `mw-container` inside `mw-parallax-content` around the text instead.
+
+`mw-parallax-slow` is the third mode and the one for a band mid-page: the block
+keeps its place in the flow and travels slower than the page, so picture and
+text are still moving while the next section closes in from below. Pinning is
+the same move with the tempo at zero. `--mw-parallax-slow-travel` (`45vh`) reads
+against the block's own height - half the height is half speed, the full height
+stands still, past it the block runs backwards. The dial belongs on the element
+carrying `mw-parallax-slow`, the height on the `mw-parallax` block inside it;
+put the dial on the inner block and it never reaches the animation. Everything
+after it gets the same page background and layer that a pinned block gives its
+siblings.
 
 Without scroll timelines, or under `prefers-reduced-motion`, the picture stands
 still and nothing else changes.

package/CHANGELOG.md

@@ -6,6 +6,16 @@ Patch releases are only for test purposes - here I only document major and minor
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.11.0] - 2026-09-13
+
+### Changed
+
+- showcase parallax effect
+
+### Fixed
+
+- small fixes
+
 ## [5.10.0] - 2026-09-13
 
 ### Fixed

package/README.md

@@ -42,12 +42,12 @@ The result is a framework that balances utility with simplicity, offering develo
     <title>My MaverickWave Project</title>
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.9.0/maverick-wave.min.css"
+      href="https://cdn.jsdelivr.net/npm/maverick-wave@5.11.0/maverick-wave.min.css"
     />
   </head>
   <body>
     <!-- Your content here -->
-    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.9.0/maverick-wave.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/maverick-wave@5.11.0/maverick-wave.min.js"></script>
   </body>
 </html>
 ```

package/index.html

@@ -97,6 +97,21 @@
           );
       }
 
+      /* The travel has to sit on the animated section, the height on the block
+         inside it */
+      .parallax-band-demo {
+        --mw-parallax-slow-travel: 60vh;
+      }
+
+      .parallax-band-demo .mw-parallax {
+        min-height: 75vh;
+      }
+
+      /* Reuses the hero picture through the token, not a second download */
+      .parallax-band-demo .mw-parallax-media {
+        background-image: var(--mw-hero-background);
+      }
+
       /* A calendar fills its container; across the full page that stretches the
          cells to 150px, so the demos get a realistic column instead */
       .calendar-demo {
@@ -701,6 +716,22 @@
         </div>
       </section>
 
+      <!-- Parallax band -->
+      <section class="mw-parallax-slow parallax-band-demo">
+        <div class="mw-parallax mw-parallax-dimmed">
+          <div class="mw-parallax-media"></div>
+          <div class="mw-parallax-content mw-text-center">
+            <div class="mw-container">
+              <h2>The page rides over the picture</h2>
+              <p class="mw-mb-0">
+                This band travels at a quarter of your scrolling. The components
+                close in from below.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <!-- Components section -->
       <section id="components" class="mw-section">
         <div class="mw-container">