Improve the Motion-family doc examples

[titouanmathis]

Stacked on #637 — this PR's base is feature/motion-autoplay-opt-in.

What

Titouan's feedback on the Motion-family documentation examples, in four points.

1. The dialog backdrop is animated too. In the MotionView ambient dialog story, the backdrop <div> was a static overlay. It is now a second MotionView (ambient-modal-backdrop), fading between opacity-0 and opacity-100 while keeping its Action close behaviour. Both instances join the same dialog lifecycle with zero wiring attributes, which shows that waitUntil() is additive: every transitioner that registers on the open/close event is awaited, so any number of them can animate one dialog without knowing about each other. Both view-transition groups now get an explicit z-index, so the backdrop group always stays under the box group.

2. A tighter data-bind:if wrapper. The MotionView wrapped the whole widget, checkbox included. It now sits just outside the <template data-bind:if>, inside the DataScope block. The bubbling dom-update event still reaches it, so the enter and exit transitions are unchanged, but the layout morph hugs the panel region alone.

3. Two more MotionScrollTimeline examples.

• Reading progress bar: a sticky bar over a long article, whose Motion child is scrubbed from scaleX: 0 to scaleX: 1 with origin-left. The offset is set to ["start start", "end end"] so progress follows the article's own scroll instead of the default entering-and-leaving range.
• Parallax layers: three Motion children over one range, travelling 80, 180 and 300 pixels. The timeline scrubs every child with the same progress, so depth comes from the keyframe distances alone.

4. A MotionSequence hero intro. A badge, a heading, a paragraph and a CTA entering as one autoplaying choreography. data-option-autoplay is on the sequence, never on the children, and the three positioning modes are mixed: DOM order, data-option-at="<" on the paragraph and the relative offset data-option-at="-0.2" on the button. No Action-driven replay story was added: the existing Staggered sequence example already covers play()/reverse() wiring.

Test plan

• npx prettier --write on every touched file, and prettier --check clean through npm run lint
• cd packages/docs && node scripts/validate-reference.ts → 66 Reference entries, 273 symbols, 5 concepts
• npm run lint → 0 errors, 20 warnings (unchanged from the base branch)
• npm run test -- -- Motion/ → 8 files, 58 tests passed

🤖 Generated with Claude Code

https://claude.ai/code/session_01FVXrJ8idMfvt667yJadvB8

[github-actions]

Code Review

Risk: Low — no blocking issues; safe to merge aside from nits.

Improves the Motion-family documentation with replayable mount examples, ambient backdrop and conditional-rendering transitions, scroll-timeline demos, and a MotionSequence hero choreography. The implementation changes are confined to documentation stories and their registration scripts.

Still open from earlier reviews (1 finding):

• packages/docs/reference/items/MotionScrollTimeline/stories/parallax-layers/app.twig:17 — nitpick: Match parallax distances to the documented travel values

---

Review usage: 78,168 in (57,918 cached) / 1,308 out tokens — $0.0195 (openrouter/openai/gpt-5.6-luna, thinking: low)

Reviewed by @weareikko/code-review v0.9.5 for commit 7c0cebb.

Previous review runs

Previous run archived 2026-08-13T14:54:40Z

Code Review

Risk: Low — The documentation examples are safe to merge, with one minor mismatch between the parallax example's stated distances and its keyframes.

Adds MotionView ambient backdrop and tighter conditional-rendering examples, two MotionScrollTimeline stories, and a MotionSequence hero-intro story. The examples demonstrate the intended lifecycle, scroll-scrubbing, and sequence-positioning APIs without changing library behavior.

1 issue(s) found:

• nitpick — packages/docs/reference/items/MotionScrollTimeline/stories/parallax-layers/app.twig:17 — Match parallax distances to the documented travel values

---

Review usage: 74,283 in (60,100 cached) / 1,794 out tokens — $0.0172 (openrouter/openai/gpt-5.6-luna, thinking: low)

Reviewed by @weareikko/code-review v0.9.5 for commit 3c34b7a.

[github-actions]

nitpick: Match parallax distances to the documented travel values

The keyframes move the disc from y: 80 to y: -80, resulting in 160 pixels of travel rather than the documented 80 pixels; the other layers likewise travel 360 and 600 pixels instead of 180 and 300. Use [0, 80], [0, 180], and [0, 300] (or update the documentation to describe the actual displacement).

Confidence: high.

---

_{Reviewed by @weareikko/code-review v0.9.5 for commit 3c34b7a.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.75%. Comparing base (19a5bfa) to head (7c0cebb).

Additional details and impacted files

@@                        Coverage Diff                        @@
##             feature/motion-autoplay-opt-in     #638   +/-   ##
=================================================================
  Coverage                             87.75%   87.75%           
  Complexity                              145      145           
=================================================================
  Files                                   153      153           
  Lines                                  5415     5415           
  Branches                               1030     1030           
=================================================================
  Hits                                   4752     4752           
  Misses                                  579      579           
  Partials                                 84       84           

Flag	Coverage Δ
unittests	87.75% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.