Every other 3D build on this page starts with images. This one starts with nothing at all.
There is no model file anywhere in the project. Every lens, ring and screw of the camera is geometry written in code, lit by custom shaders, and it comes apart as you scroll. That means no asset pipeline, no export settings, no megabytes of mesh to download — and it means every part is a variable you can change by asking.
It also means the failure modes are different. Procedural builds go wrong in ways images never do, and this one goes wrong twice: a bug that quietly removed the spaces from every headline on the site, and a background so flat it made a genuinely impressive scene look like a prototype.
01Reference the parts, not the object
On Pinterest, collect references of camera parts — individual lenses, rings, plates — rather than photographs of whole cameras.
The model is going to build this out of primitives, so what helps is reference for the components it will construct, not the finished object it is aiming at. Grab a separate background reference later; it is a different problem and mixing them at this stage muddies both.
From the library
Get the prompt for this build
The designs used in this lesson live in the library. Open one to copy the prompt behind it.
02Stage the build: geometry, then shaders, then scroll
The build runs off a staged guide rather than one large prompt: get the geometry right first, then the shaders, then the scroll-driven disintegration.
The staging is not politeness, it is debuggability. If geometry, materials and motion all arrive at once and the result is wrong, you have no idea which of the three is wrong. Built in order, each stage is verified before the next one can hide it.
- Geometry first — shapes and positions, flat shading
- Shaders second — glass, metal, light
- Scroll last — nothing moves until it looks right standing still
03Get a working version before polishing anything
The first working version is not the good version, and that is fine. Once it works, the polish pass adds the glass treatment, the overlay and the typography.
Resist polishing a stage that is not yet correct. Nice materials on wrong geometry is wasted work twice over.
04Debug with screenshots, not descriptions
A real bug appeared: every headline on the site lost its spaces. The fix was to screenshot it and describe what was wrong with what was on screen, rather than re-explaining what was wanted.
This is the same debugging loop as the physics build. For anything visual, showing the model its own output and naming the difference converges. Restating the goal does not, because the goal was never the thing it misunderstood.
- Screenshot the broken state and paste it in
- Describe the difference from what is on screen, not the original intent
05The 10% and the 90%
Getting something impressive on screen is the first ten percent. The remaining ninety is the polish that makes it look finished rather than generated.
Worth internalising before you start, because the gap between "this is amazing" at minute two and "this is actually done" at minute seven is where most people stop and publish something that reads as a prototype.
06The background is not a detail
The scene was sitting on a flat grey background and looked like a demo. A starfield reference from Pinterest, handed over as the new background, changed the whole impression instantly.
This is the highest-leverage single change in the video. A procedurally generated object has no environment of its own, so whatever you put behind it is doing all the work of making it look like it exists somewhere.
- Budget a real background, not a fill colour
- Reference it separately from the subject
07Make the background interactive too
The last step pushes the background into shaders and WebGL so it responds rather than just sitting there — which is the point at which the video says it finally has soul.
Since there are no model files, this costs nothing in page weight. It is more code doing more work on the GPU, not more assets to download.
What you end up with
A scroll-driven 3D scene with custom shaders and no model files at all — nothing to export, nothing to download, every part adjustable by asking.
Two things to take away: stage the build so each layer is verified before the next can hide it, and treat the background as a first-class decision rather than the last thing you fill in.
