Skip to content

Bass Pulse

A speaker cone kicks on every beat and rings of pressure race outwards, bending a neon grid. Loops perfectly.

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

In Science & maths, Music & sound, Light, glass & shine

Next: Doppler SirenSurprise me

Bass Pulse 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

8
6
1
0.025
0.6

How fast a ring fades.

1

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

Info

What it is

A deep bass note made visible: at every beat the cone of a speaker at the centre kicks and a ring of pressure leaves it, racing outwards, thinning and fading, bending the neon grid of the floor behind it and splitting into its colours at its edge. Several rings are always in flight, so the whole screen throbs in rhythm. Choose the colours (neon, fire, ice or mono), the beats per loop, how many rings are in flight, their punch, thickness and decay, and how much the grid bends.

Reuse it in your own idea

  • Club or DJ title: Neon, eight beats.
  • Heavy intro: Fire, heavy.
  • Product backdrop: Mono, wide rings.

Which part is reusable

src/bass-pulse.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 rhythm is a regular count, not driven by audio.
  • The rings are circles in a plane, not a simulation of a pressure wave.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/bass-pulse.js
Exports
  • createBassPulse({ beats?, rings?, palette?, punch?, thickness?, decay?, warp? }) => { scene, camera, setSize(width, height), update(time, loopSeconds), dispose() }
  • createBloomPass(renderer, { width, height, glow?, exposure?, grain? }) => { render(scene, camera, output?), dispose() }
  • PALETTES: { neon, fire, ice, mono }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and shader materials.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: Centred on the frame, 1 = the frame's half-height; rings travel out to 1.35.

Lighting: Self-lit; the bloom gives the glow.

Timing: update(time, loopSeconds) sets the loop phase; frames render in any order.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — Rings are born at every beat and a whole number of beats make a loop; ring i has age fract((beat + i) / rings), so the set of ring ages after the loop is the set before and everything else is a function of the beat's fractional part.
Tested
Rendered 240 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 with up to twelve rings per pixel and a small bloom. A few milliseconds a frame at 1080p on an integrated Intel GPU. Software WebGL renders in under a second a frame.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- bass-pulse/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:2d8e3029463a95c7…
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/audio-musical/bass-pulse (MIT) and rebuilt for AI Pixel Wizard in October 2026 as an original shader: beat-born rings with chromatic fringes bending a neon grid, a kicking speaker cone and an exact loop.
BinMore like this

Piano Keys

3D object3DSeamless loop16 seconds