Expo Launch Video

Website · Docs · The studio · Tools reference · Changelog

expo-launch-video lets your AI agent shoot and edit a launch video of your Expo app — live from your phone. Ask Claude Code, Antigravity or Cursor for a video; it records the real app (page loads, scrolling, taps, panels opening), picks the best takes, writes the captions and cuts a polished video with motion graphics, break-out pop-outs and sound. Then it opens a studio where you tweak the result by dragging, or just by typing what you want. Export is a real 1080p MP4, rendered in your browser. No After Effects, no ffmpeg, no screen-recording app.

"Make a 45 second launch video of the app: landing, login, dashboard, the question bank and one exam. Captions should sell the benefits."

Table of contents

• Installation
• Quick start
• Features
• How a video gets made
• Common questions
• Tools
• The studio
• CLI and environment
• Project structure
• Troubleshooting
• Requirements
• Related
• Contributing
• License

Installation

npx expo install expo-mcp-bridge react-native-view-shot
npm install --save-dev expo-launch-video
npx expo-launch-video init

init writes .mcp.json with a launch-video server — it includes every app_* tool from expo-mcp-bridge, so one server does both — plus the directing skill for Claude Code (.claude/skills/launch-video), the same playbook in AGENTS.md for Antigravity, Cursor and others, and a .gitignore entry for the project folder.

Quick start

The one-shot way. Paste this into your agent inside your Expo project:

Read https://raw.githubusercontent.com/Rudrasamadhiya/expo-launch-video/main/AI_SETUP.md and set up app control and launch videos in this project.

By hand:

1. Install the packages and run init (above).
2. Mount the bridge once in your root layout:

    import { Stack, router } from 'expo-router';
    import { AgentBridge } from 'expo-mcp-bridge';
   
    export default function RootLayout() {
      return (
        <>
          <Stack />
          <AgentBridge router={router} />
        </>
      );
    }

3. Run npx expo start and open the app on your phone (same Wi-Fi).
4. Restart your agent and ask for a video.

On Windows the MCP config uses "command": "cmd", "args": ["/c", "npx", "expo-launch-video"].

Features

• Real footage from the phone. Screen recordings at about 10–15 fps captured in-app: page loads and animations on camera, smooth scrolls from full-page captures, taps mid-take.
• Auto-directed. A director plans timing, zooms into stat rows and buttons, speeds up long scrolls, and writes captions and pop-up chips from the real numbers on screen.
• Motion graphics. Kinetic typography, glass callouts, light sweeps, accent wipes, and an animated intro and outro with a logo burst and a pulsing call to action.
• Break-out pop-outs. A tapped card lifts off the phone to center stage; a panel that opens springs out into a side-by-side layout.
• Sound design. Synthesized pops, clicks, whooshes and chimes timed to every animation, mixed into an AAC track in the MP4.
• Prompt the studio. "speed up analytics 2x", "text on the right", "zoom into the Start button". Simple edits apply instantly; anything else goes to your agent, which edits the video live.
• Every format. 16:9 for stores and YouTube, 9:16 for Reels and Shorts, 1:1 for feeds.

How a video gets made

1. Shoot    video_record {route:"/dashboard", seconds:8, scroll:true}    live from the phone
            video_record {tap:"My Analytics", seconds:6}                  tap → hero / side pop-out
2. Plan     video_plan {targetSeconds:45, format:"landscape"}             timing, zooms, captions, chips
3. Direct   video_edit [{op:"update", scene:"dashboard", title:"…"}]      refine any scene
4. Studio   video_studio  →  you drag, trim and type prompts              video_wait_for_prompt / video_reply
5. Render   video_render  →  launch-video/out/launch-landscape.mp4

Common questions

How do I make an App Store preview video of my Expo app with AI?

Install this package next to expo-mcp-bridge, run npx expo-launch-video init, open the app on your phone and ask your agent: "Make a 30 second App Store preview, portrait." It records the real app, plans the video and opens a studio; export gives you a 1080p MP4.

Can Claude Code or Cursor make a promo video of my React Native app?

Yes, any MCP agent can. The agent records page loads, scrolls and taps live from the phone, writes captions from the real content on screen, and adds zooms, pop-outs, motion graphics and sound.

Do I need a screen recorder or a video editor?

No. Recording happens inside the app through expo-mcp-bridge, editing happens in a browser studio you can drag or prompt ("speed up analytics 2x"), and the MP4 is rendered in Chrome or Edge.

Which formats can it export?

16:9 for YouTube and websites, 9:16 for App Store and Play Store previews, Reels, Shorts and TikTok, and 1:1 for social feeds.

Tools

In addition to every app_* tool from expo-mcp-bridge. Full parameters are in the tools reference.

The studio

A browser editor with live preview, a drag-to-reorder and drag-to-resize timeline, a per-scene inspector (captions, duration, speed, transitions, draw a zoom area, scroll amount), video settings (format, caption side, colors from your app, sound) and a prompt box. It understands common edits on its own:

make dashboard 4s · speed up analytics 2x · slow down the 3rd scene · remove pricing
move faq after help · zoom on Log In in login · no zoom on dashboard · scroll mistakes 60%
title dashboard: Your day at a glance · fade transition on analytics · portrait · square
text on the right · make it 30 seconds · cta: Get it on Google Play · color #7c3aed · mute · volume 60%

With ANTHROPIC_API_KEY set (or an ant auth login profile), free-form requests go straight to Claude (claude-opus-5-5); otherwise they go to your agent through video_wait_for_prompt. Prompts carry the scene you have selected, so "fix this" means that scene.

Reopen a project without an agent with npx expo-launch-video studio.

CLI and environment

npx expo-launch-video init      # .mcp.json ("launch-video" server), skills, AGENTS.md, .gitignore
npx expo-launch-video studio    # reopen the studio for ./launch-video (edit, preview, export)
npx expo-launch-video           # run the MCP server (your agent starts this for you)
npx expo-launch-video --help

Project structure

server/       MCP server, director (auto-planning), capture and recording, studio server,
              prompt parser, optional Claude edits
studio/       the editor (vanilla JS): renderer, motion graphics, sound design,
              MP4 export (Mediabunny / WebCodecs)
skill/        the directing playbook installed by init
AI_SETUP.md   one-shot setup guide an AI agent can follow

Projects live in launch-video/ inside your app (captures, project.json, renders in out/); init adds the folder to .gitignore.

Troubleshooting

Requirements

• Node.js 20 or newer
• An Expo app with expo-mcp-bridge mounted
• Chrome or Edge for export (WebCodecs H.264 + AAC)

Related

• **expo-mcp-bridge** — the app-control layer this package builds on.
• **Expo Agent Kit** — the website and full documentation for both libraries.

Contributing

npm install
npm test

See CONTRIBUTING.md for details.

License

MIT © Rudra Samadhiya

Exports are muxed with Mediabunny (MPL-2.0).