Solid · WebGL 1 · fragment shader No mesh, no model file, no texture. Every surface on this plate is a signed distance function evaluated per pixel, per frame — and it changes shape while you are looking at it. Drag the plate to orbit it; the dock is right there.
No GPU, so no solid
This plate is a raymarcher: a fragment shader that solves a distance
function for every pixel on screen, which needs a working
WebGL 1 context. This browser gave us none, so there
is nothing honest to march. The form above is CSS.
Any current Chromium, Firefox or Safari with hardware acceleration on will run it, including under a software rasteriser.
How it works
Signed distance fields, marched one ray per pixel
A distance function answers one question: how far is this point from the surface? That is enough to draw a solid without a single triangle. For each pixel the shader builds a ray, walks it forward in small steps, and stops where the field changes sign. The gradient of the field at that point is the surface normal, and the normal is what the metal is made of.
Everything expensive here is the normal and the environment reflection, and both are the reason it reads as a cast object rather than a demo: a tetrahedral gradient for the normal, a procedural sky evaluated along the reflected ray, and a Fresnel weight that keeps the grazing angles bright and the facing planes dark.
Five bodies that are really one body
A lattice, a vault of repeated arches, a bloom of fused rings, a twisted monolith and a knotted ribbon are defined as five functions. The morph control slides between whichever two the current preset names, and the two fields are blended every step of the march — so the surface genuinely flows from one form to the other rather than cross-fading between two pictures.
Orbit it. Drag anywhere on the plate. The material is the sky: the reflection you see in the metal is the same environment function the background is drawn from, so the sculpture is lit by the room it stands in.
Everything the dock does is visible in the same frame
On a wide screen the dock is a 260px column on the right and the artwork is full-bleed behind it. Under 1024px it becomes a bottom dock capped at 44svh with the groups in two columns, and the caption lifts clear of it. Either way the thing a control changes is on screen while you press it, and the readout — frames per second and the quality tier in force — lives inside the dock, never over the artwork.
Press H to take the dock away entirely; a small opaque pill comes back in its place. Press C to collapse it to a single row with the preset chips still tappable.
The page that has to be a logo
Any brand whose mark is a solid rather than a logo — a product launch, a hardware company, a studio ident, an awards page. It is also the cheapest way to put a real-time 3D surface on a site that has no 3D assets and no build step, because the geometry is the source code.
- 03 Particle field
- Put a fluid field in front of a solid that reflects it.
- 12 Particle lab
- The same canvas, running a different system, behind the same chrome.
- 21 Procedural terrain
- Both pages share this geometry-first approach: the world is code.
- Stack
- WebGL 1, GLSL ES 1.00. No
#version 300 es, no WebGPU, no float render targets, no extensions required. - Cost
- One full-screen triangle, one fragment program. The cost is fill, so the drawing buffer is capped and stepped down on small screens rather than letting the device pixel ratio drive it.
- Degrades to
- A CSS-rendered form if there is no WebGL context at all, and a single static frame under
prefers-reduced-motion— same layout, same palette, no loop.