Grilled Cheese Science Timeline¶
Specification¶
The full specification below is extracted from Chapter 3: "Chapter 3: Heat, Cooking Science, and Chemical Reactions".
Type: interactive-infographic
**sim-id:** grilled-cheese-timeline<br/>
**Library:** vis-timeline<br/>
**Status:** Specified
**Learning Objective:** Students will sequence (L1 — Remember) the cooking events and explain (L2 — Understand) which heat transfer mode and chemical reaction is occurring at each step.
**Canvas size:** 760 × 320 px, responsive.
**Timeline range:** 0 to 8 minutes of cooking time.
**Events (each is a clickable node):**
- 0:00 — "Butter melts in pan" → tooltip: "Fat molecules gain enough kinetic energy to break free of the crystal lattice. This is a physical change — the butter can re-solidify."
- 0:30 — "Conduction heats bread surface" → tooltip: "Heat transfers from hot metal → fat layer → bread surface. Thermal conductivity of bread is low, so the center stays cool."
- 1:00 — "Surface reaches 280°F: Maillard begins" → tooltip: "Amino acids from bread proteins react with reducing sugars. Hundreds of flavor compounds form. Golden color appears."
- 2:30 — "Cheese proteins begin to melt" → tooltip: "Calcium bridges between casein proteins weaken with heat, allowing the network to flow. This is why cheese stretches."
- 3:30 — "Flip! Second side begins browning" → tooltip: "The same Maillard and conduction processes begin on side 2."
- 5:00 — "Internal temperature of cheese peaks" → tooltip: "Convection of melted fat carries heat through the cheese layer. No Maillard here — cheese surface is protected by bread."
- 7:00 — "Remove from heat. Reaction stops." → tooltip: "Below 280°F, Maillard reaction rate drops sharply. Crust is set. Cheese is molten. Science is delicious!"
**Color coding:** Blue events = heat transfer; Orange events = chemical reactions; Green events = physical changes.
**Responsive:** Redraws on resize.