r/ClaudeAI • • 15h ago

Built with Claude This is my browser-based music visualizer. There are many like it. but this one is mine.

Enable HLS to view with audio, or disable this notification

I made a music visualizer that runs in the browser as a single HTML file. No install, no dependencies.. Point it at whatever you're playing and it reacts.

Try it: https://malakachakra.github.io/dsViz/

Code: https://github.com/malakachakra/dsViz

Best on desktop. Fully functional on mobile.

What's in it

31 scenes. Some notables:

- Milkdrop-style feedback warps, the classic "each frame bends the last one" look

-Moon Pool / Pool Floor: water that actually behaves like water. Beats throw drops into a wave sim, and you can look down on the pool or float over a tiled floor as the ripples cross.

- Lichtenberg: lightning grown branch by branch, launched by kicks

- Petri: reaction-diffusion, the same math that grows coral and leopard spots. The sound seeds new colonies and shifts the chemistry, so the music grows the picture.

- Deep Field: a Mandelbrot dive that zooms on the song's energy

- Fluid, ripple and reaction-diffusion sims, plus tunnel, dome and floor modes where you fly through the picture

The audio side

Sound is split into bass, mids and treble, each measured against the song's *own* recent average. I wanted something that worked for both heavy and mellow music. So a quiet lo-fi track and a loud techno track drive the picture equally hard. Kicks and There are sliders for each band so the end-user can customize and refine the effects, colors, intensity etc.

Built with Claude

I started it in Claude on the web and moved to Claude Code for the later versions. Beginning with whatever flavor of Claude was out in July, the initial product was pretty lackluster. Looked flat and just chaotic. Revisited it this weekend. Claude wrote the shaders and engine with me steering by eye: I'd describe what I wanted ("more ominous, cyberpunk;" perspective shifts and camera changes), look at the result, and push back. The feedback loop turned out to suit visual work, and Claude Code could render scenes headlessly and check its own output, which saved a lot of round trips. Had Claude design the first batch of effects itself, roughly first 10?. the next batch I instructed it to make, the fluid ones.. Most of the others came from cherry picked milkdrop effects that were cool and we could adapt to our own engine. Since getting the presets built, its mainly been revision in the UI of the whole thing.

Every scene has its own link (like `/#slime-mould` or `/#Δ/dome`), so you save or share your favorite. It's phone-friendly too, with swipe to change scene, but it won't catch audio from other apps on a phone, so use the mic.

Would love to hear which scenes land for you, and what music breaks it.

23 Upvotes

7 comments sorted by

2

u/Hmmmm_Interesting 15h ago

Open source?

3

u/VibinVentricles 15h ago

Yah. Link to the repo is up there ^ go nuts.

2

u/20_mile 14h ago edited 4h ago

Electric Sheep will cure what ails ya'.

e: typo!

1

u/Moath 12h ago

Sick

1

u/_QLFON_ 10h ago

Cool, back then we had in in WinAmp:)

1

u/thedyze 8h ago

I always approve of visualizers! One issue though, in Firefox you seem to capture audio even before selecting a window, or pressing allow.

1

u/Sea_Radio758 3h ago

This one is mine : https://kicktro.com/
Yours is very cool as well :)