3D, simulations and generative pieces

Use 3D when the film earns it: an object or a set as the payoff, a product, a simulation that explains. Loading Three.js, WebGPU, p5 or canvas and the seek protocol are in ../runtimes.md; path-traced light (soft shadows, bounced light, reflections between objects) with a fast raster preview is in ../path-tracing.md.

Deterministic by construction

• Draw every frame from timeline time in the hf-seek listener; frames render out of order.
• Simulate once at load (physics, agents, particles) into arrays, then look up the state at t: render(t) stays a pure function. Heavy setup (meshes, shader compiles, the simulation) registers a window.__hf.buildReady promise.
• Seed every random choice; a seeded hash of the index, never Math.random().

Camera and story

• One hero object beats a crowd. Fly through or into it rather than orbiting it: one dive is worth ten turns.
• Cutaways, exploded views and chapters with one caption line each, plus labels with real numbers, turn a simulation into an explanation instead of eye candy.
• Product UI is never tilted into 3D; only generated content tilts.

Light and materials

• Light it with a warm key, a cool rim and a dark environment with two or three soft strips; turn the environment, not the object, so highlights sweep across it; a contact shadow under the object.
• Bloom eats detail: keep it to the brightest points. Glossy metal under a low light gives white streaks: roughness about 0.45 or more, environment intensity about 0.5.
• One NaN pixel turns a whole frame black through bloom: clamp values that can divide by zero.

Check it

Snapshot the dive and the payoff (../review.md); a frame that takes too long to draw slows every render, so profile the heaviest moment once.