Promptpan

All · Motion graphics · Numbers · data

630Two choices, one ruler" — bars grow both ways from one axis to compare two things, an 11-second chart

Enter two names and a few rows of numbers: bars grow left and right from one center axis on the beat, numbers roll up, the bigger side gets a marker and a summary line closes it — a vertical MP4.

What you get

  • A 3-scene vertical MP4 (3 rows, 11 seconds at 120 BPM, 60fps, coded backing track)
  • An HTML file with a settings panel to change the title, names, rows, summary, colors and tempo
  • A render script that makes a new MP4 with one command
Example — made from the field examples with Claude Opus 5.5 (no background music)

Made with Claude
  • Claude Opus 5.5 Made with this AI

Fill in the fields

  1. 1Fill in the fields
  2. 2Copy the prompt
  3. 3Paste it into an AI that can run code (Claude Opus 5.5 · GPT-6 Astra · Gemini Argon)
  4. 4It builds the HTML, renders it itself and leaves an MP4
  5. 5To change it, edit the settings panel at the top of the HTML and run one render command No new request
Ideas
Ideas
Ideas
Ideas
Ideas
Ideas
Ideas
Output format

Choose a mode, then set the size.

Full prompt 5,445 characters
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: "【Name】" — default Promptpan
Title: "【Title】" · Small tag under the title: "【Small tag】" (for example the date or "sample numbers"; show it whenever the numbers are not real measurements)
Left choice: "【Left choice】" · Right choice: "【Right choice】"
Rows (slash-separated, each "label=left=right", 2 to 4 rows): "【Rows】" — numbers only after the = signs
Summary line: "【Summary line】" — a part wrapped in *asterisks* is the emphasis word
End address: "【End address】"
Palette: "【Palette】"
  Fresh = paper #F5F3EE, ink #161616, left #FF6B4A, right #2F6BFF, track #DCD8D0
  Contrast = paper #111214, ink #F4F2EE, left #FFC531, right #36D6C3, track #2C2F35
  Calm = paper #EEF0EC, ink #1E2A24, left #C9663F, right #3F6E8C, track #D3D8D2
Tempo: "【Tempo】" — default 120 BPM. Aspect ratio: Output size 1080x1920 pixels, 9:16 portrait story. Keep all text inside the central 80% of the height. (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 English labels: text inputs for every text input (rows slash-separated), selects for palette, tempo and ratio, play/pause, a scrubber, and a "Copy settings" 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.
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.

Browse more cards

How to use it · FAQ

Measure two things with one ruler — an 11-second comparison chart

Enter two names and a few rows of numbers: bars grow left and right from one axis in the middle. Row by row the bars grow on the beat, the numbers roll up with them, and a small dot pops onto the bigger side. At the end the winning name gets underlined and one summary line appears. Use it for team results, last week vs this week, in-store vs delivery, or two menus or two methods side by side.

Paste it into an AI that runs code

Paste it into an AI that writes and runs code, not an image AI. Claude Opus 5.5 also adds a backing track it builds in code (simple instrumental, no vocals) — no music model, account or cost needed. The AI builds the HTML, renders it and leaves you an MP4. The example above was made with Claude Opus 5.5 (the numbers are an example). Check fees and terms of any outside service with that service.

How to fill it in

Write each row as "item=left number=right number" and separate rows with "/" (2 to 4 rows). No commas in the numbers. If the numbers aren't real measurements, put "sample numbers" in the small tag — and don't use it to run down a competitor.

Edit without asking again

Change the title, names, rows, summary, colors and tempo in the settings panel at the top of the HTML, press "Copy settings" and run the one render command for a new video.