App UI Mockups: chats, terminals and code for launch videos — effect skill for UI walkthroughs

For AI agents: find the right skill in one call — curl -s "https://varg.ai/how-to/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page. From a terminal: curl -fsSL https://varg.ai/install | sh installs the vargai CLI (https://varg.ai/how-to/cli.md): vargai search and vargai install <slug> with no key, every varg model after vargai login.

Message threads, team chat, coding-agent terminals, code walkthroughs, 3D code slabs and exploded UIs at measured typing and reading speeds.

Type: Effect · UI walkthroughs
Slug: app-ui-mockups
Status: live
Publisher: varg (varg, verified)
License: MIT
Source: https://github.com/vargHQ/skills/tree/main/app-ui-mockups
Works in: Claude Code, Codex, Cursor, Gemini CLI, OpenClaw, varg Studio
Requires: Node 22 + ffmpeg (HyperFrames) or a Remotion 4 project
Cost: Free: renders locally with HyperFrames, Remotion or ffmpeg. Generated footage, voice or music is billed in varg credits with an estimate first.
Runtime: Minutes per template, mostly render time

What it does

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.

10 templates, 40 presets. Every rule in the skill cites its source; every preset is exact values (durations, easing, sizes, colors, fonts) in a JSON file the agent loads.

Template	Presets
Coding-agent terminal session: One AI coding-agent turn (Claude Code-style) in a terminal: prompt, tool calls, diff, spinner, summary	Prompt and tool calls, Code edit, Still working, Huge type
Amber booth console: A retro amber projection-booth touchscreen boots, loads your show, counts down and draws your end card	Boot, load, end card, Clean amber, Footage to amber CRT
Code editor walkthrough: A VS Code-style guided tour: scroll to a line, highlight it, open a comment thread per step	Dark 2026, Light 2026, Editor only (vertical)
3D code slab: Syntax-highlighted code on a lit, bevelled 3D slab that turns through space and settles face-on	GitHub Dark, Dimmed, One Dark, Dracula
Desktop notification banner: A macOS-style notification banner with an app icon that springs in at the top right and tucks back out	Light, Dark, Stack, Huge (phone)
Desktop terminal window: An editable classic desktop terminal window (macOS Terminal-style) that types and runs a short session	Basic (light), Pro (dark), Green retro, Amber retro
Exploded UI panels: An app screen's layers float apart in 3D around an orbiting camera, then slide home into the finished screen	Orbit and collapse, Isometric stack, Phone layers
Phone message thread: A messaging-app conversation (iMessage-style bubbles) that plays out bubble by bubble for hooks, ads and stories	Two people, Typing (dark), Group chat, Photo, voice memo, link preview, Reactions + read receipt, Huge texts
Team chat channel: Messages, unfurls, threads and reactions landing in a Slack-style channel for B2B launches and social proof	Conversation, Link unfurl, Thread, Reactions, Huge type
Terminal command run: A command typed and run in a modern GPU terminal (Ghostty-style), with output, a progress render or a git log	Command and output, Render with progress, Git log, Huge type

Rules every template follows

Rebuild the UI as HTML, don't screen-record: clean surface, deterministic timing.
Hold readable UI text clamp(0.6 + chars/15, 1.0, 6.0) s (238 wpm reading, 20 cps subtitle cap).
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.
After a command hold 3 s (short output) / 5 s (long); terminal demos under 30 s; speed up long output instead of cutting.
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.
Camera moves ~1 s before the action; zoom clamped to UI bounds; settle before text must be read.

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).

Renders locally with HyperFrames or Remotion for 0 credits; generated footage, voice or music runs through varg with a cost estimate first.

Use when

How to make a fake text message video
How to animate a Slack conversation for a product video
How to make a terminal typing animation for a launch video
How to show Claude Code in a video
How to animate code in 3D for a product launch
How to make an exploded view of an app UI

Not for

Record my screen while I use the app (use a screen recorder; this skill rebuilds UIs as HTML)
Make a text message story drama with a cliffhanger (use varg-imessage-video for the full story format)
Generate a product hero shot of the laptop (use varg-ai)

Install

Claude Code: claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg
Codex: npx skills add vargHQ/skills --skill app-ui-mockups -a codex -y
Cursor: npx skills add vargHQ/skills --skill app-ui-mockups -a cursor -y
OpenClaw: npx clawhub@latest install app-ui-mockups
Gemini CLI: npx skills add vargHQ/skills --skill app-ui-mockups -a gemini-cli -y
Any agent, with the vargai CLI: vargai install app-ui-mockups

Example output

https://s3.varg.ai/files/72c55813-c0fa-4cf2-9f64-ec4f7ed0e7ae/file_04cc0c0dbf3d.mp4 — example (credit: varg)

More UI walkthroughs skills

Zoom to the Action: The full app establishes, then the camera pushes 1.5–2× into the part being used and eases back out.
3D Tilted Dashboard Reveal: The dashboard rises from a steep 3D tilt to flat, like a screen lifting toward the viewer.
Floating UI Panels in Depth: The interface splits into its panels, which float apart in depth with parallax, then snap back.
UI Builds Itself Piece by Piece: Grey skeleton blocks pulse once, then real cards, charts and text fill in with a stagger.
Before/After UI Wipe: A divider sweeps across one screen, turning the old version into the new one underneath.
Card Expands Into Detail: A small card grows into a full detail panel in one continuous shape change.