Storyboard — Cold-Chain Check

Artifact A: Animated HTML explainer (≈90 s, self-contained, subtitled)

Controls: play/pause, replay, caption-language toggle (EN; NL captions are a draft pending native-speaker review), sound on/off, scene dots, arrow keys. Captions are on-screen text in a polite live region, not WebVTT; there is no voiceover. Under reduced motion each scene shows its full content at once. Total runtime ~90 s.

Artifact B: Interactive module structure (single-file HTML, ±10 min)

Intro screen (30 s): client-fiction framing + objective + progress indicator.

Section 1 — Why chilled differs (90 s)

• Ambient vs chilled vs frozen mini-table; animated temperature band bar
• Micro-check question (1 item) before proceeding

Section 2 — The four gates (3 min) — one gate per interactive card:

• Gate 1 logger check: toggle three vehicles (in-range / out-of-range / no data) → consequence feedback for each choice
• Gate 2 core probe sampling: choose probe points on a pallet diagram (edge vs core vs mixed); reveals why surface readings lie (animated heat gradient)
• Gate 3 dock clock: draggable scenario — escalation while holding the chain (return-to-chill action) vs naive waiting; consequence comparison
• Gate 4 document or it didn't happen: fill-the-record interaction (select correct fields into a rejection note)

Section 3 — Borderline calls (2 min): three decision incidents with branching consequences:

• Incident A: logger OK, core 8.4 °C → reject protocol
• Incident B: logger missing, driver claims reefer ran fine → hold + escalate path
• Incident C: dock congestion at peak, 28 minutes elapsed → park-and-escalate path

Section 4 — Certification (2.5 min): 7 items randomized from an 8-item bank, ≥85% pass, item-level remediation links, completion screen with printable result placeholder (SCORM/xAPI mapping documented separately).

Artifact C: 3D receiving bay (dock run, flagship v3)

Same scenario, timing and scoring as the 2D dock run (dock-data.js). The learner works at a receiver's eye height (1.7 m) on a wet winter evening; every frame below is a render from the shipped build (receiving.js, cc-world.js, cc-pallets.js, work/_shared/3d-fx.js), captured with node tools/qa/scene_frames.mjs cold-chain.

Design rules. The core is unknown until probed; the IR gun reads and labels only the surface. Each pallet's dock time lives on a tag on the pallet, not in a floating bar. The driver stays in the cab (lit, engine idling) and speaks over the intercom. Light follows the place: cold LED inside, sodium in the yard, a cyan cast from the chill bay; no bloom, no lens effects. Every reading is also in the panel.

Interaction map. Pick a pallet (click it or use the panel) → the camera walks to it. IR scan (1 min) → gun in hand, surface reading. Core probe (4 min) → three close inserts: door-side corner, centre from the top, rear face. To chill bay (2 min) → a short cut to fetch the truck, then you pull the pallet through the curtain (the strips part) to a free slot. Disposition (2 min) → the pallet goes on the truck to the accept lane or quarantine; a split restacks the 14 door-side crates on skid R1 (a cut, because restacking takes minutes). Sign → the trailer leaves. Under reduced motion every move is a cut.

Video-slot replacement rationale

Animated HTML replaces the 90-second video: zero filming dependency, immediately embeddable in the Rise-free portfolio page, demonstrates front-end craft + motion timing — equivalent evidence of media production ability for Marel/Exact/Lirin.

Build notes

• One JS file per artifact, CSS inline, no external CDN dependency (offline-safe).
• Shared design tokens: dark navy + cool blue palette, food-safe green for accept states, amber for cautions.
• Accessibility: keyboard-navigable, prefers-reduced-motion respected, contrast-checked.