Skip to content

Domino Spiral

Hundreds of coloured dominoes in an expanding spiral topple in a chain reaction out along the spiral, then stand back up. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified104 lines of codev1.0.0

In Toys, games & parties, Patterns & illusions

Next: Spinning TopSurprise me

Domino Spiral preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

320
1
1

The preview runs the same code your AI receives. These settings travel with the hand-off.

Info

What it is

A few hundred dominoes stand on a studio floor in a spiral that spreads from the centre. One tips the next and a wave of falling runs all the way out along the spiral, each domino leaning on its neighbour; then the wave runs back and stands every domino up again. Choose the number of dominoes, the colours (rainbow, sunset, ocean or mono), the spacing, how many times the wave runs out and back per loop, the backdrop colour and whether the camera sways.

Reuse it in your own idea

  • Satisfying loop: Rainbow, one wave.
  • Warm mood: Sunset, dense.
  • Calm: Ocean, two waves.

Which part is reusable

src/domino-spiral.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • Nothing is simulated: each domino leans on the next in a fixed pose and neighbours may intersect slightly.
  • Pips are the same on every domino.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/domino-spiral.js
Exports
  • createDominoSpiral({ count?, palette?, gap?, turns? }) => { group, setProgress(progress), dispose() }
  • PALETTES: { rainbow, sunset, ocean, mono }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader materials.
  • chrome-material@1.1.0 (demo) — Studio environment light, backdrop and contact shadow.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The spiral is centred on the origin on y = 0, starting about 1.2 from the centre and spreading outward; the camera looks down at about 54°.

Lighting: A warm key light with a shadow map, a shadow-catching floor and the studio environment.

Timing: setProgress(progress) sets every domino's tilt from the wave position; frames render in any order.

Output
1080×1080, 30 fps, 16 s · procedural (computed from the frame number) · seamless loop — The wave of falling runs out along the spiral and a wave of standing up runs back, each domino's tilt a function of when the wave reaches it, and the camera sway is a sine of the loop, so the last frame meets the first.
Tested
Rendered 480 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
One instanced draw call of up to 480 boxes with a shadow map; under a millisecond a frame on an integrated Intel GPU. Software WebGL renders in about a second a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- domino-spiral/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:8cba412ae467b569…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Adapted from the owner's threejs-sketches/objects-scenes/domino-spiral (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original studio object: dominoes at equal arc-length along an Archimedean spiral with a closed-form topple-and-restore wave on an exact loop.
BinMore like this

Coin Stack

3D object3DSeamless loop12 seconds

Ball Clock

3D object3DSeamless loop16 seconds

Jelly Cube

3D object3DSeamless loop10 seconds