🚧 WIP — the format and the L1 example are real; every other block is a stub until its chain is built.

These are the pages attendees work from during floor time — the teaching load lives here, not in the 20-minute demo. They publish as the site's attendee sub-pages (one page per step). Full content gets written per-block as each chain is built, because that's when the APIs are real. This page locks the format and works one block as the example.

The format — every step page has five parts

1. Where you are — one line: the step name, and what exists at this checkpoint.
2. The goal — what you're building in this step, one short paragraph, with a picture when it's visual.
3. The work — prose that explains the idea, then the key code. Enough to type from, not a full listing — the diff against the previous step is always available.
4. It worked when… — one observable check. Not "it should work" — a thing you can see.
5. If you're stuck — the likely failure and its fix, plus a suggested agent prompt where an agent genuinely helps.

Keep each page under a screen and a half. If a step needs more, it's two steps.

Worked example — L1, steps 01–05 (the hero)

Step 01 · A canvas and a cube

Where you are: workshop/stage-01. Empty Vite app, deps installed.

The goal: a rendered scene — one mesh, lit, on a WebGPU canvas. Thirty lines, most of them familiar.

The work: everything you know about a three scene — something to render, a light so you can see it — expressed as JSX. <Canvas> gives you the renderer, the default camera, and the frame loop. Every tag inside it is a real three object; the tree is the scene graph.

import { Canvas } from '@react-three/fiber/webgpu'

export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[5, 5, 5]} />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="hotpink" />
      </mesh>
    </Canvas>
  )
}

It worked when: a pink cube renders. Change the color prop and it updates without a reload.

If you're stuck: black screen usually means the lights didn't make it in, or hardware acceleration is off in your browser. Agent prompt: "My R3F canvas renders black — here's my App.jsx, what's missing?"

Step 02 · The tower

Where you are: workshop/stage-02. The Eiffel model is in /public.