App UI mockups: chats, terminals, code and notifications for launch videos

Ten UI scenes rebuilt as HTML so they look clean, read at a human pace and render the same every time. Typing, streaming and holds follow measured reading and typing speeds rather than guesses.

Gates

• Invented people, real product. Use invented names and workspaces in chats; never put words in a real person's mouth or show a conversation as genuine when it is not.
• No platform logos. UIs are recognisable look-alikes; the platforms' names, logos and UI looks are their owners' trademarks.
• Free fonts only. Every font in the presets is OFL or Apache. Swap in the person's brand font only if they have a license for video.
• Seek-safe. Every value is a function of timeline time; randomness is seeded by frame. No Date.now(), requestAnimationFrame or unseeded Math.random().
• No credits here. These templates render locally for free. Generated footage, voice or music is the varg-ai skill: call estimate_cost and wait for the person's approval before any generation.

Pick a template

10 templates, 40 presets. Each reference file has the same sections: how the pros do it (every rule cited), presets, timing and numbers, how to build it, mistakes that look amateur, sources. Each JSON file holds the same presets as machine-readable values.

Workflow

1. Match the request to a template and one or two presets from the table. Say which and why in one line, and show the person the preset names with their one-line looks before building anything.
2. Read the reference for that template, and load its JSON. Take values from the JSON; do not re-guess them.
3. Build it the way the reference's "Build it" section says, starting from the named HyperFrames blocks or varg components where it names them. Drive every value from timeline time so any frame renders the same on a re-render.
4. Fit it to the brand: swap in the person's colors and fonts only where the reference allows, then re-check contrast and safe zones with the numbers in "Timing and numbers".
5. Check a draft: render stills at the key moments (entrance, hold, exit), go through "Mistakes that look amateur", and fix before the final render.

Rules that hold for every template

1. Rebuild the UI as HTML, don't screen-record: clean surface, deterministic timing.
2. Hold readable UI text clamp(0.6 + chars/15, 1.0, 6.0) s (238 wpm reading, 20 cps subtitle cap).
3. Typing 12–20 cps with seeded uneven gaps (33–200 ms, longer at spaces and before flags); 30 cps for long commands; agent/system text streams 40–80 cps in word bursts.
4. After a command hold 3 s (short output) / 5 s (long); terminal demos under 30 s; speed up long output instead of cutting.
5. Entrances ease-out, <300 ms for UI parts, transform + opacity only, from scale ≥0.93 (chat bubbles 0.75 from the sender's corner), never from 0.
6. Camera moves ~1 s before the action; zoom clamped to UI bounds; settle before text must be read.
7. Desktop UIs drawn at 1.25–1.5x; readable text ≥2.2% of frame height (terminal/code 2.6–3.3%); show only the window.
8. Theme colors from MIT theme sources; never mix palettes (Dracula, GitHub Dark/Dimmed, One Dark, VS Code 2026).
9. OFL stand-ins: Inter for SF Pro, Lato for Slack, JetBrains Mono for SF Mono, VT323 for retro.
10. No platform logos; invented people and workspaces; no invented quotes as real.

Built from

Charm VHS source + practice guide; Emil Kowalski (@emilkowalski); Adam Pietrasiak (@pie6k, Screen Studio); Netflix Timed Text + Brysbaert; VS Code/Primer/Dracula/One Dark theme sources; Apple HIG; Samuel Kraft; Thorsten Ball ("How to Demo"); David Sheldon-Hicks (Territory Studio).

Every rule in the references cites its source by number. The full list, with links and what was taken from each, is in references/sources.md. Values marked as house defaults in a reference are our own starting points where no expert published a number.

Related skills

• varg-video-edit-library: UI walkthroughs, cursors, device mockups, code and terminal edits.
• varg-imessage-video (code2video-templates): a ready iMessage renderer.
• HyperFrames registry (npx hyperframes catalog --query "…"): about 450 ready-made blocks; the references name the ones to start from.