ReelMusic visualizer videos with Claude Code
Yes, Claude Code can make a music visualizer video for your song. Claude writes the visuals as HTML, SVG or WebGL and times every cut and pulse to the beat. HyperFrames renders it to an MP4 on your computer. No video model is involved, so the picture stays sharp at any length and the same code gives the same video every time.
Here are four looks from the kits, each one a clip made with its kit:
Below are the two ways to sync to music, the steps, a prompt to paste and the styles that fit. If this is your first film in code, read how to make animated videos with Claude Code first.
Two ways to sync the picture to the song
A beat grid. You tell Claude the tempo (BPM) and where the first beat lands. Every cut, flash and camera move is placed on a bar or a beat. Change the tempo and the whole edit moves with it. This is how the Beat Plates kit works, and it suits songs with a steady tempo.
The loudness of the track. Ask Claude to measure how loud the song is in each frame with ffmpeg (the astats filter) and save the numbers to a file. The kits don't do this step for you. The scene reads one number per frame, so bars, rings and particles grow on loud parts and calm down in quiet ones. This suits ambient music or songs with a loose tempo.
You can mix the two: cuts on the grid, motion from the loudness.
What makes the look
One main shape that reacts. A sun, a ring, a waveform or a field of particles. When everything pulses, the viewer can't tell which motion is the beat.
New scene on the bar, small hits on the beat. Cutting on every beat tires the eye. A cut every bar or two, with pulses in between, feels like the song.
Lyrics are optional. If you add them, light each word up when it is sung and keep them low in the frame so the picture stays on top.
Steps with Claude Code
1. Find the tempo and plan
If you don't know the BPM, tap it out on a free tap-tempo page and note when the first beat lands. Then ask for a plan:
My song is song.wav, 3:20, 96 BPM, first beat at 0.40 s. Plan a music visualizer in 16:9: one scene per 8 bars, a cut on each bar line, a pulse on beats 2 and 4. List the scenes with start bar and look. Show me the plan before you write code.
2. Check the sync with stills and a draft
npx hyperframes lint . npx hyperframes snapshot . --at 0.4,1.65,2.9 -o snapshots npx hyperframes render . -o draft.mp4 --quality draft
Watch the draft with the sound on. If the cuts land early or late, change the first-beat offset, never single cut times.
3. Render and add the song
npx hyperframes render . -o out.mp4 --quality looks --workers 2 ffmpeg -i out.mp4 -i song.wav -c:v copy -c:a aac -shortest final.mp4
A prompt to paste
Make a 60-second music visualizer in 16:9 (1920 x 1080) for song.wav, 120 BPM, first beat at 0.0 s. An 80s night drive: neon grid, striped sun, wireframe mountains. Cut to a new angle every 4 bars. The sun pulses on every beat, and its size follows the song's loudness (measure it per frame with ffmpeg and save it as JSON). No text. Plan first, then show me 3 stills before you build the rest.
Which styles fit
A style kit has the rules written down, along with templates and a checklist Claude grades its own stills against. Of my 126 styles, these suit music visualizers:
| Style | Why it fits |
|---|---|
| Neon synthwave drive | Endless neon grid, striped sun and chrome titles for retro and electronic tracks |
| Beat Plates | Built on a beat grid: a new scene every bar, cuts on the downbeat, karaoke words in sync |
| Oscilloscope vector | One glowing beam traces waves and shapes, with phosphor trails |
| Vaporwave dream | Pastel skies, checkerboard floors and slow floating shapes for chill tracks |
| Shader art | Full-screen light: silk, blobs, tunnels and auroras |
| Lyric karaoke | Big lyric words light up on the beat over a moving equaliser |
For lyric videos, see the kinetic typography guide. For the whole list of uses, see use cases.
What this method cannot do
It does not write or change your music. It also can't hear the song the way you do: check the draft with sound before the long render, because a wrong offset puts every cut off the beat.
Get the kits
You can try 7 styles for free first from reelstyles-free on GitHub. All styles come in one ReelStyles purchase.
Questions
Can I upload the result to YouTube or Spotify Canvas?
Yes, if you own the song or have the rights to it. The visuals you make with a kit are yours to publish and monetise.
How long does a 3-minute visualizer take to render?
It depends on your computer and the style. Flat 2D looks render much faster than WebGL scenes. Render a 10 s draft first and multiply.
Is this a video model?
No. The video is HTML, SVG and WebGL that HyperFrames renders frame by frame.
Sources
HyperFrames on GitHub (Apache-2.0), ffmpeg for the loudness and the final mix. Commands come from my animated videos guide.