088「구슬로 세는 숫자」 — 내 숫자가 구슬로 쏟아져 칸마다 쌓이는 15초 데이터 쇼츠

Make a 15-second vertical 2D motion graphic as one self-contained HTML file and render it to MP4. The idea: a big number collapses into real marbles, one marble per unit, and the marbles pour down ramps and count themselves into bins. It must feel like a playful, physical, hand-built marble machine, not a chart template. Stay flat 2D on a canvas: no 3D, no WebGL, no light simulation, so it renders fast on an ordinary PC. Do the whole job now without asking questions.

[Inputs]
Opening line: "【첫 줄】"
Groups as name:number, slash-separated, 2 to 6 groups: "【묶음】"
Closing line: "【끝 한 줄】"
Name: "【이름】"
Address (leave it out if empty): "【주소】"
Palette: "【색 조합】" — flat background with black ink lines:
  노랑 = #FFD23F
  민트 = #7FE3C4
  분홍 = #FFB3C7
Each group has its own solid marble color with strong contrast. 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).

[Story]
0 to 2 s: the opening line at top left, and the total of all groups as giant, wide, heavy digits on one line, spanning about 90% of the screen width and built from the real marbles, so the number reads instantly on a phone. Never narrow or stretch the digits tall. One red marble with a tiny face sits on top.
2 to 3 s: the digits lose their grip and collapse. Every marble falls under gravity.
3 to 8 s: marbles roll along black zigzag ramps that carry two big words of the question "제일 많은 건?" tilted with each ramp. A spinning asterisk bumps them along. The camera follows the flow straight down in one continuous move, never jumping back.
8 to 12 s: the stream splits along dotted paths into one bin per group. Each bin has a live counter under it, counting exactly the marbles that have landed. The final counts must equal the input numbers exactly. The little face marble lands last on the biggest bin.
12 to 13 s: a short callout names the biggest group.
13 to 15 s: the bin walls drop, the marbles spill into one wide heap, and a black end card slides in with the name, the address, the closing line and a logo-free clean layout. Hold it, with marbles still settling.

[Motion rules]
Run a real, seeded physics simulation first, record it, then play it back so seek(t) is deterministic. Something is always moving; no pause over 0.5 s. Small events follow each other about every 0.3 s. Reading text never blurs, overlaps or sits under marbles. No HUD, timecode or progress bar. Korean text in Black Han Sans and Noto Sans KR from Google Fonts. Keep a 6% safe margin. No sound.

[Build]
One HTML file, one canvas. The script starts with a `const CONFIG` holding every input plus fps 60 and a seed. A settings panel above the preview (hidden with ?render=1) with Korean labels for the inputs, play/pause, a scrubber and a "설정 복사" button that copies CONFIG as code.
Write render.mjs: open ?render=1 in headless Chromium (Playwright), wait for fonts, step every frame through seek(frame / 60), 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 that overrides CONFIG.

[Check before finishing]
Look at stills every 0.5 s. Check that every counter ends on the exact input number, nothing is clipped, and no text overlaps. 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.