088Marble Count — a 15-second data short where your numbers pour out as marbles and stack up

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: "【Opening line】"
Groups as name:number, slash-separated, 2 to 6 groups: "【Groups】"
Closing line: "【Closing line】"
Name: "【Name】"
Address (leave it out if empty): "【Address】"
Palette: "【Palette】" — flat background with black ink lines:
  Yellow = #FFD23F
  Mint = #7FE3C4
  Pink = #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. (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 "Which is the biggest?" 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. Text in Archivo Black and Inter 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 English labels for the inputs, play/pause, a scrubber and a "Copy settings" 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.
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.