UI demo
Make a film that shows a product interface working, with a cursor, real captures and a result the viewer can see.
At the end of this page you have a filmA film is the mp4 file that the renderer makes from one page. of 12 to 60 s in which a cursor uses an interface and the interface answers. Every click has a visible result.
You need a product. For a real product you need its URL. For an invented product the brief must say to invent the interface.
What this film needs
A UI demo shows a real artifact working. The show-real-thing rule is the first test: a click with no result is not a beat, and chrome with no function is not a beat. A real product is shown as it is, from captures or from its own DOM. An invented product gets a real interface, designed for the film.
Pick the template from the subject:
| Subject | Template | Length |
|---|---|---|
| a real product or site | brand-launch-from-url.md | 9 to 40 s |
| an invented product | beat-sheet.md | the rows you plan |
| a mechanism you can drive | interactive-lab-capture.md | 20 to 60 s |
| one element that becomes many UI states | ui-morph-loop.md (see Loops) | 12 to 16 s |
Three chains in prompts/moves/RECIPES.md fit a UI demo. Recipe 10 is an AI product demo of 22 s: a prompt becomes an answer, the answer becomes a deliverable, and the deliverable is sent. Recipe 11 is a feature tour of 20 s on one canvas, with a camera that pans between stations. Recipe 9 is a problem-to-fix launch of 21 s.
The spectacleThe spectacle is the second of the one big moment in a film, set by <meta name="spectacle" content="6.2">. is usually the result: the check that lands, the figure that settles, the status the camera zooms into. Quiet comes before it, with the interface held still for about 2 s.
Steps
Write the brief
bin/vawe new ledger-demo --from prompts/brand-launch-from-url.md --length 22 --aspect 16:9Swap the template for the subject. Fill the Shots, Words and Objects tables. List each capture with its source URL.
Capture a real flow as one clip
bin/vawe shot https://example.com --tour steps.json --w 1280 --out films/ledger-demo/assets/tour.mp4A real page worked by a cursor is one mp4, not screenshots. Hover and click are real events. Add --scale 3 for a close-up that must stay sharp.
Mark the UI so the checks read it
Put UI that is the subject inside an element with data-ui. Its text floor is 3 percent of the frame height. Product labels that only add texture take data-chrome, with a floor of 2.5 percent. Other copy needs a cap height of 6 percent. Read Text and fonts.
Draft and read the click frames
bin/vawe dev films/ledger-demo/page.html
bin/vawe strip films/ledger-demo/page.html --cutsCheck that the frame after each click shows what the click did. Then do the motion pass.
Moves that fit
The index in prompts/moves/README.md lists them by job. Show a click doing its job: cursor-click, notification-pop, success-check, command-palette-summon. Show a real UI arriving: card-assemble, skeleton-reveal, clip-expand, device-tilt-stage. Point at one part: spotlight-dim, bracket-callout, ui-focus-zoom. Show an AI product answering: ai-stream-response. Show an agent doing steps: agent-progress, terminal-run. Read Motion.
Pitfalls from the taste digest
- Feedback follows its cause (
cause-first). A burst comes after the press. A sound lands on its action. - The camera holds still (
constant-camera). One move at the spectacle at most. A part moving inside the frame keeps a hold alive. - Read lines (
readable-hold). A UI screen dwells at least 1.2 s (shot-length-varies). - No tells (
no-tells). No glow on UI chrome unless the brief asks.
Four traps come from the recipes. Use one window for clip-expand and ai-stream-response, with the same pixels at the swap. A capture cannot morph, so rebuild only the button as live DOM when a move must animate it. Exit the cursor down before each pan, or it streaks with the pan. Pick a zoom target with no glyph under it, such as a status pill.
Common mistakes
| What you see | Why | What to do |
|---|---|---|
| The click shows no result | The next frame is not the done state | Add the result frame, or cut the click |
| UI text is hard to read | The mock is scaled below its floor | Crop the capture instead of scaling it |
| Two cursor clicks look the same | A template pattern | Change the move, as recipe 11 does with card-assemble |