🚧 WIP — content stubbed, being reworked. Links and repo name fill in as they exist.
By the end of today you'll have rebuilt this site — the one you're reading — and touched most of what React Three Fiber can do. Everything runs on WebGPU with R3F v10.
The site is the spine. Each block of the day builds one piece — the hero scene in the morning, then shaders, state, physics, and the finishing pass in the afternoon — and every piece you build gets added to it. You keep the standalone demos too; each one lives at its own route.
Blocks start with a short live build (15–20 minutes), then you work through the written steps at your own pace while we come around and help. Each step has its own page with the goal, the code idea, and a "it worked when…" check.
One repo covers all of Day 1. (Day 2 tracks bring their own — you'll get those links tomorrow.) You cloned [org/paris-workshop] and installed at home. During the day:
pnpm steps # list every checkpoint
pnpm step tsl 3 # jump to a step (your work gets stashed first)
git diff workshop/stage-04 workshop/stage-05 # see exactly what a step changed
Behind? Jump to the current step and rejoin — nobody falls off the day. Ahead? Every block has stretch goals waiting.
Morning — the hero. The Eiffel Tower scene: model loading, cameras and framing, components, then motion, interaction, and live controls. You'll know it landed when your hero matches the reference and resizing the window doesn't change the animation speed.
TSL — shaders as nodes. GPU material logic written in JavaScript. Uniforms, nodes, a first taste of compute, and then the flip demo. Heads up: this is the hard one, and getting stuck here is normal. The checkpoints mean you're never stranded, your agent is genuinely useful here, and the written guide goes deeper than the day has hours.
State. React state, then zustand, then the payoff: one time-of-day store driving the sky, the lights, and every canvas on the page — without re-rendering anything per frame.
Physics. Fast and fun: bodies, colliders, impulses, and the globby footer. We show the core ideas and let you (and your agent) take it further.
Finale. Inside the sky's shader graph, then postprocessing and polish until the site on your machine matches the deployed one. That's the artifact you leave with.
Stretch pool. Cube portal, magic-box, grain variants, footer variants — for whenever you're ahead, or after the workshop.
Bring your agent, we use them too. The deal: you type, you break it, you fix it. Agents are best at the gaps — "why is my collider not matching my mesh" — and worst as a replacement for doing the steps. The step pages include suggested prompts where they genuinely help.