Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Disco Ball

A mirror ball turning in a dark room, throwing hundreds of coloured squares of light across the walls and floor. Loops perfectly.

Background, V1 Effects3DSeamless loop, verified430 lines of codev1.0.0

In Light, glass & shine, Toys, games & parties, Craft & heritage

Next: Rolling-Ball SculptureSurprise me

Disco Ball 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

32

More rows mean smaller tiles and more, smaller dots.

4
0.7
1
1
1
1
3

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

View code Sample video (default settings, 11.2 MB)
Info

What it is

A mirror ball made of hundreds of tiny tilted tiles turning in a dark room, lit by coloured spotlights that circle above it. Every tile flashes as it turns past a light and shows a miniature of the room in its mirror; every tile throws its own square of light across the walls, floor and ceiling, so the room fills with moving dots; the beams of the lights show in a haze. Choose the colour of the lights (warm white, rainbow, blue and violet, or gold), the number of rows of tiles, how many spotlights, the haze, how many turns the ball makes in a loop, the brightness, the sparkle of the tiles and how far the camera sways.

Reuse it in your own idea

  • Party or music video: Rainbow party behind a kinetic title.
  • Club night promo: Blue club, slow.
  • Retro fashion or new year: Gold night.

Which part is reusable

src/disco-ball.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • The tile footprints on the walls are idealised squares: there is no scattering or falloff of the reflected beams beyond a simple distance fade.
  • The room is a plain dark box: a dance floor, speakers or people are not drawn.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/disco-ball.js
Exports
  • createDiscoBall({ palette?, rows?, spots?, haze?, turns?, brightness?, sparkle?, sway?, seed? }) => { scene, camera, material, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • PALETTES: { classic, rainbow, blue, gold }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer and the full-screen shader.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: World units of about a metre: the ball (radius 0.5) hangs at the origin of a box room 8.4 wide, 4.4 tall and 10.5 deep; the camera is 3.6 away.

Lighting: The spotlights circle at height 2.45; each tile reflects them: the light dots on the walls are solved in closed form from the half-way vector between the light and the point, seen from the ball.

Timing: update(time, loopSeconds) sets the loop phase and the ball's angle; frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The ball turns a whole number of times per loop and the spotlights circle once, their power pulses in whole cycles and the camera sways in a sine of the loop, so the last frame meets the first.
Tested
Rendered 360 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 full-screen pass: five tile lookups for a wall pixel, about a dozen for a ball pixel, eighteen cheap steps of haze, and a small bloom. About 38 ms a frame at 1080p on an integrated Intel GPU. Heavier than most ingredients: lower the haze to speed it up; software WebGL renders it in several seconds a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- disco-ball/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:1629195265ea42e5…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
Provenance
Adapted from the owner's threejs-sketches/light-atmosphere/webgpu-disco-ball (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original shader: a mirror ball of tilted tiles in rings, spots solved in closed form from half-way vectors, the tiles' own mirror images of the room, an exact loop and the frame/time contract.
BinMore like this

More like this

Play these full screen

Fireworks

Background3DSeamless loop12 seconds

Lava Lamp

3D object3DSeamless loop15 seconds

Hologram

3D object3DSeamless loop12 seconds

Hourglass

3D object3DSeamless loop16 seconds