cold-chain · deliverable

Storyboard — Cold-Chain Check

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

Scene	Duration	Visual	Text/Subtitle	Audio cue (WebAudio tone)
1	8s	Truck arrives at dock, cold mist rolls out	"Chilled goods live between 2 and 8 degrees."	soft start chime
2	12s	Gate 1 card slides in: thermometer icon over paperwork	"Gate 1 — Check the logger before you touch the load."	click
3	12s	Logger screen shows 3.5 °C → green tick	"In range? Continue."	positive blip
4	14s	Gate 2: probe into box core; needle animation to 6.2 °C	"Gate 2 — Probe the core. Surface lies."	probe beep
5	16s	Split panel: 7.9 °C accept / 9.4 °C reject with two paths lighting up	"Above 8 at the core? That's a reject decision — not a guess."	alert tone
6	14s	Clock overlay on dock timer counting toward 30 min; pallet sliding to chill door	"Gate 3 — The clock owns you at the dock. Park it back in the chill while you escalate."	ticking
7	10s	Gate 4: clipboard stamp ACCEPT / REJECT with doc icon	"Gate 4 — Whatever you decide, write it down. Paper protects the next shift."	stamp thunk
8	4s	All four gates in a row, done state	"Four gates. Ninety seconds. Every pallet."	resolve chord

Controls: play/pause, replay, EN/NL subtitle toggle. 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).

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.

Prefer the source? Download the raw markdown.