Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Music Visualizer

A round equaliser: two rings of glowing bars around a pulsing orb, kicking on every beat, with a ring of light running out across the floor. Loops perfectly.

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

In Music & sound, Light, glass & shine, Toys, games & parties

Next: Bass PulseSurprise me

Music Visualizer 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

64
8
1

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

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

What it is

A round equaliser. Two rings of glowing bars stand round a pulsing orb: the low notes at the top and bottom of the rings and the high notes at the sides, so the picture is a mirror image like a real spectrum drawn round a circle. A kick on every beat throws the bass bars up, snares and melody lines ripple through the rest, and a ring of light leaves the orb on each beat and runs out across the floor. There is no audio: the spectrum is a formula of the beat. Choose the number of bars, the colours (rainbow, neon, fire or mono), the beats per loop, how hard the bass kicks and whether the camera circles.

Reuse it in your own idea

  • Podcast or radio: Rainbow, eight beats.
  • Club: Neon, fast.
  • Hard hitting: Fire, heavy bass.

Which part is reusable

src/music-visualizer.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 spectrum is a formula, not driven by audio: to react to real sound feed the bar heights from an analyser.
  • Neighbouring bars touch at the highest bar counts.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/music-visualizer.js
Exports
  • createEqualiser({ bars?, palette?, beats?, punch? }) => { group, setProgress(progress), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • PALETTES: { rainbow, neon, fire, mono }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and basic materials.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The rings of radius 3.0 and 4.2 are centred on the origin on y = 0; the orb floats at y = 1.2; the camera looks down at about 36°.

Lighting: Self-lit bars and orb; the bloom gives the glow.

Timing: setProgress(progress) sets every bar's height from the beat; frames render in any order.

Output
1080×1080, 30 fps, 16 s · procedural (computed from the frame number) · seamless loop — The kick, the snare and the melody lines are functions of the beat with whole numbers of beats and cycles per loop, and the camera makes one full circle per loop, so the last frame meets the first.
Tested
Rendered 480 frames on 2026-10-05 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 of up to 240 bars plus a few meshes and the bloom: about 2 ms a frame on an integrated Intel GPU. Software WebGL renders in about two seconds a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- music-visualizer/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:fa63cba4b9783f8f…
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/data-information/music-visualizer (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original scene: a formula-driven radial spectrum with kick and snare envelopes, a pulsing orb and an expanding ring of light, through a bloom, on an exact loop.
BinMore like this

More like this

Play these full screen

Bass Pulse

Background3DSeamless loop8 seconds

Disco Ball

Background3DSeamless loop12 seconds

Fireworks

Background3DSeamless loop12 seconds

Piano Keys

3D object3DSeamless loop16 seconds