[jbspeakr]

Requested by Jan · project thread

What this changes

Review follow-up 8. The explorer used to animate a reveal. Now it plays the chain as one scene, as the blue16 explainer does. The motion is kept quiet: short ease-out entrances, colour changes and no movement on dimmed steps.

One timeline. A Web Animations API animation with no target is the scene clock. It holds the playhead. Play and Pause run it. Previous, Next, a new scrub bar in the stepper, the arrow keys, a click on a step and a click on a log line all move it. The current step is always the step under the playhead. The scrub bar's fill follows the clock while it plays.

Auto-advance (M6 amended). It is armed once per page. It starts after the chain has been in view for 1 s with no input, so a reader who is scrolling past is not interrupted. A step lasts 2.5 s. A hover (real mouse movement), touch, focus, wheel or key stops it for good, and it never restarts by itself. It never starts under reduced motion, and never when the URL already names a step. Play, once pressed, pauses on any click, key or scroll, as before.

Per step (M5, M7).

• The sender and the receiver light up in the actor head.
• The message draws in over 300 ms with ease-out, and the body rises 8 px over 220 ms.
• Earlier steps keep a quieter arrow, and later steps keep only a hairline. Dimming changes colour, not opacity, so text keeps its contrast. axe now runs while the scene is stepping.
• The claims that changed get their existing rail once the message has landed, 40 ms apart, over 480 ms.

Toggle morph (M17). A toggle link swaps the chain in place (breadcrumb, toggles, notice and steps) through a same-document view transition of 220 ms, then pushes the toggle's URL. Steps that both chains share morph, the rest fade, and the M8 rails run on the new steps. Back and forward swap again. A reload, a new tab, a modified click, reduced motion or no JS still get the static toggle page. The swap counts as a pageview (SOFT_NAVIGATION in src/lib/analytics.ts, with a unit test).

Decision log (M18). A quiet "So far" list under the chain gains one line per step reached: the number, sender → receiver, and the message. The newest line fades in.

Tokens. The island reads its durations from the motion tokens through a new durationToken() in src/lib/motion.ts (unit tested), so the island brings no tokens of its own. New tokens: --dur-message 300 ms, --stagger 40 ms and --dur-step 2500 ms. The first two are 0 under reduced motion. The CSS keyframes for M5 and M7 and the is-fresh class are gone, and M8 stays in CSS.

Docs. In plan.md and docs/design.md, M5, M6 and M7 are amended and M17 and M18 are added. tasks.md gets R-08.

Screenshots

From astro preview at 1440 px and on a Pixel 7, stepped to step 6 with Next. The toggle row is stepped to the changed step.

The scene playing on its own, then two toggle morphs (after):

	Before (main)	After
desktop, light, first paint
desktop, light, step 6
desktop, dark, step 6
toggle page, changed step
decision log	(none)
phone, light, step 6

The screenshots were committed once for stable URLs and removed in the next commit, so the squashed diff has no images.

Code checklist

• pnpm check passes.
• Pages still read fully without JavaScript. The island grows from 1.3 to 3.7 kB (15.9 kB with the Svelte runtime), and the enforced budgets pass. WP10 already plans to amend the island line in the plan.
• Both themes checked. Explorer e2e passes locally apart from the screenshot comparisons. Those change on purpose (the scrub bar in the stepper), so scenario-*.png needs the refresh-screenshots label.
• Tests: the auto-advance starts in view, stops for good on a key and passes axe while stepping. Play, the scrub bar and the log all seek. Reduced motion never starts the scene. A toggle swaps in place and back, with one island.

---

Generated by Claude Code