630「2つの選択、同じものさし」— ひとつの軸から左右にバーを伸ばして2つを比べる11秒チャート

Make a short vertical comparison chart video as one self-contained HTML file and render it to MP4. The idea: two choices on one ruler. A single vertical axis stands in the middle, the two names sit on either side, and for each comparison row two bars grow away from the axis — left for the first choice, right for the second — on the same scale, with their numbers rolling up, and a small marker on the bigger side. It ends with one summary line. It must look like a clean data film from a top studio: calm, exact, readable on a phone. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【名前】" — default Promptpan
Title: "【タイトル】" · Small tag under the title: "【小さな表示】" (for example the date or "例の数字"; show it whenever the numbers are not real measurements)
Left choice: "【左(A)】" · Right choice: "【右(B)】"
Rows (slash-separated, each "label=left=right", 2 to 4 rows): "【比較の行】" — numbers only after the = signs
Summary line: "【まとめのひとこと】" — a part wrapped in *asterisks* is the emphasis word
End address: "【最後のアドレス】"
Palette: "【配色】"
  さわやか = paper #F5F3EE, ink #161616, left #FF6B4A, right #2F6BFF, track #DCD8D0
  コントラスト = paper #111214, ink #F4F2EE, left #FFC531, right #36D6C3, track #2C2F35
  おだやか = paper #EEF0EC, ink #1E2A24, left #C9663F, right #3F6E8C, track #D3D8D2
Tempo: "【テンポ】" — default 120 BPM. Aspect ratio: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (default 9:16).
Use only the numbers given. Each row is scaled to its own larger value so both bars of a row share one ruler.

[Structure — 4 title beats, 4 beats per row, 6 summary beats]
1. Title. Frame 0 is already a finished picture: the title near the top, the small tag under it, the two names in their colors on either side of the axis, and the axis already partly drawn; the axis finishes drawing downward and the names settle apart on a spring.
2. Rows, one every 4 beats. The row label rises from a mask line above the row; two gray tracks appear; the left bar springs out to its value, half a beat later the right bar; each number rolls up next to its bar end (read from the frame time, never from motion-blur sub-samples) and stops crisply; then a small dot pops on the bigger bar. Equal values get no dot.
3. Summary. A line in the winning side's color draws itself under that side's name, the summary line types in large below the chart with its emphasis word in that color, then the name rises letter by letter and the address under it.

[Motion rules]
Nothing pops in: bars and markers are closed-form springs with a small overshoot, labels rise from mask lines. One slow camera push per scene plus a very slight handheld float — the title never leaves the frame and nothing freezes for more than half a second. Real motion blur on fast moves only; numbers and text stay crisp.

[Always-on details]
No timecode, no progress bar, no corner labels, no HUD. Light film grain. Typefaces: Noto Sans KR for words, a tabular monospace for numbers, Black Han Sans stretched 1.3× wide for the name, from Google Fonts. Keep a 6% safe margin — the longest number must stay inside the frame at the closest camera.

[Sound]
If you can generate music, add a light, confident track at the given tempo with a soft tick as each bar grows and a small chime on each marker, muxed 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, 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. 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 (rows slash-separated), selects for palette, tempo and ratio, play/pause, a scrubber, and a "設定をコピー" button that copies CONFIG as code. Edits re-render instantly; the video length follows the number of rows.
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, and pipe into ffmpeg (libx264, yuv420p, crf 18) 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, every number matches the input, each pair of bars shares one scale, the marker sits on the bigger side, the summary never overlaps the chart, 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.