Scene 01 · particle morph
Nine thousand points, finding their order.
A sphere of particles that reforms into a grid as you scroll. The classic award-site opener — chaos resolving into structure.
9,000 points · position buffer updated per frame · the sphere is a Fibonacci distribution so nothing clusters at the poles
Scene 02 · instanced convergence
Scattered objects, assembling into a wall.
Real 3D geometry — lit, shaded cubes, not flat points — drawn in a single call. This is the technique behind the sites converging 50,000 cubes into a photograph.
2,400 lit cubes · one InstancedMesh · one draw call · matrix per instance recomposed each frame
Scene 03 · lit solid
An object with material, turning as you read.
Metalness, roughness, a key light and a rim light. This is what three.js gives you that CSS cannot: a surface that responds to light rather than a plane with a gradient painted on it.
Icosahedron · MeshStandardMaterial at 0.9 metalness · key plus rim lighting · rotation driven by scroll position
Scene 04 · displaced sphere
Geometry deformed in the shader, every frame.
Vertex positions pushed along their normals by noise computed on the GPU. The amount of distortion is tied to scroll, so the form settles as you arrive.
Injected into MeshStandardMaterial via onBeforeCompile · value noise in the vertex shader · no texture, no geometry rebuild
The trade
170KB, on pages that use it.
three.js is imported inside the component and only when the element nears the viewport. Every other page on the site is unaffected — the baseline stays 10.7KB. The question is whether a given scene earns 170KB on the page it sits on.