Companion to 03 · Lesson Plans.

Roles and Responsibilities:

Pre-work (from prep email sent out September 1st):

Room baseline:

Time Block Content Lead Facilitator Floaters (Other facilitators) Watch for
09:00 Mini-keynote + expectations Intro:
• Why R3F, why v10,
• The live site as the demo for the day.

Expectations: • What we will cover
• Agents, how much/how little to use them | Dennis | Ava works the door, gets late arrivals seated without stopping the talk.

Floaters spot anyone already staring at a broken terminal. | Give people extra time to install if they didn’t do it before hand. | | 09:35 | Setup gate | pnpm verify on screen. Green check = you're in. Walk the room's rhythm once: switch step, build, diff. | Dennis | Floaters sweep their third of the room. Broken machine → hosted capstone on Pages, fix at the overflow/break. | Floaters watch for anyone who skipped the home install. Don't let one machine hold the room. | | 09:45 | Morning Lesson 1 — Build the Hero

Intro React content is baked into the morning lessons | Live build, steps 01–05 (from lesson plan).

The finished hero is on screen when they walk in; Dennis rebuilds it and narrates the choices. Then floor time. | Dennis | Ava flags demo time. Floaters watch for scale/Suspense confusion (it's the common one). | Weak-React folks surface here at components/props — seat help, not a room lecture. | | 10:30 | Morning Lesson 2 — Make the Hero alive | Steps 06–08 (from lesson plan) are the core: motion + refs (break setState on purpose — it's the lesson), scheduler, events.

| Dennis | Ava holds Dennis to the 20-min demo.

Floaters push the checkpoint command in chat at every step. | Motion without delta · hover flicker on the GLTF group. | | ~11:15 | Overflow/break | Breathe. | —— | Ava calls it when step 08 lands, ±10 min.

Floaters triage stragglers — this break is catch-up time by design. | Whoever is still on setup gets fixed now. | | 11:30 | Polish + show & tell | Steps 09–10 (lesson plan) are self-serve (leva, onFramed). Invite 2–3 screens up.

| —— | Ava caps show & tell at 10 min. | Celebrate the early wins — momentum matters more than coverage. | | 12:00 | Lunch | Hero pauses here. | —— | —— | —— | | 13:00 | TSL (the heavy one) | Acknowledge potential difficulty with shaders before beginning demo instruction.

Nodes → uniforms → compute, then the flip demo. Longest floor time, richest written steps. | Dennis | All floaters active — this block generates the most hands. Point the stuck at the checkpoint, then at their agent, then at the longer guide. | The graph-build-time mental model. People will try to branch on JS state per frame. | | 14:00 | State | Blocks with React state → zustand → the TOD store; sky joins the hero. Render counter on screen — it not moving is the payoff. | Kris | Dennis floats. Floaters let people wrestle transient subscriptions a little before rescuing. | React folks coasting until part three, then hitting the wall. That's the plan. | | 14:50 | Physics (fast show) | Kris. 20 minutes, core ideas, globby footer. Agents carry depth. | Kris | Dennis floats. Ava keeps this one honest — it's the block most tempting to overrun. | Don't teach mastery. Point at the stretch set. | | 15:05 | Overflow/break | —— | —— | Ava calls it. Physics floor time spills here if it needs to. | —— | | 15:20 | Finale | Open the sky graph (TSL vocabulary from 13:00, nothing new), first postprocessing pass with detail, then survey by pointing at working demos. Site polish: every section in. | Faraz | Floaters help people get to "matches the deployed reference." | Double tone-mapping (washed-out output) · effect stacking without measuring. | | 16:30 | Stretch pool / free build | Portal, magic-box, grain variants, footer variants — or polish a favorite. Low pressure. | Everyone | All facilitators disperse around room to assist participants | Anyone struggling/looking lost | | 16:45 | Recap + Day 2 preview | The arc: core → TSL, compute, state, physics → a shipped site. Walk the three tracks, get a rough headcount. | Dennis | Ava runs the pre-pick count. | —— | | 17:00 | End | —— | —— | —— | —— |

Stage reminders: narrate the why, not the keystrokes · checkpoint command in chat at every step · "behind is a git switch, not a dead end" · break things on purpose when the failure teaches better than the warning · keep the raw-three framing respectful — half the room has shipped three.js.