How to make an app demo video with AI

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/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://skills.varg.ai/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.

A polished demo of your app: device mockups, real screens, captions, music — for the App Store, ads or a landing page. A step-by-step tutorial for Claude Code, Codex and Grok.

Output: 15–30 s, 886×1920 (App Store) or 9:16 / 16:9 MP4 Price: in credits on varg, with a cost estimate before anything runs; the free skills below install in one command.

Recommended route

Best skills for this

  1. HyperFrames (hyperframes, HeyGen, live) — Start here: Screens, device mockups and captions rendered to exact sizes
    • 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
    • Details: https://skills.varg.ai/skills/hyperframes.md · Example: https://skills.varg.ai/previews/hyperframes.mp4
  2. Duo Foldable Phone (hyperframes-duo, HeyGen, beta) — Alternative: Two screens composited into a photo of hands holding a foldable phone
  3. Guizang Product Video (guizang-product-video, Guizang, live) — Alternative: Promos from your real product components
  4. fal UGC (fal-ugc, fal, live) — Alternative: Social cut: a face hook, then the phone filmed in hand · Needs: fal API key (FAL_KEY)
  5. Video Shotcraft (video-shotcraft, Vincent Wei, live) — Alternative: 124 shot recipes for promos built from real UI screenshots · Needs: Optional: Upload-Post API key for publishing
  6. ASO App Store Screenshots (aso-appstore-screenshots, Adam Lyttle, live) — Adds: App Store screenshots from your codebase · Needs: Gemini MCP server (@houtini/gemini-mcp) with a Gemini API key
  7. varg AI (varg-ai, varg, live) — Adds: Voiceover, music and lifestyle shots of people using the app

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?

Look?

Sound?

How to make an app demo video: step by step

  1. Record 3-5 key flows on device at native resolution; collect the logo and brand colors
  2. Pick a reference film you like and turn it into a shot table (frame ranges, moves, cuts on the beat)
  3. Build it in HyperFrames or Remotion from the real UI; approve 3-4 stills before the full render
  4. Store cut: 886x1920, 30 fps max, 15-30 s, screen only, big captions, disclosure on the end frame, a chosen poster frame; verify with ffprobe
  5. Social cut: 9:16 with a face hook and the phone in hand; repost variations of the structure that works

What works now (researched 2026-10-27)

These are now two different jobs. The App Store preview must be pure screen capture (no hands, no people), 15 to 30 s, captioned for muted autoplay, with the core action in the first seconds. The app videos that actually spread are the opposite: on TikTok, an emotional face hook plus a phone filmed in hand, re-posted with small changes for months; on X, a code-made kinetic UI launch film. Generic device-mockup montages with no hook are the weakest choice for either.

  1. In the App Store preview, show only footage captured from the app. No fingers tapping, no over-the-shoulder shots, no people holding the phone. Text overlays, narration and touch hotspots are fine. Disclose in-app purchases, subscriptions or login, and leave out prices and dates. Apple's App Review Guideline 2.3.4: 'previews may only use video screen captures of the app itself.' Apple's preview guidance: 'Don't film people interacting with a device, such as an over-the-shoulder angle or fingers tapping the screen.' (Apple Developer: App previews)
  2. Design for muted autoplay. Show the result the app gives in the first 2 to 3 seconds, use big captions that stay on screen long enough to read, and choose a strong poster frame for people who turned autoplay off. Apple: 'App previews autoplay with muted audio when users view your product page, so make sure the first few seconds of your video are visually compelling.' The preview also takes the slot the first screenshots would fill in search results. (Apple Developer: Creating your product page)
  3. Render exactly to spec: 886x1920 portrait (or 1920x886) for 6.9, 6.7 and 6.5-inch iPhones, 15 to 30 s, at most 30 fps, H.264 at 10 to 12 Mbps, stereo AAC 256 kbps, under 500 MB. Up to 3 previews per device size and language. App Store Connect accepts only these sizes, not the device's own resolution. A wrong size or frame rate is rejected at upload. (App Store Connect Help: App preview specifications)
  4. For TikTok and Reels, open on a person reacting to the problem, then film the real phone in hand using the app, with a one-line caption bar on top. When a structure works, keep re-posting variations instead of making a new polished film. The Wayk alarm app grew to a reported $200k a month with the same 'crashing out because my alarm won't turn off' video structure for 5 months. Breakdowns of it drew 6.0M and 9.6M views on X. (jacobrodri_ on X (Jul 2026))
  5. For a launch film, start from a reference you like and rebuild it shot for shot with your real UI, instead of asking a model to invent the motion. A side-by-side of an original launch film and its rebuild got 1,775 bookmarks on 65k views. The author's point: without a reference, AI falls back to the same generic motion everyone posts. (notdwd on X (Sep 2026))

Stopped working:

Prompts that work

Templates from the creators of the best current results and from the model guides. Fill in the {CAPS}.

Reference-first kinetic UI launch film (agent)

The X or landing-page film: give Claude Code or Codex a reference film and your real UI, and it rebuilds the motion shot for shot in code. Adapted from notdwd on X: full Opus prompt that rebuilt a launch sting shot for shot (1,775 bookmarks).

<inputs>
Ask me for: product name, logo file, brand colors, the one line a user types or taps, the screen that answers it, two feature names, a music track, and the reference film to rebuild. Use my real UI from {SCREENSHOTS_OR_URL}; never invent a screen.
</inputs>
<direction>
A {DURATION} s ({ASPECT}) launch film, master at 60 fps. Rebuild the reference's motion, cuts and timing shot for shot with my brand. Every shot enters already moving (exponential ease-out) and leaves on an accelerating move or a blur ramp; blur follows speed and direction. Palette: my colors mapped to roles (page, haze, accent, text). Type: {FONT}.
Story: problem line -> the real UI rises in -> a big cursor (4-7% of frame) clicks -> the action types -> the result fills the screen -> two feature cards -> logo -> end card with {CTA}.
Banned: crossfades, frozen frames except one logo hold, stock UI kits, invented dashboards, Math.random.
</direction>
<structure>
Write a frame-numbered shot table (S1-S8: frame range, positions in px, keyframes). Land hard cuts 2 frames before a beat at {BPM} BPM.
</structure>
<build>
One HTML page drawn by seek(t) as a pure function of the frame (HyperFrames or Remotion). Keyframe tables with easing, no CSS transitions or timers. Synthesize SFX from the same cue list as the picture. Master to -14 LUFS, true peak -1 dBTP.
</build>
<start>
Show me 4 stills (header, first click, finished prompt, feature cards) before you render the full film.
</start>

App Store preview store cut (agent)

The store cut: screen-only, captioned, exact spec, built in HyperFrames from your device recordings. Adapted from Apple: App preview specifications (resolutions, 15-30 s, 30 fps, codecs).

Make an App Store preview for {APP_NAME} with HyperFrames from my real screen recordings in {RECORDINGS_DIR} (captured on device at native resolution).
Spec: 886x1920 portrait (or 1920x886), {DURATION} s (15-30), 30 fps max, H.264 at 10-12 Mbps, stereo AAC 256 kbps at 44.1 or 48 kHz, under 500 MB.
Rules: only footage from inside the app. No hands, fingers, people, device frames or over-the-shoulder shots. No prices, dates or seasonal words. Never invent or redraw UI; if a screen is missing, put a labeled placeholder and tell me.
Story, built for muted autoplay:
0-3 s: the core result ({CORE_RESULT}) already on screen, caption "{HOOK_LINE}".
Middle: {FEATURE_1}, {FEATURE_2}, {FEATURE_3}, one per 4-6 s, each a real flow cut from the recording, idle parts sped up, one large caption (60 px or more, on screen at least 2 s), optional touch hotspot.
Last 3-4 s: end frame with the app name, "{TAGLINE}" and the disclosure "{IAP_OR_LOGIN_DISCLOSURE}".
Make the frame at {POSTER_SECOND} s work as the poster frame.
Audio: {MUSIC} under {VOICEOVER_OR_NONE}; captions must carry the story without sound.
Before rendering, show me the storyboard and 3 stills. After rendering, check resolution, fps, duration and audio with ffprobe and report.

Trending formats to remake

To remake one: download the example with the media-download skill, take a frame a second and the transcript, write a beat list (time, shot, camera, on-screen text, sound), keep what the format needs, swap in the person's product or character (never the creator's face, voice, logo or footage), show the beat list and stills before spending, then make it with the skill named below.

  1. Reaction hook + phone-in-hand demo: One or two seconds of a person reacting to a relatable problem, then the real phone filmed in hand doing the thing, with one caption line at the top for the whole video. Why it spreads: It is the most-copied consumer-app format on TikTok in 2026. The two breakdowns of one app's video got 6.0M views (6,479 bookmarks) and 9.6M views (6,181 bookmarks). The face hook comes from creator-ad playbooks. The demo must be real footage of the app. Keep: Keep 1-2 s of a face reacting to a relatable problem, then the real phone in hand doing the one thing, and one caption bar on top for the whole clip; swap the problem and the feature, repost variations of the same structure, and label any AI face. Make it with fal UGC (fal-ugc).
    • Example to remake: @jacobrodri_ on X, 2026-05-09, 6M views, 6K saves: A breakdown post that plays the Wayk alarm app's own TikTok: a crying face hook, then the phone in hand, 'Object Hunt' mission, camera finds shoes, 'Alarm turned off!'. One caption bar runs the whole 35 s.
    • Example to remake: @jacobrodri_ on X, 2026-07-12, 9.6M views, 6K saves: The same app two months later with the same structure and a new mission ('take a pic of my cat'). Proof that the format is re-posted, not reinvented. Both clips are the app's own TikToks shown by a growth analyst.
  2. Kinetic UI launch film: Problem line in big type, then the real UI in 3D tilt and tight zooms (typing a prompt, items snapping into place), then the payoff line and the logo. 20 to 35 s, rendered from code, so every pixel is the real interface. Why it spreads: This is the launch format founders on X save the most: 1,441 bookmarks on 102k views for a fully code-made calendar-app film, and 1,775 bookmarks for a reference rebuild. Because it is built from real components, the same project can be exported as an App Store preview without the 3D tilt. Keep: Keep the problem line in huge type, the real UI entering already moving, a big cursor whose click causes the next shot, cuts locked to the beat, the payoff line and a logo end card; rebuild a reference film shot for shot with your own UI and colors. Make it with HyperFrames (hyperframes).
  3. Captioned App Store preview (screen only): 15 to 30 s of full-screen captures in three beats (the core result, then two or three features, then an end frame with the disclosure), with large captions and no device frame or hands. Why it spreads: It is the only video Apple shows on the product page and in search results. It autoplays muted, you get up to 3 per locale, and breaking the rules means rejection. Keep: Keep the core result in the first 3 s, 2-3 features each with one large caption, and an end frame with the in-app purchase or login disclosure at 886x1920, 30 fps; swap the flows, and never add hands, device frames, prices or dates. Make it with HyperFrames (hyperframes).

Open-source repos

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.

Related tutorials