Showcase 12 · Mechanical miniature
The Awakening Kingdom
A flat, engraved metal map wakes up: walls grow out of the plate, towers screw themselves upwards, bridges lift out of the river and crests fold open. A gear at the centre drives all of it. Grab it and turn it forwards or back, or let the motor run; drag beside the gear to look at the miniature from another side.
The live demo needs JavaScript and WebGL 2. The explanation below is readable without them.
- Build
- –
- Parts
- –
- Drive
- –
- Frames/s
- –
How it works
The whole scene hangs on a single number: the build, between the flat map and the finished kingdom. Each of several hundred parts has its own cue on that axis and its own mechanism: it grows out of the plate, screws upwards, springs open, folds up on a hinge or lifts onto its piers. The cues run outwards from the gear as a wave. Because every position is a pure function of that number, everything runs backwards just as cleanly as forwards, and the gear is not a video scrubber but the axle of the world.
It is drawn with WebGL 2: a handful of basic shapes, generated in code, are placed hundreds of times with instancing, one draw call per shape. A directional light casts shadows from a depth map that sweep across the plate as the build progresses. Enamel, brass, glass and the engraved plate come from the design tokens and follow the light or dark appearance. Grabbing the gear casts a ray from the pointer onto the gear's plane; the angle turned around its axis becomes the build.