Product promo motion graphics video
Builds a four-beat promo (hook, reveal, proof, close) in code, leaving placeholders instead of inventing numbers or testimonials.
| Category | Image & video › Video generation |
|---|---|
| Tags | GeneratingMarketerTemplateCode |
| Updated | · 1 change |
Fields to fill Product description (what, for whom, 2–3 key features)Colors and mood (e.g., yellow and navy, playful — blank = propose)Length in seconds (e.g., 20)Vertical or horizontal (blank = vertical)
Make a **promo video** for my product. Product, look, length and format are given below.
**Brand**
- If I describe colors in words ("yellow and navy"), pick matching hex values yourself and list them at the top of your answer.
- If nothing is given, propose a palette of 3–4 colors and one typeface, then use them.
- Logo: if I attached a logo image, use it as-is and do not redraw it. If you cannot place the image itself, or no logo is attached, make a simple wordmark from the product name in the brand colors instead of inventing a symbol.
- Write all on-screen text in the language I wrote the product description in.
**Structure — fill in times so they add up to the total**
| beat | what the viewer must get |
|---|---|
| hook | the problem, in one visual, no more than 6 words on screen |
| turn | the product appears; name + one-line promise |
| proof | 2–3 features, each shown as an interface or object in motion, not a bullet list |
| close | name, one call to action, held still for at least 1.5 s |
**Rules**
- recreate any interface in code (simplified shapes are fine); never invent screenshots, prices, numbers, ratings or customer names I did not give you
- if a claim needs a number I did not give, leave a visible `[number]` placeholder
- text on screen no longer than 8 words at a time, each line on screen long enough to read aloud twice
**Build — it must work for someone who does not code**
- one self-contained HTML file, all motion driven by one `render(t)` function; it plays by itself when opened
- if you cannot create files, print the whole HTML in one code block — never say you saved a file you did not
- size: 1080×1920 (9:16) for vertical, 1920×1080 (16:9) for horizontal; vertical if I did not say. 30 fps. Scale the stage to fit any browser window
- a **"Save video" button** in a corner, labeled in my language. Pressing it replays from 0, records exactly one full run of the stage with MediaRecorder at full resolution, and downloads it. Prefer MP4 when `MediaRecorder.isTypeSupported` allows it, otherwise WebM. Show a progress bar while recording, and never include the button in the recording
- after the file, give me three short steps in plain words: how to open it, how to save the video, and what to do if the saved file will not upload (screen-record the phone instead)After pasting, fill in the fields at the bottom (Product description (what, for whom, 2–3 key features) · Colors and mood (e.g., yellow and navy, playful — blank = propose) · Length in seconds (e.g., 20) · Vertical or horizontal (blank = vertical))
What this prompt does
Has the AI make a roughly 20-second promo video for your shop, service or app. Describe the product and the colors or mood you want, and the video follows a simple story: the problem, the product, what it does, and a call to action. It leaves blanks instead of inventing user counts or reviews. The result opens and plays on its own, and a Save video button downloads it (checked in Chrome). Vertical or horizontal. Tested with Claude Opus 5.5.
Change history
| Date | What changed and why |
|---|---|
| Made usable without coding: colors can be described in words, falls back to a wordmark without a logo, a "Save video" button downloads an MP4, and vertical/horizontal is selectable |
More in this category
| 1940s village life | |
| 3D Cartoon Animation: Baby Bunny Adventure | |
| 3x3 Grid Storyboarding from Photo | |
| 5x2 Reverse Construction Process - Villa Demolition Storyboard | |
| 6-Panel Storyboard Mastery |
Product promo motion graphics video