468「歌のワンフレーズ」歌詞動画 — 音に反応する円形ビジュアライザーの上で歌詞がカラオケのように光る20秒

Make a 20-second vertical lyric video for one part of a song, as one self-contained HTML file, and render it to MP4 with sound. It must look like a premium music-player visual from a top studio: a deep night background, one glowing circle that pulses with the music, light that blooms with every beat, and lyrics that light up like karaoke. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Song title: "【曲名】"
Artist or channel: "【歌手・チャンネル】"
Four lyric lines (slash-separated): "【歌詞4行】" — words wrapped in *asterisks* are the emphasis words
End text: "【最後の文言】" — default: the artist
Audio: "【音源】" — the user may attach their own song file to this chat. If attached, use a 20-second part of it (start where the energy jumps, e.g. a chorus downbeat) and make every visual react to that real sound. If not attached, make the music yourself (see Sound).
Backing mood: "【伴奏の雰囲気】" — 夜・シンセ = minor synth night drive, ローファイ = soft swung lo-fi with seventh chords, 明るいポップ = bright major pop
Palette: "【配色】"
  夜・炎 = background #0E0B1A, text #FFF4E8, accent fire #FF5A36, second amber #FFB13B, glow violet #7A5CFF, disc #1A1530
  夜・海 = background #061522, text #EAF7FF, accent #3EC5FF, second #9AF1FF, glow #FF6FB1, disc #0E2234
  夜明け・ピンク = background #1B1026, text #FFF0F7, accent #FF6FB1, second #FFD1E8, glow #8A7BFF, disc #2A1838
Tempo: "【テンポ】" — default 140 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).

[Sound — analyse it so the picture can listen]
If an audio file was attached, cut the part and use it. Otherwise: if you can generate music, make an instrumental at the tempo and mood; if you cannot, write the backing track yourself in code — synthesize an original instrumental sample by sample into a WAV (kick on every beat, snare on 2 and 4, eighth-note hi-hats, a bass line on the chord roots, a soft chord pad that ducks on the kick, a light sixteenth-note arpeggio, a short echo), four chords looping, with only pad and hats for the first two bars and the full band from bar three. Never use a placeholder or someone else's recording.
Then analyse the final audio offline into one value per video frame: overall loudness (RMS) and 16 log-spaced frequency bands from 50 Hz to 6 kHz, each normalised to 0–1 by its 95th percentile, rising fast and falling slowly. Embed the arrays in the HTML so seek(t) can look them up; if they are missing, fall back to a beat-shaped envelope from the tempo.

[Picture — layers drawn every frame]
1. Background with a radial glow behind the circle whose size and brightness follow loudness.
2. About 70 embers drifting upward, faster and brighter when it is loud.
3. A circular visualiser: 72 bars around a dark disc, mirrored left and right, low bands at the bottom and high bands at the top, colored from amber to fire by height, with a soft glow; the disc has thin record grooves that slowly rotate and a fire-colored centre label that pulses.
4. A glowing waveform line across the lower part built from the bands, swelling on the beat.
5. A music-player progress bar with elapsed and total time under it.
6. A small "♪ title · artist" line at the top after the intro.

[Structure — 6 scenes of 8 beats]
1. Intro: the circle grows in with an overshoot, the title types under it, the artist fades in, then both fade.
2–5. One lyric line per scene, large heavy Japanese sans (Noto Sans JP 900) under the circle: it rises in, then its letters light up left to right over the scene like karaoke (lit letters turn the accent color with a glow and hop slightly); the previous line floats up and fades; the next line waits small and dim below.
6. End: the title pops back, the artist under it, then a pill with the end text; fade to the background on the last beat.

[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. All drawing comes from a pure `seek(t)` — no timers, no CSS animation, randomness only from the seed — 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 mood, palette, tempo and ratio, play/pause, 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), then mux the audio as AAC into motion.mp4. Close the browser at the end. Accept an optional JSON file argument that overrides CONFIG.

[Check before finishing]
Render, export the middle of every scene into a contact sheet and look at it, and confirm the MP4 has an audio stream with sensible loudness (not silent, not clipping): bars and waveform visibly react, every lyric is readable at phone size and never clipped, the karaoke reaches the last letter before the scene ends. 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.