How to make a SaaS 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.

A polished launch film for an app or website: UI cards, device mockups, kinetic type, music. A step-by-step tutorial for Claude Code, Codex and Grok.

Output: 25–35 s film (up to 90 s for a founder demo), 16:9 and 9:16 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: HTML → MP4 launch films, explainers and social clips, from a website or a brief
  2. Guizang Product Video (guizang-product-video, Guizang, live) — Start here: Software promos built from your real product components
  3. Onetake (onetake, Patrick, live) — Alternative: Launch films in one continuous camera move
  4. Remotion Best Practices (remotion-best-practices, Remotion, live) — Alternative: The same in React with Remotion
  5. Herk Edit Kit (herk-edit-kit, Nate Herk, live) — Alternative: Founder-narrated screen demo: one take, flub cuts, captions
  6. HyperFrames Registry (hyperframes-registry, HeyGen, live) — Adds: ~450 ready blocks: transitions, titles, device mockups
  7. varg AI (varg-ai, varg, live) — Adds: Voiceover, music and any generated shots on one key
  8. Kinetic Typography (iart-kinetic-typography, iart.ai, live) — Adds: Word and mask reveals for the kinetic-type beats
  9. Video Shotcraft (video-shotcraft, Vincent Wei, live) — Adds: 124 shot recipes for promos built from real UI screenshots · Needs: Optional: Upload-Post API key for publishing

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.

Look?

Length?

Voiceover?

Aspect ratio?

How to make a SaaS launch video: step by step

  1. Pick 1-2 reference films and have the agent write down why they work (cuts, pacing, first motion); never copy their assets
  2. Collect logo, colors, fonts, real screenshots and a facts file that is the only source for numbers and claims on screen
  3. Ask for 3 storyboard variants on a beat grid (12-15 shots per 30 s, product on screen by second 3); pick one and approve one still per scene
  4. Build in code (HyperFrames or Remotion): cuts on downbeats, SFX placed by measured peak, -14 LUFS
  5. Send the render to a fresh critic (contact sheet, frozen time, sound-off read), fix the biggest problem, then render 16:9 and 9:16

What works now (researched 2026-10-27)

In 2026 the launch videos that spread on X are 25–35 s films that agents build in code (HyperFrames, Remotion, Claude): kinetic type plus the real product UI, cut to music, often posted with the full prompt. The biggest launches open on the product doing its job in the first seconds (Claude Design, 64.6M views). What stopped working: logo intros, voiceover preambles and the default AI look of centered text on a gradient where everything fades in.

  1. Put the product on screen, doing its job, within the first 3 seconds. No logo intro, no voiceover preamble. Say what it is and why it matters by second 10–20. Anthropic's Claude Design launch (64.6M views, 78k bookmarks) opens on the prompt box and builds a 3D globe in under 10 s. Farza (Clicky, 3M views, 7,000 downloads) says the first 3 seconds decide the scroll and the first 10–20 s must explain the product. (Bohdan Motion, breakdown of the Claude Design launch video (X, Jul 2026))
  2. Direct from 1–2 reference videos and real assets (logo, colors, fonts, product screenshots). Ask for 3 storyboard options, approve one still per scene, then animate and give camera notes ('slow every zoom to 0.7x', 'hard cut here'). The most-saved workflow post of the year (644k views, 18,186 bookmarks): without a reference the model falls back to centered text, a gradient and fade-ins; without real screenshots the UI looks fake; stills are far cheaper to fix than renders. (@rexan_wong, how pro Opus motion videos are made (X, Sep 2026))
  3. Keep the film under 60 s (25–35 s is the sweet spot) with 12–15 shots per 30 s, each 1.4–3.5 s long. Frame one must be a finished picture, not a word halfway through flying in. Wistia's 2026 data (13M+ videos): videos under 1 minute hold 52% of viewers on average and most viewers leave near the halfway point, so the key message goes in the first half. The top agent-made launches in this section run 14–33 s. (Wistia, optimal video length (2026 State of Video data))
  4. Make it work with the sound off: the story lives in on-screen type and UI. Then cut every scene change on a beat, place each sound effect by its peak, and master to about -14 LUFS. A widely copied launch prompt (128k views, 2,839 bookmarks) sets 'a first-time viewer understands it with the sound off' and 'no more than ~1 s of frozen screen per 30 s' as pass/fail checks; the viral one-take prompts align every cut and SFX to the beat grid. (@everestchris6, high-end motion video prompt (X, Sep 2026))
  5. Render 16:9 for X and a 9:16 cut for Instagram and TikTok, and track signups per platform. If a founder narrates, clean audio matters more than picture. In the YC talk, Farza says horizontal suits X, Instagram drives about 70% of his traffic, and X views converted under 1% while one YouTube video converted 20%. Bad audio loses viewers faster than low-res video. (Y Combinator, Farza's launch video playbook (Oct 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-led launch film brief (agent)

The main agent prompt: brief, facts file, storyboard variants, build rules and a fresh-critic loop for a 25-35 s launch film in code Adapted from @everestchris6, high-end motion video prompt (X, Sep 2026).

You design and build motion videos in code (HyperFrames or Remotion, GSAP, three.js only where 3D explains something). The video isn't done until it holds up next to the references.

BRIEF
- Product: {PRODUCT}, {ONE_LINE_PROMISE}
- Viewer: {AUDIENCE}, who cares about {PAIN}
- End action: {CTA}
- Length and sizes: {SECONDS} s, 16:9 and 9:16
- Brand: {LOGO_FILE}, {BRAND_COLORS}, {FONTS}
- Facts file: {FACTS_PATH}, the only source for any number, name or claim on screen
- Assets: real screenshots in {SCREENSHOTS_DIR}
- References: {REFERENCE_VIDEOS} (study only; never copy footage, logos, layouts or music)

STORYBOARD FIRST
Give me 3 storyboard variants as tables: time, what's on screen, its job, how it exits, what carries into the next shot. 12-15 shots per 30 s, each 1.4-3.5 s. The product is on screen doing its job by second 3. Frame one is a finished picture. Then one still per scene for the variant I pick.

MOTION
One object carries the story across shots. The front element becomes the transition. Speed always changes: land slow, leave fast. Never repeat a layout. Type never sits on busy picture.

BUILD AND CHECK
Every value is a function of timeline time. Cut on the beat, one soft whoosh per scene change, clicks only on real actions, -14 LUFS. Send each render to a fresh critic that never saw the build: contact sheet every 0.2 s, frozen screen under 1 s per 30 s, text contrast at least 4.5:1, it reads with the sound off. Fix the biggest problem first and repeat.

Beat-grid launch film, 10 bars at 120 BPM (agent)

Kinetic type + real UI launch film: every cut on a downbeat, banned-FX list, code-rendered with motion blur Adapted from @twoclipping, beat-synced launch film prompt with banned-FX list (X, Sep 2026).

<inputs>
Ask me for: the product name and a one-line promise, 3-5 real UI moments to show, one accent color, real clips or screenshots I own, and a royalty-free song with a clear drop, licensed for commercial use.
</inputs>
<direction>
High-end minimal. One idea per shot, lots of empty space, one accent color ({ACCENT}), one clean sans ({FONT}) with tight tracking. Masked type reveals, match cuts, one camera language. Real UI and footage only, never placeholder cards. No full stops in on-screen text.
Banned: shockwave rings, particle bursts, RGB split, camera shake, lens flares, neon glows, grid floors, flashing backgrounds, bouncy easing.
</direction>
<structure>
10 bars at 120 BPM, 2 s each. Bar 1: the hook "{HOOK}" lands word by word on the beats. Bar 2: one hook word morphs into the product UI; a cursor types and clicks. The drop: a circle opens out of the button into a dark scene. Then one move per bar: {UI_MOMENT_1}, {UI_MOMENT_2}, {UI_MOMENT_3}, the key result as big type, stats from {FACTS_FILE} on push cuts, a 3-word ticker, logo reveal, fade to black.
</structure>
<build>
1. One HTML file at 1920x1080. Every style is computed from time inside seek(t): no CSS animations, no timers.
2. Analyze the song: tempo, beat grid, the drop. Every cut on a downbeat, every UI hit on a beat.
3. Render with Playwright, 3 subframes per frame blended with ffmpeg tmix, 60 fps.
4. Place each sound effect by its measured peak, quiet under the music. Loudnorm to -14 LUFS.
5. Probe 20+ frames before the full render; fix anything cluttered or hard to read.
</build>
<start>Ask me for the inputs, then show a storyboard with every timing on the beat grid before writing code.</start>

One-take launch film (agent)

No cuts: every scene is born from the previous shape, driven by a cursor on the beat; last frame = first frame Adapted from @twoclipping, one-take launch film prompt (X, Sep 2026).

<direction>
A keynote-style launch film for {PRODUCT}, 2D, one continuous take, {SIZE} (e.g. 1440x1440). Every scene is made out of the previous one: nothing fades, blurs or cuts. Objects change shape instead: text rises out of a mask line, icons pop from zero on a spring, bars draw across, a shape floods the frame and contracts into the next scene. {CANVAS_COLOR} canvas, {UI_COLOR} UI, {DISPLAY_FONT} for the wordmark. A cursor drives every change with real clicks, drags and long-presses; the camera zooms so each moment fills the frame.
Banned: crossfades, blur-ins, 3D flips, particles, glows, holds longer than 1 s, anything that looks like a template.
</direction>
<structure>
{BPM} BPM, something happens on every beat. Open: the wordmark squeezes into its period, the dot grows into a pill, a label rises inside it. Then {SCENE_CHAIN: 4-6 product moments, each grown from the last shape}. The biggest transformation lands on the drop. Close: a shape floods the frame, holds a beat, contracts back to the dot, and the letters spring out on the final beat. Last frame = first frame.
</structure>
<build>
One HTML file; every style computed from time inside seek(t); springs are closed-form so any frame renders the same. A flood overscales past the corners and takes about 0.3 s. Footage is re-encoded all-intra and awaited on 'seeked'. A downloaded SFX for every event, placed by its measured peak; the song starts on a downbeat; -14 LUFS. Render with Playwright, 4 subframes per frame blended with tmix, 60 fps. Check one frame per beat, then scan for single-frame pops.
</build>
<start>Ask me for the inputs (a one-word wordmark, 9-12 photos or screenshots, a ~120 BPM song with a drop and a quiet breakdown), then show the beat map and 4 stills before writing the film.</start>

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. Kinetic type + real UI launch film: Big words state the problem, the real product UI answers it, the name lands, an end card closes. 25–35 s, cut to music, Linear/Apple look. Why it spreads: The default format for agent-made launches in 2026: deedydas' 26 s film made in 1 minute for about $2 got 352k views and 4,686 bookmarks; a fully code-made calendar launch (repo shared) got 1,441 bookmarks. Keep: Open on one big word or one stat (e.g. 31% to 88%) in the first second, let the real product UI answer it, land the name by ~15 s, close on an end card; 25-35 s cut to music, restrained type. Swap in your own stat, real screenshots and wordmark. Make it with HyperFrames (hyperframes).
  2. Live product demo film: The product does the job on screen from the first frame: a prompt is typed, the result builds, then fast cuts show range, export and the logo. 60–90 s. Why it spreads: Claude Design's launch is one of the biggest of 2026 (64.6M views, 78k bookmarks). It skips any intro and shows a live build in under 10 s. Keep: Frame one is the input box; the product builds a real result in under 10 s, then fast cuts show range, export and the logo; real UI throughout, no voiceover. Swap the prompt and result for your product's core action. Make it with Guizang Product Video (guizang-product-video).
  3. Founder-narrated screen demo: The founder talks to camera in a corner bubble while using the product on screen, one take, scripted but casual. 60–100 s. Why it spreads: Farza's Clicky demo got 3.0M views and 12,652 bookmarks and drove about 7,000 downloads. YC now teaches it as 'launch constantly' instead of one big film. Keep: The face bubble is already talking over the product screen at second 0 and the first line says what it is; one take, scripted but casual, clean audio over picture quality. Swap the founder and the screen, keep the corner bubble and the 'what it is' first line. Make it with Herk Edit Kit (herk-edit-kit).
  4. One continuous take: No cuts: every scene is made out of the previous one (a shape morphs, a button becomes a player, the frame floods and contracts), driven by a cursor, landing on the beat, last frame equals first. Why it spreads: The most-bookmarked motion post of 2026 (1.18M views, 21,055 bookmarks) is a 14 s one-shape UI morph loop; the same author's one-take launch film got 3,796 bookmarks. Both share the full prompt. Keep: No cuts: every scene is born from the previous shape (pill to photo to player to phone to page to wordmark), a cursor drives each change on the beat, the banned-FX list holds, last frame equals first frame. Swap the shapes for your own product's UI objects. Make it with Onetake (onetake).

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