Promptpan

All · Motion graphics · Posters · events

626Open the celebration badge" — a game-style reward that levels up bronze, silver, gold, then bursts into your number, 11 seconds

Enter a number and a headline: each tap levels a badge up from bronze to silver to gold, it gathers light, bursts, rolls up your number and drops confetti — a vertical MP4.

What you get

  • A 4-scene vertical MP4 (11 seconds at 120 BPM, 60fps, coded backing track)
  • An HTML file with a settings panel to change the number, text, background 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
Output format

Choose a mode, then set the size.

Full prompt 6,446 characters
Make a short vertical celebration video as one self-contained HTML file and render it to MP4, staged like the reward moment in a top mobile game. The idea: a medal badge is tapped, levels up from bronze to silver to gold, gathers energy, bursts open and reveals the anniversary number with confetti, then says thank you. Every phase must be clearly readable even with ten effects on screen. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【Name】" — default Promptpan
Number: "【Number】" (digits only) · Unit: "【Unit】"
Headline: "【Headline】" — a part wrapped in *asterisks* is the emphasis word (in gold)
Opening hint: "【Opening hint】"
Thank-you line: "【Thank-you line】"
End button text: "【End button】" — default: the name
Background: "【Background】"
  Night = #141019 with pink #FF5C93 and violet #7C5CFF ribbons
  Navy = #0F1730 with cyan #4CC9F0 and blue #3A5BFF ribbons
  Wine = #24101A with orange #FF8A3D and rose #E0457B ribbons
Tiers: bronze #E09A62 / #9B5A2E / #5E3218, silver #E4E8EE / #A3ABB8 / #5D6573, gold #FFD86B / #D9A332 / #8A5A12 (light, mid, dark).
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).

[The badge]
A scalloped medal (18 soft bumps) with a diagonal metal gradient in the tier colors, an inner disc with a thin light rim, a dark star in the middle, and two ribbon tails in the background's ribbon colors. It turns around its vertical axis by scaling its width with the cosine of the angle (the back face is darker and hides the star). A soft violet light pool glows on the floor under it.

[Structure — 22 beats in 4 scenes of 5, 4, 6, 7 beats]
1. Idle and level up (beats 0–5). Frame 0 is already a finished picture: the bronze badge floating with a slow bob, the hint line under it, a cursor at the lower right. The badge gives a small shake as a hint. The cursor glides to it and taps on beat 2.4 and again on beat 3.8: each tap makes the badge jump, spin one full turn and land with a squash, switching to the next tier color (bronze → silver → gold) with a ring rippling from the tap. The hint slides out and the cursor leaves.
2. Charge (beats 5–9). The gold badge shakes harder and harder, light leaks out around it as soft blurred rays, small sparks are sucked inward from all around, the camera trembles slightly, and in the last fraction of a beat the badge squeezes down.
3. Burst and reveal (beats 9–15). On beat 9: a radial bloom flash from the badge (never above 0.8 opacity, never a full white frame), two layered shockwave rings (wide and faint, medium, thin and bright), thin light streaks shooting outward, a camera punch-in that settles, and one single shower of confetti (rectangles in the ribbon colors, gold and white, flipping as they fall). The badge springs bigger; inside it the number rolls up from 0 and stops crisply on the target, with the unit under it; slow soft light rays rotate behind it in two layers at different speeds. The headline types in under it with its emphasis word in gold.
4. Thanks (beats 15–22). The badge rises a little and settles, the name rises letter by letter at the top, the thank-you line rises under the headline, a gold end button springs in, a cursor glides to its arrow and clicks it on the beat, and a ring spreads. The rays keep turning slowly.

[Motion rules]
Nothing pops in: closed-form springs with small overshoot, mask-line rises and the burst only. Numbers are read from the frame time (never from motion-blur sub-samples), so they never smear. The glow stays behind the badge and only spills past its edges; nothing covers the number. Confetti only once. A slow camera push in each scene plus a very slight handheld float, so nothing freezes for more than half a second. Real motion blur on fast moves only.

[Always-on details]
No timecode, no progress bar, no corner labels, no HUD. Light film grain. Typefaces: Black Han Sans stretched 1.3× wide for the number and the name, Noto Sans KR for the lines, from Google Fonts. Keep a 6% safe margin; the badge and number are never clipped.

[Sound]
If you can generate music, add an exciting game-reward cue at the given tempo: a pop and rising chord on each tap, a rising whoosh during the charge, a big soft hit on the burst, ticking while the number rolls and a short victory fanfare, 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, selects for background, 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 one still per beat into a contact sheet and look at it: frame 0 is a finished picture, each tap visibly changes the tier, the charge builds, the flash never whites out the frame, the number is sharp and correct when it stops, confetti appears only once, nothing covers the badge, 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

A badge that opens when you tap it — an 11-second game-style reward

Enter a number and a headline: each tap makes a bronze badge jump, spin and level up to silver and then gold. The gold badge trembles, gathers light and bursts — the number rolls up from zero and stops exactly on yours, and a single shower of confetti falls. It ends with a thank-you line and a button. Use it for opening anniversaries, thank-you milestones for customers or orders, streaks, and follower goals.

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. Check fees and terms of any outside service with that service.

How to fill it in

Use digits only for the number (1 to 5 digits fit big inside the badge). Wrap the number part of the headline in *asterisks* to make it gold. Only celebrate numbers you actually reached.

Edit without asking again

Change the number, text, background 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.