expo-launch-video

Your AI agent shoots and edits a launch video of your Expo app — live from your phone.

Ask Claude Code, Antigravity or Cursor "make a 30 second launch video of my app". It records your real app on your phone (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 opens a studio where you tweak it by dragging or just typing what you want. Export is a real 1080p MP4, rendered in your browser. No After Effects, no ffmpeg, no screen-recording app.

• 🎥 Real footage from the phone — screen recordings at ~10–15 fps captured in-app, page loads and animations on camera, smooth scrolls from full-page captures.

• 🧠 Auto-directed — a director plans timing, zooms into stat rows and buttons, speeds up long scrolls, writes captions and pop-up chips from the real numbers on screen.

• ✨ Motion graphics — kinetic typography, glass pop-up callouts, light sweeps, accent wipes, animated intro/outro with logo burst and pulsing CTA.

• 🚀 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 (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 AI agent, which edits the video live.

• 📐 16:9, 9:16, 1:1 — store/YouTube, Reels/Shorts, feeds.

Includes everything from expo-mcp-bridge (the agent can also tap, type, read logs… in the same session).

🚀 Quick start

Option A — let your AI do it (one shot)

Paste this to 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.

Option B — by hand

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

Mount the bridge in your root layout (app/_layout.tsx):

import { Stack, router } from 'expo-router';
import { AgentBridge } from 'expo-mcp-bridge';

export default function RootLayout() {
  return (
    <>
      <Stack />
      <AgentBridge router={router} />
    </>
  );
}

Run npx expo start, open the app on your phone (same Wi-Fi), restart your agent and ask:

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

init writes .mcp.json (server launch-video, which includes all app_* tools), the directing skill for Claude Code (.claude/skills/launch-video) and the same playbook in AGENTS.md for Antigravity, Cursor and others. Windows: "command": "cmd", "args": ["/c", "npx", "expo-launch-video"].

Related MCP server: openvidstudio

🎬 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:"Your prep at a glance", …}]
 4. Studio    video_studio  →  you drag, trim, type prompts  ⇄  video_wait_for_prompt / video_reply
 5. Render    video_render  →  launch-video/out/launch-landscape.mp4

Tools (in addition to all app_* tools)

The studio

Live preview, drag-to-reorder / drag-to-resize timeline, per-scene inspector (captions, duration, speed, transitions, draw a zoom area, scroll amount), video settings (format, caption side, colors from your app, sound), and the 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 to Claude (claude-opus-5-5) directly; otherwise they go to your agent via video_wait_for_prompt. Prompts carry the scene you have selected, so "fix this" means that scene.

Run npx expo-launch-video studio to reopen a project without an agent.

💻 CLI

npx expo-launch-video init      # in your Expo project: .mcp.json ("launch-video" server), both skills, AGENTS.md, .gitignore
npx expo-launch-video studio    # reopen the studio for ./launch-video without an agent (edit, preview, export)
npx expo-launch-video           # run the MCP server (your agent starts this from .mcp.json)
npx expo-launch-video --help

🧩 What's in the box

server/   MCP server, director (auto-planning), capture/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/ in your app (captures, project.json, renders in out/); init adds it to .gitignore.

🩺 Troubleshooting

Requirements

Node ≥ 20 · an Expo app with expo-mcp-bridge mounted · Chrome or Edge for export (WebCodecs H.264 + AAC).

Contributing

npm install && npm test. See CONTRIBUTING.md. MIT licensed.