Music Visualiser

Describe the music you imagine, get a Suno-ready package, then turn the finished track into a visualiser video.

• Song Studio (index.html): a plain-words description becomes a Suno style prompt (checked against the 1,000-character limit, artist names translated into sound), an Exclude list, Weirdness / Style influence / Variety settings, lyrics with structure tags, three titles, a scene-by-scene video plan (palette, art style, image prompts tied to the lyrics), a YouTube kit and notes explaining the choices. Any result can be rewritten with a chip or a sentence. Written by Claude; the engine is api/_lib/compose.js.
• Visualisers that run entirely in the browser and export MP4s. Audio and images stay on the user's computer, except that lyric sync sends a small compressed copy of the track to Groq (see Lyric sync). "Make the video" in the Studio opens the right one with the title, artist and colour set.
  • AetherFlux (aetherflux.html): a 3D particle galaxy (three.js) that morphs between seven shapes, a beat-reactive centre with a logo, a classic spectrum, and a scene timeline.
  • Spectrum (spectrum.html, formerly Monstercat; monstercat.html redirects): classic label-style spectrum bars, bass-driven particles, logo and artist/title (under the bars or top left), and background scenes that crossfade during the song.
  • KINETIX (kinetix.html): six WebGL shaders (tunnel, mandala, plasma, vortex, hex grid, synthwave) driven by the track's bass, mids and highs, with artist/title text. Loading a track runs the auto-director (js/director.js): it finds the tempo, beats, bars and sections (intro, groove, build, drop, breakdown, outro) and plans the video: shader changes on phrase lines (cuts with a glitch into drops, crossfades into calm parts, a new look every 16 bars in long sections), 8-bit builds that snap sharp on the drop, a flash, one-beat invert and hyperdrive on arrival, and glitch or 8-bit fills at phrase ends. The plan shows on a timeline where scenes and effects can be dragged (snapping to beats), retimed, added or removed; Regenerate gives another plan; ½/2× fixes a tempo detected an octave off, and the BPM field takes the track's real tempo when detection locks onto a related one (drum and bass at 175 can read as 117, since its breaks repeat every beat and a half). The plan is plain data, so the preview and the MP4 match. It also works as a live VJ tool: mic input, tap tempo and a built-in kick, hold-to-play FX pads and keys, fullscreen, and short WebM loop recordings. Flashing: the held strobe runs at 3 Hz, the photosensitivity limit, and a planned flash or invert less than a third of a second after another is skipped, so videos never flash more than three times a second. Reduce flashing (under Video) turns the strobe, flashes and inverts off in the preview and the export. It starts on when the system asks for reduced motion, and a warning on the first visit offers it. With reduced motion, AetherFlux also starts without bass shake and ChromaFlow without RGB split and kick zoom.
• LOOP//FORGE (loopforge.html): seamless looping GIFs from six VFX shaders (no track needed), for Discord, socials and stream overlays. Every motion completes whole turns, palette cycles or grid cells over the loop, so the last frame flows into the first. Encoded in the browser with gifenc (loaded from jsDelivr, pinned to 1.0.3) using one palette for the whole loop, so colours don't flicker, with an optional fixed ordered dither to smooth the glows. Works on phones too, since it doesn't need WebCodecs. Video loops (MP4): Spotify Canvas (9:16, 8 s), Reels/TikTok (9:16, 15 s), square (10 s) or YouTube (16:9, 15 s), 1080p at 30 fps with no audio track (silent in js/export.js, 8 Mbps). The loop repeats a whole number of times, so the video loops seamlessly too. Describe a loop writes a new one from a prompt: api/_lib/shader.js has Claude write a GLSL scene() function to the same seamless rules, and the page compiles it and checks it (it compiles, isn't black, moves, matches itself after one loop, and draws a 480x480 frame in under 250 ms). Anything that fails goes back with the problem for a fix, twice at most. Working loops become presets saved in the browser, and can be changed with a sentence ("make it blue"). Abstract and graphic ideas work best; real-world subjects come out as neon line art.
• ChromaFlow (chromaflow.html): a cover-art reveal. An uploaded image (or one of four presets) is painted as a time-lapse in six brush styles, coarse to fine, and completes on the reveal: by default the track's first drop, found by the auto-director, with the clip set around it. Kicks paint bigger bursts, snares throw splatters and hi-hats speed up the swirl. On the reveal it flashes and snaps to the crisp original (or keeps the painting), then holds it with RGB split and zoom on kicks, drifting dust and the title. Strokes are scheduled per frame from the track's analysis and drawn with a seeded random generator, so the preview and the MP4 are identical. The MP4 is painted at its full resolution (the preview paints the same strokes at a smaller size). Exports 9:16, 1:1 or 16:9 clips of 15-60 s (or the whole track) with the clip's audio; without a track, a silent time-lapse.

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗