Root cause of the broken diagrams found and fixed: CSS transform
animations were overriding the SVG positioning transform on the same
element, throwing animated elements (beans, flames) to the canvas
origin — the bean/flame helpers now split position (outer group) from
animation (inner group).
Every scene was then rendered in headless Chromium and screenshot-
inspected, with fixes applied and re-verified: drying-scene label
collision, RoR ideal-line label overlap, first-crack dot off the curve,
composition bar stagger orphaning its labels, moka flame hidden behind
the base.
New opening slide (user request): 'The whole journey, in one bean' — a
large bean on a 14-second loop living the full roast (heat in, drying
steam out, green→yellow→brown, pressure swell, crack) synced to a
stage timeline with a riding marker; narrated like the rest.
Co-Authored-By: Claude Fable 5 <[email protected]>
- Roasting is now a single continuous 11-slide lesson ('The roast,
start to finish') merging the six lessons' content; brewing keeps its
four per-family lessons
- Progress tracking: resume-where-you-left-off per lesson, progress bar
and completed badge on the lesson cards (localStorage)
- Every scene rebuilt against a fixed safe area (nothing off-canvas),
with animations that depict the narrated mechanism: contained
thermometer fills, a drawn dip-and-turn for the turning point, chaff
drifting off the swelling Maillard bean, crash/flick/stall on one
annotated RoR chart, per-brewer water/grounds anchored to each
silhouette's actual bowl, gauge needle sweeps instead of spinning
clocks; multiline labels replace out-of-frame text
- 9 new narration clips generated, 23 orphaned ones removed (31 total)
Co-Authored-By: Claude Fable 5 <[email protected]>
