Product showcase video, made with code.
A product showcase video shows your real product doing real things, one feature at a time, in about 20 seconds. With vawe you capture the real screens from a URL, write one HTML page, and render it to an mp4. You can write the page yourself or ask a coding agent to write it.
What a showcase video contains.
A good showcase is one canvas with four screens of the product and a camera that moves from one to the next. Four features then read as one product, not four slides. Here are the parts, in order:
- Screen one is a real capture from the first frame. A cursor presses one real button, and the done state stays until 3.5 s.
- The camera pans right to screen two. A card builds on it and holds until 7.5 s.
- The camera pans up and right to screen three. Another press, and the result stays until 11.5 s.
- The camera pans down to screen four, then 1.4 s of quiet.
- The big moment: the cursor lands on a status, the camera zooms in on it, and it holds until 16.3 s.
- The last screen leaves upward in 0.22 s. The brand name settles from 16.7 s, and the logo holds still until 20 s.
Every screen is a capture of your real site or app, never a placeholder card. If a feature is not on your site, the film does not show it.
Timing: 20 seconds is the norm, 9 to 40 is the range.
A brand or product film runs 9 to 40 seconds. Under 15 seconds, most films work better as one continuous action. The example above is 20 seconds.
Each screen holds 1.2 seconds or more, so a viewer can read it before the camera leaves. Exits are quick (0.22 s). Entrances are slower (0.6 s or more). Neighbouring cuts change axis or direction, so you never get three slides to the left in a row.
Examples.
Posts from our inspiration wall that show a product on screen. Each links to the creator’s post on X.
- One shape that becomes 8 to 12 UI states by @twoclipping
- A product video in code, synced to the beat by @twoclipping
- Industrial software doesn’t have to feel like industrial software by @DilumSanjaya
The video components a showcase is built from.
A pan from screen to screen, a press that does its job, a zoom to one status, and the screens leaving as the logo arrives. Open one for its clip, code and notes.
Make one with vawe.
Start from your product’s URL. The first command writes a starter page and a brief, and saves screenshots of the site in the film’s assets folder. Then draft, review and render, in this order.
bin/vawe frame <page> --world allgives one still per scene, to check before any motion.bin/vawe dev <page>renders a half-size draft with sound.bin/vawe critique <page> --freshasks a separate session to review the draft, then you fix the seconds it names.- You approve the plan and the full draft. Then
bin/vawe ship <page>renders the final film.
To show a real page worked by a cursor, add a steps file and --tour: vawe drives the page with real mouse events and writes one mp4 to use inside the film.
bin/vawe new acme-showcase \ --request "a product showcase for acme" \ --from-url https://acme.com --full bin/vawe frame films/acme-showcase/page.html \ --world all bin/vawe dev films/acme-showcase/page.html
Questions.
How long should a product showcase video be?
About 20 seconds. A brand or product film runs 9 to 40 seconds.
Can I use my real product screens?
Yes, and you should. The template uses real captures only, and bin/vawe new --from-url <url> saves screenshots of your site for the film. The palette, fonts and favicon come from the site, and nothing else is used.
What if the product has no site yet?
Then there is nothing real to capture, so it is not a showcase. Use the template for invented products instead.
Can an AI agent make it?
Yes. A film is one HTML page, so any coding agent can write it, and vawe ships skills for each step. You approve the plan and the full draft. See vawe for AI agents.
Which screen shapes does it support?
16:9, 9:16, 1:1, 4:5 and 4:3, and any other whole ratio with the --aspect flag on a render command. The page never crops: it lays out for the shape.