---
title: "App UI Mockups: chats, terminals and code for launch videos — AI video effect for UI walkthroughs"
description: "Message threads, team chat, coding-agent terminals, code walkthroughs, 3D code slabs and exploded UIs at measured typing and reading speeds. Install in Claude Code, Codex and Grok with one command."
url: https://varg.ai/how-to/skills/app-ui-mockups
updated: 2026-10-29
---

# 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](https://varg.ai/how-to/effects.md) · [UI walkthroughs](https://varg.ai/how-to/browse/skills/ui.md)
- **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](https://varg.ai/how-to/skills/zoom-to-the-action.md): The full app establishes, then the camera pushes 1.5–2× into the part being used and eases back out.
- [3D Tilted Dashboard Reveal](https://varg.ai/how-to/skills/tilted-dashboard-reveal.md): The dashboard rises from a steep 3D tilt to flat, like a screen lifting toward the viewer.
- [Floating UI Panels in Depth](https://varg.ai/how-to/skills/floating-ui-panels.md): The interface splits into its panels, which float apart in depth with parallax, then snap back.
- [UI Builds Itself Piece by Piece](https://varg.ai/how-to/skills/ui-builds-itself.md): Grey skeleton blocks pulse once, then real cards, charts and text fill in with a stagger.
- [Before/After UI Wipe](https://varg.ai/how-to/skills/before-after-ui-wipe.md): A divider sweeps across one screen, turning the old version into the new one underneath.
- [Card Expands Into Detail](https://varg.ai/how-to/skills/card-expands-to-detail.md): A small card grows into a full detail panel in one continuous shape change.