All · Motion graphics · Numbers · data
465Results report motion — four numbers and a growth record in 15 seconds
Enter four numbers and a dated record to get a vertical report MP4 that shows them as a unit grid, orbiting chips, a clock, growth bars and a printed receipt.
What you get
- An 8-bar vertical report MP4 (15 seconds at 128 BPM, 60fps)
- An HTML file with a settings panel to change numbers, record and colors
- A render script that makes a new MP4 with one command
- Claude Opus 5.5 Made with this AI
Fill in the fields
- 1Fill in the fields
- 2Copy the prompt
- 3Paste it into an AI that can run code (Claude Opus 5.5 · GPT-6 Astra · Gemini Argon)
- 4It builds the HTML, renders it itself and leaves an MP4
- 5To change it, edit the settings panel at the top of the HTML and run one render command No new request
Full prompt 5,646 characters
Make a 15-second vertical results report video as one self-contained HTML file and render it to MP4. It should feel like a premium year-in-review / growth report from a top data-design studio: every number gets its own visual metaphor, nothing is a plain slide. Do the whole job now without asking questions. [Inputs (use the default when empty)] Name: "【Name】" — default Promptpan Title: "【Title】" — words in *asterisks* are the emphasis word Four numbers (slash-separated, each "value=label"; text in parentheses inside a label lists items, e.g. 3=languages (KO · EN · JA)): "【Four numbers】" Growth record (slash-separated "date=value"): "【Growth record】" — if empty, skip the growth bar and give its bar to the summary End button: "【End button】" — default: the name Palette: "【Palette】" Night · Neon = background #0D0F14, text #F3F4F6, accent #B6F23A, second #5B8CFF, third #FF6A3D, card #171A22, dim #7D8494 White · Red = background #F7F7F5, text #151515, accent #E8322B, second #1F5EFF, third #F5B700, card #FFFFFF, dim #8A8A86 Navy · Gold = background #0F1B33, text #F4EFE3, accent #E9C46A, second #6FB3FF, third #F07167, card #18284A, dim #8E9AB3 Tempo: "【Tempo】" — default 128 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. Never invent, round up or decorate a number. [Structure — 8 bars of 4 beats, every move on a beat] 1. Title: a small monospace "REPORT" tag, the title types in Noto Sans KR 900 with the emphasis word in Nanum Myeongjo 800 italic in the accent color, and a date card flips through the dates of the growth record. 2. Number 1 as a unit grid: one small square per unit (cap at 600 and say so in a legend like "■ = 1"), squares light up in random order while the big number counts up in sync, the newest squares flash white. 3. Number 2 with orbiting chips: the big number in the center of a thin ring, the items from the parentheses pop in as colored pill chips orbiting it. 4. Number 3 as a clock or dial: ticks light up one per step (for a daily count, from 10 o'clock clockwise), the hand sweeps with them and a counter below follows. 5. Growth: a baseline draws, bars rise one per beat with overshoot, values pop above them, the newest bar in the accent color, a line with dots connects the tops, and the growth multiple (last ÷ first, one decimal) lands big at the top. 6. Number 4 as a receipt: a white paper receipt prints downward with the name, three line items at the given value, a dashed rule and the total popping in the third color; a round stamp slams on at an angle if the value is free (0). 7. Summary: a 2 × 2 bento of rounded tiles pops in one per beat, the first tile in the accent color, each with its number and label. 8. End: the name rises through a mask in Black Han Sans stretched 1.3x wide with a particle burst, the numbers type underneath in one line, the end button grows in with a colored glow, a cursor clicks it and a ripple spreads. Hold the final frame. [Always-on details] A faint background grid, a thin monospace HUD (corner brackets, name, bar number, beat squares, timecode), subtle film grain, real motion blur on fast moves (average several sub-frame samples), overshoot and settle on arrivals. Three typefaces only (Noto Sans KR, Nanum Myeongjo, Black Han Sans) plus IBM Plex Mono for labels, all from Google Fonts. Keep a 6% safe margin; never clip a Korean syllable. [Sound] If you can generate music, add a background track at the given tempo whose accents land on the beats and chapter changes, and mux it 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, with the drums entering where the video's main section starts, 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, selects for palette, tempo and ratio, play/pause, a scrubber, and a "Copy settings" button that copies CONFIG as code. Edits re-render instantly. 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, export one frame from the middle of every bar into a contact sheet and look at it: every number lands on exactly the given value, the grid count matches, bars are in proportion, the multiple is computed correctly, 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.
How did it turn out?
How to use it · FAQ
Every number gets its own picture
This card turns the results of a channel, a shop or a service into a 15-second vertical report. The first number lights up a grid one square per unit, the second sits inside a ring of orbiting chips, the third lights the ticks of a clock, and the last prints on a paper receipt with a stamp when it is free. Your dated record becomes growth bars with the growth multiple calculated for you, a bento summary pops in and the video ends on your button. Use it for monthly recaps, follower or sales milestones and year-end reports.
Use it with an AI that can run code
Paste the prompt into an assistant that can write and execute code: Claude Opus 5.5 makes the video plus a simple backing track it writes in code (instrumental, no vocals) — no music service, account or cost needed. It builds the HTML, renders it itself and leaves an MP4. The example above was made with Claude Opus 5.5. Check pricing and terms on the service you use.
Filling in the fields
Write numbers as value=label. Items in parentheses in the second label become chips. Write the record as date=value. The video only shows the numbers you enter, so only enter numbers that are true.

