Make the device journey visual and approachable #5

Merged

ams-tech merged 1 commit from design/visual-device-journey into main

2026-09-12 01:50:12 -04:00

ams-tech commented

2026-09-12 01:49:49 -04:00

(Migrated from github.com)

The state walkthrough explains the contracts accurately, but its tables and technical vocabulary make it difficult for a new audience to follow the story.

Replace the public walkthrough with nine plain-language chapters around an illustrated device. Each chapter presents the device before the step, the action Kaiba performs, and the resulting state. Animated operations, changing artwork, and a prominent action guide the reader through the journey. Optional alternate paths explain a lab-only device, a conflicting plan, and a missing confirmation.

Keep the detailed state and contract inspector at technical.html. Both views use the existing teaching model and preserve its progression gates: accepted publication records intent, while real device execution remains unproven. No wire contracts or fixtures change.

The story uses local SVG/CSS and JavaScript modules, respects reduced motion, provides a motion toggle, and cancels pending work on restart. Layouts and controls adapt to phone screens.

Validation:

19 contract tests and 11 walkthrough tests passed.
Static build checked 3 pages, 14 contracts, and 92 links.
Browser checks passed on desktop and mobile for the complete journey, all alternate paths, identical retry, restart during animation, reduced motion, navigation, disclosures, and retained technical view.
No browser errors, failed asset requests, horizontal overflow, or remote service calls.

The state walkthrough explains the contracts accurately, but its tables and technical vocabulary make it difficult for a new audience to follow the story. Replace the public walkthrough with nine plain-language chapters around an illustrated device. Each chapter presents the device before the step, the action Kaiba performs, and the resulting state. Animated operations, changing artwork, and a prominent action guide the reader through the journey. Optional alternate paths explain a lab-only device, a conflicting plan, and a missing confirmation. Keep the detailed state and contract inspector at technical.html. Both views use the existing teaching model and preserve its progression gates: accepted publication records intent, while real device execution remains unproven. No wire contracts or fixtures change. The story uses local SVG/CSS and JavaScript modules, respects reduced motion, provides a motion toggle, and cancels pending work on restart. Layouts and controls adapt to phone screens. Validation: - 19 contract tests and 11 walkthrough tests passed. - Static build checked 3 pages, 14 contracts, and 92 links. - Browser checks passed on desktop and mobile for the complete journey, all alternate paths, identical retry, restart during animation, reduced motion, navigation, disclosures, and retained technical view. - No browser errors, failed asset requests, horizontal overflow, or remote service calls.