---
title: "How to make an app launch video with AI"
description: "Your screen recording and a script in, a 30 s app launch video out: hook, one workflow, call to action. 89 credits on varg; 50 free to start."
url: https://varg.ai/how-to/make-an-app-launch-video
updated: 2026-11-11
---

# How to make an app launch video with AI

> **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`.

A launch video for your app from a real screen recording plus generated shots: about 30 s with a hook, one workflow and a call to action, voiceover and music. A step-by-step tutorial for Claude Code, Codex and Grok.

**Output:** About 30 s, 16:9 MP4 for X, Product Hunt and a landing page; 9:16 for Reels and TikTok
**Cost:** about 89 credits ($0.89) for a 30 s 16:9 launch video for your app from one screen recording, with a generated hook shot, voiceover and music, rendered on your machine; 1 credit = $0.01. With your key, `POST https://api.varg.ai/v2/estimate` with the same body gives the exact price first.
**Requires:** a varg key in `VARG_API_KEY` (https://varg.ai/dashboard/api); Node.js 22+ (https://nodejs.org); FFmpeg (`brew install ffmpeg` or `apt install ffmpeg`).
**Install the main route:** `curl -fsSL https://varg.ai/install | sh && vargai install hyperframes varg-ai video-script varg-video-edit-library video-sound`
**Part of:** [How to make SaaS launch and demo videos with AI](https://varg.ai/how-to/make-saas-launch-and-demo-videos.md) — everything for SaaS launch videos on one page

## Recommended route

- **Skill:** HyperFrames (`hyperframes`) — The film as HTML: your screen recording, the generated hook, the type and the end card on one timeline, rendered to MP4 on your machine
- **Generation:** HyperFrames renders the film on your machine for free; varg makes the generated hook shot ([`kling_v4`](https://varg.ai/models/kling_v4.md)), the voiceover ([`eleven_v4`](https://varg.ai/models/eleven_v4.md)) and the music ([`eleven_music`](https://varg.ai/models/eleven_music.md)) on one key. New varg accounts get 50 free credits, which cover the voiceover and the music; the generated hook shot is most of the price.
- **Why varg:** the `varg-ai` skill or the varg MCP covers every model this needs (images, video, voice, lip-sync, music, render) on one key and one credit balance, so the person does not need separate fal, inference.sh, Higgsfield, Runway or ElevenLabs accounts.

## Run it

A 30 s 16:9 launch video for your app from one screen recording, with a generated hook shot, voiceover and music, rendered on your machine. Replace the `<placeholders>`. Every call was checked against the API's public schema and price list on 2026-11-11, so run it as it is.

1. Record one workflow of the running app (15-20 s, native resolution, nothing private on screen), then start a project from the recording:

```bash
npx hyperframes init app-launch --resolution=landscape --video workflow.mp4 --skip-transcribe --non-interactive --skip-skills && cd app-launch
```

2. Generate the hook shot: the world around the app, never a screen:

```bash
curl -X POST https://api.varg.ai/v2/tools/video/call -H "Authorization: Bearer $VARG_API_KEY" -H "Content-Type: application/json" -d '{"model":"kling_v4","prompt":"<the person and the moment your app fixes, one small action>, handheld, natural light. No screens, no text, no logos.","aspect_ratio":"16:9","resolution":"720p","duration":5}'
```

3. Make the voiceover: the result or the pain first, one workflow, one ask with the URL:

```bash
curl -X POST https://api.varg.ai/v2/tools/speech/call -H "Authorization: Bearer $VARG_API_KEY" -H "Content-Type: application/json" -d '{"model":"eleven_v4","text":"<the script, 45-60 words>","voice":"rachel"}'
```

4. Make the music:

```bash
curl -X POST https://api.varg.ai/v2/tools/music/call -H "Authorization: Bearer $VARG_API_KEY" -H "Content-Type: application/json" -d '{"model":"eleven_music","prompt":"Confident modern instrumental for an app launch video, no vocals, 120 bpm, a clean kick on every beat, ends on a hit","duration":30}'
```

5. Download them and find the beats of the music:

```bash
curl -o hook.mp4 "<hook URL from step 2>" && curl -o voice.mp3 "<voice URL from step 3>" && curl -o music.mp3 "<music URL from step 4>"
npx hyperframes beats music.mp3 --json
```

6. In index.html set the root to 30 s and lay out three beats: the hook at 0-5 s, the recording at 5-25 s with a zoom on each action, then the app name, one line and the URL at 25-30 s. Add the voice and the music, aim the voice at -14 LUFS, then check it and look at the frames:

```bash
# in index.html, inside the root (data-duration="30"); move the recording that init placed to data-start="5" data-duration="20":
# <video id="hook" class="clip" src="hook.mp4" muted playsinline data-start="0" data-duration="5" data-track-index="0" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover"></video>
# <audio id="voice" src="voice.mp3" data-start="0" data-duration="<voice length>" data-track-index="2" data-volume="1"></audio>
# <audio id="music" src="music.mp3" data-start="0" data-duration="30" data-track-index="3" data-volume="0.35"></audio>
npx hyperframes normalize-audio --target voice --lufs -14 --write
npx hyperframes check && npx hyperframes snapshot --frames 6
```

7. Render the MP4:

```bash
npx hyperframes render --output launch.mp4
```

Each call answers `202` with a job: poll `GET https://api.varg.ai/v2/jobs/{id}` until `status` is `completed`, then read `output.outputs[0].url`. Local files go up first: `curl -X POST https://api.varg.ai/v2/files -H "Authorization: Bearer $VARG_API_KEY" -H "Content-Type: video/mp4" --data-binary @file.mp4` answers with a `url`. Every input of a model: https://varg.ai/models/llms.txt

## Best skills for this

1. **HyperFrames** (`hyperframes`, HeyGen, live) — Start here: The film as HTML: your screen recording, the generated hook, the type and the end card on one timeline, rendered to MP4 on your machine
   - Claude Code: `claude plugin marketplace add heygen-com/hyperframes && claude plugin install hyperframes@hyperframes`
   - Codex: `npx skills add heygen-com/hyperframes --skill hyperframes -a codex`
   - Cursor: `npx skills add heygen-com/hyperframes --skill hyperframes -a cursor`
   - Gemini CLI: `npx skills add heygen-com/hyperframes --skill hyperframes -a gemini-cli`
   - Any agent, with the vargai CLI: `vargai install hyperframes`
   - Details: https://varg.ai/how-to/skills/hyperframes.md · Example: https://s3.varg.ai/how-to/previews/400daa5dc577/hyperframes.mp4
2. **Launch Clips in Remotion Reviewed by Four AI Critics** (`launch-clip-remotion-four-critics`, EveryInc, live) — Alternative: The same job in Remotion: a launch brief and a screen recording to a 15-30 s clip, checked by four critic agents
   - Claude Code: `git clone https://github.com/EveryInc/product-launch-video.git && cd product-launch-video && npm install`
   - Any agent, with the vargai CLI: `vargai install launch-clip-remotion-four-critics`
   - Details: https://varg.ai/how-to/skills/launch-clip-remotion-four-critics.md
3. **OpenMontage Screen Demo** (`openmontage-screen-demo`, Calesthio, live) — Alternative: Polishes real screen captures into a demo: callouts, zoom crops, subtitles, cleaned audio
   - Claude Code: `git clone https://github.com/calesthio/OpenMontage.git && cd OpenMontage && make setup`
   - Any agent, with the vargai CLI: `vargai install openmontage-screen-demo`
   - Details: https://varg.ai/how-to/skills/openmontage-screen-demo.md
4. **Launch Films From the Product's Real UI With Click Checks** (`launch-film-real-ui-verified`, jammaru, live) — Alternative: Renders the product's real page or components instead of a recording, with a check on every click, zoom and frame
   - Claude Code: `npx skills add jammaru/launch-video-craft`
   - Any agent, with the vargai CLI: `vargai install launch-film-real-ui-verified`
   - Details: https://varg.ai/how-to/skills/launch-film-real-ui-verified.md · Example: https://github.com/jammaru/launch-video-craft/raw/main/assets/samples/emdash-preflight-preview.mp4
5. **varg AI** (`varg-ai`, varg, live) — Adds: The generated hook shot, the voiceover and the music on one key
   - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg`
   - Codex: `npx skills add vargHQ/skills --skill varg-ai -a codex -y`
   - Cursor: `npx skills add vargHQ/skills --skill varg-ai -a cursor -y`
   - OpenClaw: `npx clawhub@latest install varg-ai`
   - Any agent, with the vargai CLI: `vargai install varg-ai`
   - Details: https://varg.ai/how-to/skills/varg-ai.md · Example: https://s3.varg.ai/how-to/previews/7df061df8dcb/varg-ai.mp4
6. **Video Script** (`video-script`, varg, live) — Adds: The script before anything is made: one promise, every line sized to its seconds
   - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg`
   - Codex: `npx skills add vargHQ/skills --skill video-script -a codex -y`
   - Cursor: `npx skills add vargHQ/skills --skill video-script -a cursor -y`
   - Gemini CLI: `npx skills add vargHQ/skills --skill video-script -a gemini-cli -y`
   - Any agent, with the vargai CLI: `vargai install video-script`
   - Details: https://varg.ai/how-to/skills/video-script.md · Example: https://s3.varg.ai/files/4325c578-378d-4c43-ae53-3cc3218df1ea/file_a09895414952.webp
7. **Video editing skills for Claude Code and AI agents** (`varg-video-edit-library`, varg, live) — Adds: Zoom to the action, a zoom on every click, cursors and device frames for the recording
   - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg`
   - Codex: `npx skills add vargHQ/skills --skill varg-video-edit-library -a codex -y`
   - Cursor: `npx skills add vargHQ/skills --skill varg-video-edit-library -a cursor -y`
   - Any agent, with the vargai CLI: `vargai install varg-video-edit-library`
   - Details: https://varg.ai/how-to/skills/varg-video-edit-library.md
8. **Video Sound** (`video-sound`, varg, live) — Adds: A voice picked from candidates, music cut to bars and a mix checked by script
   - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg`
   - Codex: `npx skills add vargHQ/skills --skill video-sound -a codex -y`
   - Cursor: `npx skills add vargHQ/skills --skill video-sound -a cursor -y`
   - Gemini CLI: `npx skills add vargHQ/skills --skill video-sound -a gemini-cli -y`
   - Any agent, with the vargai CLI: `vargai install video-sound`
   - Details: https://varg.ai/how-to/skills/video-sound.md · Example: https://s3.varg.ai/files/194b94d0-58ff-4e8b-91de-4f1959d04013/file_32cbafbd0791.mp4

## Ask the person first

Put these choices in front of the person before spending anything. Paste the example link next to each option: people pick a look by seeing it.

**Where will it run?**

- X, Product Hunt or a landing page: 16:9
- Reels and TikTok: 9:16
- Both

**The hook?**

- A generated shot of the moment the app fixes — [varg AI](https://varg.ai/how-to/skills/varg-ai.md) · example: https://s3.varg.ai/how-to/previews/7df061df8dcb/varg-ai.mp4
- The finished result on the real screen, no generated shot
- One line of kinetic type — [Kinetic Type Art: 17 typography pieces on the beat](https://varg.ai/how-to/skills/kinetic-type-art.md) · example: https://s3.varg.ai/files/72c55813-c0fa-4cf2-9f64-ec4f7ed0e7ae/file_a21ee5f206b4.mp4

**The recording?**

- Full screen, zooming to the part in use — [Zoom to the Action](https://varg.ai/how-to/skills/zoom-to-the-action.md)
- A zoom on every click — [Auto Zoom on Every Click](https://varg.ai/how-to/skills/auto-zoom-on-click.md) · example: https://s3.varg.ai/how-to/previews/e57251ca12d3/take-auto-zoom-on-click.mp4
- Inside a phone frame — [Phone Frame with Live Screen](https://varg.ai/how-to/skills/phone-frame-live-screen.md) · example: https://s3.varg.ai/how-to/previews/691a756f7871/lib-magic-ui-iphone.mp4

**Sound?**

- Voiceover + music
- Music only

## How to make an app launch video: step by step

1. Write the script first: the result or the pain in the first 3 s, one workflow, one ask with the URL; 45-60 spoken words for 30 s, so the product has room to be watched
2. Record one workflow of the running app, 15-20 s at native resolution, with real data and nothing private on screen: this recording is the only UI in the video
3. Generate the hook: one 5 s shot of the world around the app (the person, the place, the problem), never a screen, text or a logo; approve it before going on
4. Build it in HyperFrames: hook 0-5 s, the recording 5-25 s with a zoom on each action, then the name, one line and the URL 25-30 s
5. Lay the voiceover and the music under it, the voice aimed at -14 LUFS and the music about 9 dB lower; check the frames, then render 16:9, and a 9:16 cut from a portrait project if you post to Reels or TikTok
6. Before posting: the first frame is not a logo, every claim on screen is something the recording shows, the URL holds for 2-3 s

## Set up varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.

- Any agent with a terminal: `curl -fsSL https://varg.ai/install | sh` (Windows: `irm https://varg.ai/install.ps1 | iex`), then `vargai login` and every model is a command — `vargai generate_video …`, `vargai estimate_cost …` (https://varg.ai/how-to/cli/)
- Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` (skill + hosted MCP)
- Codex, Cursor, Gemini CLI, OpenClaw: `npx skills add vargHQ/skills --skill varg-ai -a <agent> -y`
- Grok and any agent that reads SKILL.md: `npx skills add vargHQ/skills --skill varg-ai`, or point it at the skill's SKILL.md
- Claude.ai, ChatGPT, any MCP client: connect `https://mcp.varg.ai/mcp`
- API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt

## SaaS launch and demo videos with AI agents

For founders and product teams who launch on X, Product Hunt and the App Store: the launch film, the live demo, the founder video, the app preview and the feature drop, built by Claude Code, Codex or Grok from your real product UI.

Start with the overview: [How to make a SaaS launch video with AI](https://varg.ai/how-to/make-a-saas-launch-video.md)

**Make**

- [How to make a product launch video: the beat sheet](https://varg.ai/how-to/product-launch-video-beat-sheet.md)
- [How to make a launch video from a reference film](https://varg.ai/how-to/make-a-launch-video-from-a-reference.md)
- [Launch video formulas: 28 formats that work](https://varg.ai/how-to/launch-video-formulas.md)
- [How long should a launch video be? Numbers from 1,952 films](https://varg.ai/how-to/how-long-should-a-launch-video-be.md)
- [Launch video examples from 293 brands](https://varg.ai/how-to/launch-video-examples-by-brand.md)
- How to make an app launch video with AI (this page)
- [How to make an app demo video with AI](https://varg.ai/how-to/make-an-app-demo-video.md)
- [How to turn release notes into a changelog video with AI](https://varg.ai/how-to/turn-release-notes-into-a-changelog-video.md)
- [How to make an explainer video with AI](https://varg.ai/how-to/make-an-explainer-video.md)
- [How to make a logo animation with AI](https://varg.ai/how-to/make-a-logo-animation.md)
- [How to make an animated chart video with AI](https://varg.ai/how-to/make-an-animated-chart-video.md)

**Edit and post**

- [How to add animated captions to a video with AI](https://varg.ai/how-to/add-animated-captions-to-a-video.md)
- [How to add voiceover and music to a video with AI](https://varg.ai/how-to/add-voiceover-and-music-to-a-video.md)
- [How to crop a video to 9:16 vertical with FFmpeg](https://varg.ai/how-to/crop-a-video-to-vertical-with-ffmpeg.md)
- [How to make YouTube video thumbnails with AI](https://varg.ai/how-to/make-youtube-video-thumbnails.md)

## Related tutorials

- [How to make a SaaS launch video with AI](https://varg.ai/how-to/make-a-saas-launch-video.md): A polished launch film for an app or website: UI cards, device mockups, kinetic type, music.
- [How to turn release notes into a changelog video with AI](https://varg.ai/how-to/turn-release-notes-into-a-changelog-video.md): Release notes, a PR or a GitHub repo turned into a short video for X or LinkedIn.
