057スペクトラム音楽カバー — 自分の曲に合わせて低音と高音のバーが別々に踊る16秒の縦動画

Make a vertical music cover loop video from my song as one self-contained HTML file and render it to MP4. The idea: a song release post where one original square album cover floats in the upper middle and a frequency spectrum under it visibly dances to the real song. It should feel warm, cute and alive. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Song title: "【曲名】" — default 今日の歌
Artist name: "【名前】" — default Promptpan
Cover idea: "【カバーのアイデア】" — default 小さな窓と月
Palette: "【色】" — 夜の紫 = background #17142B→#2C2450, accent #FFC98B, text #FFF6E9 / 夜明けの青 = #101D33→#27476B, #A9E4FF, #F2FBFF / 夕焼けの杏 = #3A1E2E→#8A4A4F, #FFD9A8, #FFF7EE
Song file: "【曲ファイル】" (in this folder).
Aspect ratio: 9:16 (1080×1920), 60 fps.

[Song]
Read the real length of the file and detect its tempo. Find the most energetic part of the song and take the whole number of bars closest to 16 seconds from it, starting on a bar line. Fade the audio in over 0.3 s and out over 0.6 s; do not change the song in any other way. Show the real position: the counter starts at that part's real time and counts up with the audio, and the label at the right shows the song's real total length.

[Spectrum — this is the heart of the video]
Analyze the audio with a real FFT at the video frame rate before drawing, and save the data into the HTML so seek(t) stays deterministic. Draw 48 rounded bars from the center line, mirrored up and down. Bands are logarithmic: lows at the left, highs at the right, so that kick and bass hit the left side while hi-hats and vocals move the right side separately. Each band is normalized to its own recent level, so quiet highs still move clearly. Attack is instant and release is smooth, over about 150 ms. Kick hits must be obvious to the eye: on strong low-frequency hits, the cover swells by at most 2% and its accent glow lifts a little, then both relax. Never use a fake or random wave.

[Picture]
Draw everything in 2D on a single canvas. The cover is an original flat illustration made with simple shapes from the cover idea: soft gradients, a little grain, rounded corners, a soft shadow. Small things move inside it. Dust specks drift behind. Nothing flashes or shakes.

[Layout rules]
Safe margin: 96 px at the sides, 180 px top and bottom. Reserve separate zones: cover, title, artist, spectrum, progress. No moving object may ever cross text. Song title at least 76 px, artist name at least 44 px, time labels at least 36 px. Use a warm rounded Japanese font embedded in the file, and check that every character renders. Print each input exactly once and add no other words, no logo, no fake app name and no imitation of a real music service.

[Build]
One HTML file. The script starts with a `const CONFIG` holding every input plus fps and seed; a settings panel above the preview edits it live. All drawing comes from a pure `seek(t)`. Write render.mjs so that `node render.mjs other-song.mp3` analyzes a new song and makes a new MP4 with one command. Render with headless Chromium when it runs here, otherwise another way; say which in your last message.

[Check before finishing]
Render 8 stills from loud moments into contact-sheet.jpg. Confirm the left and right bars differ between stills, kick hits show in the low bars, the text is spelled exactly, and nothing overlaps text. Fix what fails and render again.

[Deliver]
motion.mp4, film.html, render.mjs, contact-sheet.jpg. Keep your last message short.

[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.