snowspeeder/roast_command_center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Academy v3: screenshot-verified scenes, transform-override fix, hero bean-journey slide
Test and deploy / test-and-deploy (push) Successful in 56s
Details

Browse Source 
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]>
This commit is contained in:
Shane Maynard
2026-08-09 10:06:30 -04:00
co-authored by Claude Fable 5
parent 9448712a8a
commit 2e1b8d24f9
5 changed files with 590 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.css
+30
View File
@@ -3270,3 +3270,33 @@ select.f {
.ac-needle { animation: ac-needle-kf 7s ease-in-out infinite; }
@keyframes ac-pulse-soft-kf { 0%, 100% { opacity: 1; } 50% { opacity: 0.75; } }
.ac-pulse-soft { animation: ac-pulse-soft-kf 2.4s ease-in-out infinite; }
/* The 14-second "bean journey" clock — every piece of the hero scene rides it together. */
@keyframes ac-jb-color-kf {
0%, 30% { fill: #7a8c5e; }
47% { fill: #d9ba5a; }
66% { fill: #b98d54; }
84%, 100% { fill: #8a5a30; }
}
.ac-jb-color { animation: ac-jb-color-kf 14s linear infinite; }
@keyframes ac-jb-grow-kf {
0%, 40% { transform: scale(1); }
84%, 100% { transform: scale(1.12); }
}
.ac-jb-grow { transform-box: fill-box; transform-origin: center; animation: ac-jb-grow-kf 14s linear infinite; }
@keyframes ac-jb-crack-kf {
0%, 82% { opacity: 0; }
86%, 100% { opacity: 1; }
}
.ac-jb-crack { animation: ac-jb-crack-kf 14s linear infinite; }
@keyframes ac-jb-steam-kf {
0%, 8% { opacity: 0; }
18%, 42% { opacity: 1; }
52%, 100% { opacity: 0; }
}
.ac-jb-steam { animation: ac-jb-steam-kf 14s linear infinite; }
@keyframes ac-jb-marker-kf {
from { transform: translateX(0); }
to { transform: translateX(400px); }
}
.ac-jb-marker { animation: ac-jb-marker-kf 14s linear infinite; }