629「音に咲く万華鏡」— 鏡のピースの中の花びらがキックのたびに咲き、6・8・12枚へと華やかになる12秒

Make a short vertical music-visual video as one self-contained HTML file and render it to MP4. The idea: a kaleidoscope that blooms to the sound. Mirrored wedges around a center disc with the song title are filled with petals, dots and fine lines; every petal ring reacts to a band of the actual audio (lows, mids, highs), the whole thing breathes with the loudness, and each section adds more mirror wedges — 6, then 8, then 12 — so the piece gets richer toward the chorus. It must feel like a polished music visual from a top studio, not a stock audio visualizer. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan
Song title: "【曲名】" · Artist / maker line: "【歌った人・作った人】"
End address: "【最後のアドレス】"
Palette: "【配色】"
  真夜中 = background #0B0A1F, ink #F6F2FF, petals #FF4FA3, #7C5CFF, #3EC8FF, dots #FFD86B
  陽だまり = background #FFF4E0, ink #2A1E3A, petals #FF7A59, #FFC93C, #2EC4B6, dots #6A4C93
  モノ = background #101010, ink #F4F4F4, petals #FFFFFF, #9A9A9A, #FF3B1F, dots #5A5A5A
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[Sound first, then picture]
Make the soundtrack first (see [Sound]), then analyse that very audio into a per-frame loudness value and 16 frequency bands (0 to 1, fast attack, slow release) and store them as data in the page. The picture reads only that data and the time, so every bloom you see is a sound you hear.

[The kaleidoscope]
Around the center, draw one wedge of angle π/n and repeat it 2n times, every other copy mirrored, clipped exactly to its wedge so the seams are invisible. Inside a wedge: three rings of petal ellipses (inner ring follows the low band, middle the mid band, outer the high band — their size and distance grow with their band), small drifting dots, and one fine radial line that stretches with the loudness. The whole pattern turns slowly. Outside it, a ring of 64 short bars mirrored around the circle follows the 16 bands. At every bar's first beat a soft shockwave ring spreads (stronger in the chorus). A soft colored glow behind the pattern breathes with the loudness.

[Structure — 24 beats in 3 sections of 8]
1. Bloom (6 wedges, calm). Frame 0 is already a finished picture: the pattern open, the center disc with the song title, the artist line and a thin progress ring that fills with the song.
2. Verse (8 wedges, medium energy). At the section change the pattern folds in a little and blooms out again on a spring with the new wedge count.
3. Chorus (12 wedges, full energy). The petals open widest, the camera gives a small punch on each bar. In the last beats the pattern folds into the center disc, which grows; the name rises letter by letter below, then the address.

[Motion rules]
Nothing pops in: section changes fold and re-bloom on springs, text rises from mask lines. The pattern never freezes. Real motion blur on fast moves only (sub-frame samples centered on the frame time); the title stays crisp.

[Always-on details]
No timecode, no corner labels, no HUD besides the progress ring that belongs to the disc. Light film grain. Typefaces: Noto Sans KR for the title and artist, Black Han Sans stretched 1.3× wide for the name, a monospace for the address, from Google Fonts. The title must fit inside the disc.

[Sound]
If you can generate music, compose an original track at the given tempo with clear kicks, a bass line and a brighter chorus, and mux it into the MP4 as AAC. If you cannot generate audio files with a music model, write the backing track yourself in code instead: synthesize an original instrumental (kick, snare, hi-hats, bass, a chord pad and a light arpeggio, no vocals) at the given tempo with a simple chord loop, sample by sample into a WAV, with the drums getting fuller in the chorus, then mux it into the MP4 as AAC. Never use a placeholder or someone else's recording.

[Build]
One HTML file, everything on a single canvas. The script starts with a `const CONFIG` object holding every input plus fps 60 and a seed, followed by the audio analysis data. All drawing comes from a pure `seek(t)` — no timers, no CSS animation, no live audio analysis while rendering — so any frame renders identically. A settings panel above the preview (hidden with ?render=1) with Japanese labels: text inputs for every text input, selects for palette, tempo and ratio, play/pause (playing the soundtrack in sync), a scrubber, and a "設定をコピー" button that copies CONFIG as code. Edits re-render instantly.
Write render.mjs: open the page with ?render=1 in headless Chromium (Playwright), wait for document.fonts.ready, step seek(frame / 60) through every frame, screenshot the canvas at 1080 px on the short side, pipe into ffmpeg (libx264, yuv420p, crf 18) and mux the soundtrack to make motion.mp4. Close the browser at the end. Accept an optional JSON file argument that overrides CONFIG.

[Check before finishing]
Render one still per beat into a contact sheet and look at it: frame 0 is a finished picture, the wedge count is 6, 8 and 12 in the three sections, the seams between wedges are invisible, the petals visibly jump with the kicks, the title fits the disc, nothing is clipped. Fix and re-render if anything fails. Finish with the file paths and the single command to re-render after editing settings.

[Final output format]
出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。
This selected output format takes priority over any fixed canvas size or aspect ratio elsewhere in this template. Adapt the composition, text zones and margins to the selected canvas without stretching or cropping essential content. Device safe areas apply only when a device is selected. Never print these format instructions on the image.