630「두 선택, 같은 자」 — 두 가지를 한 축에 놓고 양쪽으로 막대를 뻗어 비교하는 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 프롬프트판
Title: "【제목】" · Small tag under the title: "【작은 표시】" (for example the date or "예시 숫자"; show it whenever the numbers are not real measurements)
Left choice: "【왼쪽(가)】" · Right choice: "【오른쪽(나)】"
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: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height: compress every zone percentage below into the 10-90% range. (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 Korean 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]
Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height: compress every zone percentage below into the 10-90% range.
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.