Promptpan

All · Motion graphics · Product intro

462Product intro motion ad — from one problem line to a button click in 15 seconds

Enter a name and three features to get a vertical ad MP4 that strikes out the problem, demos each feature on screen, counts up numbers and ends on a button.

What you get

  • An 8-bar vertical ad MP4 (15 seconds at 128 BPM, 60fps)
  • An HTML file with a settings panel to change lines, features, numbers and colors
  • 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
Output format

Choose a mode, then set the size.

Full prompt 5,944 characters
Make a 15-second vertical product launch ad as one self-contained HTML file and render it to MP4. It must feel like a polished app-store launch video from a top studio: calm, premium, every element moving with purpose. Do the whole job now without asking questions.

[Inputs (use the default when empty)]
Name: "【Name】" — default Promptpan
Problem line: "【Problem line】" — words wrapped in *asterisks* are the emphasis word
Solution line: "【Solution line】" — same *emphasis* rule
Three features (slash-separated): "【Three features】"
Two numbers (slash-separated, each "value=label", e.g. 457=public cards): "【Two numbers】" — if empty, skip the numbers bar and give the extra bar to the features
End button text: "【End button】" — default: the name
Palette: "【Palette】"
  Cream · Orange = paper #F6F1E8, ink #1A1814, accent #F05A2A, second #2F5BFF, highlighter #FFD24A, card #FFFFFF
  White · Blue = paper #F3F5FA, ink #0F1630, accent #2F5BFF, second #FF5C8A, highlighter #7CE0A0, card #FFFFFF
  Night · Lime = paper #0F1013, ink #F2F2EE, accent #C8F43C, second #7C5CFF, highlighter #FF7A3D, card #1B1D23
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).

[Structure — 8 bars of 4 beats, one idea per bar, every move on a beat]
1. Problem: the problem line types itself in a heavy sans (Noto Sans KR 900, which also covers Latin), the emphasis word in a bold serif italic (Nanum Myeongjo 800, slight skew) in the accent color; on a vertical canvas use big type and break into two lines at the space nearest the middle rather than shrinking. A blinking cursor, then a hand-drawn red strike line wobbles across each line, and the whole block tips over and falls off the screen.
2. Solution: the solution line types in, a highlighter swipe paints under the emphasis word, then the line squeezes into a single accent dot.
3. Name: the dot pops into a rounded-square app icon with a starburst mark; the name assembles from its Hangul consonant and vowel pieces (decompose with Unicode arithmetic) flying in from all sides and snapping on the beat; a small grey "Free AI prompts"-style sub line fades in; the icon and name shrink up into a small header that stays for the next bars.
4–6. One feature per bar: the feature title rises through a mask with a small monospace number (01, 02, 03); a white card UI floats in with a soft shadow and demonstrates that feature with a real-looking micro-interaction — a cursor clicking into input fields and typing values with check marks, a big pill button pressed with a ripple and a "Copied ✓" toast, language chips flipping while the sample sentence slides through Korean, English and Japanese. Invent a fitting demo for whatever features are given; keep it believable, never a fake brand.
7. Numbers: an ink circle floods the screen, both numbers count up from zero and land with a small pop, labels and thin rules draw under them, then a paper circle wipes back.
8. End: the icon pops back with a burst of small colored particles, the name rises through a mask, the solution line types under it, the end button grows in with a soft colored shadow, a cursor clicks it and a ripple spreads. Hold the final frame.

[Always-on details]
A thin 8-segment story progress bar along the top (like Instagram stories) fills with time and recolors to stay readable. 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 stretched 1.3x wide for the name), loaded 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 bar reads at phone size, the problem line is crossed out, each feature demo clearly shows its feature, numbers end on the exact values, nothing is clipped, the last frame shows icon, name and button. 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 vertical launch ad in 15 seconds

This card makes a vertical ad for an app, a service or a shop. The problem line gets a hand-drawn red strike, the solution line gets a highlighter swipe, the name assembles piece by piece, and each of your three features is demonstrated on a floating card UI with a cursor that clicks, types and presses buttons. Two numbers count up on a dark screen and the video ends with a cursor clicking your button. Use it for Reels and Shorts ads, launch news or a landing-page video.

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

Wrap one word in *asterisks* in the problem and solution lines to set it in a contrasting serif italic. Keep the three features short. Write numbers as value=label; leave them empty to skip the numbers scene. Only use numbers that are true.

Change it without asking again

Edit the settings panel at the top of the HTML, preview, press Copy settings and run the single render command for a new video.