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: 出力サイズは1080×1920ピクセル、9:16の縦型にしてください。文字は中央の安全な範囲に収めてください。 (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. Japanese text in Noto Sans JP 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 Japanese 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]
出力サイズは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.