# Quick start

Install the package in a product repo, or work from a checkout of this repo, and ask Claude for a video.

## Install

You need Node 22 or later and ffmpeg. uv is only needed for beat detection.
[Requirements](/requirements) has the full list and what it has been tested
on.

```sh
brew install ffmpeg uv
```

The packages are on npm, so a product repo installs them like any dev
dependency (next section). To change the skills or the engine for your team,
fork this repo and work from your fork instead (see
[Work from a checkout](#work-from-a-checkout)).

## Ways to work

The way we work: the product runs locally (its dev server, in its demo or
seeded mode), and its source repo is on the same machine. Claude reads the
source, looks at the running product with `pnpm launch look <url>`, records it
with capture scripts against the local dev server, and saves snapshots of the
real UI. Every shot is built from those, in the product's own components,
data and look.

The videos can live in either of two places:

| Setup | Where the videos live | Good for |
| --- | --- | --- |
| In the product repo | `launch/` in the product, with the packages as a dev dependency. | Recurring videos (each release, each feature): they are versioned with the product and import its components and data directly. |
| In a checkout of this repo | `videos/` in your clone or fork, with the product linked in `launch.config.ts`. | One-off videos, and several products from one place. |

## Set up a product repo

Run these from the product repo's root:

```sh
npx @intentface-launch/core init
pnpm launch setup
pnpm launch dev
```

- `init` adds `@intentface-launch/core` as a dev dependency, creates `launch/`
  with a config, a `videos/` folder and a `CLAUDE.md` for Claude, adds a
  `launch` script to `package.json`, and installs the skills into
  `.claude/skills/`. In a pnpm repo, `pnpm dlx @intentface-launch/core init`
  does the same.
- `setup` downloads the browser that renders use, once per machine.
- `dev` opens the studio at `http://localhost:4400`.

The commands here are written for pnpm. In an npm repo, run them as
`npx intentface-launch setup`, in yarn as `yarn launch setup`, in bun as
`bun run launch setup`.

Add-ons install the same way when a video needs them:

```sh
pnpm launch add three              # 3D
pnpm launch add shaders            # WebGPU shader effects
pnpm launch add <package>          # a brand package, for videos in that brand
```

## Work from a checkout

This repo is a launch folder itself: `launch.config.ts` at its root and its
videos in `videos/`. To make videos for a product from here, link the product
in `launch.config.ts`. Paths are relative to the checkout:

```ts
import { defineConfig } from "@intentface-launch/core/config";

export default defineConfig({
  product: { path: "../my-app", public: "public" },
  products: { site: { path: "../my-site" } },
});
```

- `product` is the main product. Its tsconfig paths (`@/…`) resolve in videos,
  so its components and data import as they do in the app.
- `products` links other repos, imported as `@product/<name>/…`.
- `public`, on either, is the repo's static folder, served so its code finds
  its assets at the usual URLs.

Clone the repo (or your fork) and install it first:

```sh
git clone https://github.com/Intentface/intentface-launch.git
cd intentface-launch && pnpm install
```

Then, from the checkout's root:

```sh
pnpm launch setup
pnpm launch new demo --title "Demo"
pnpm dev
```

The skills are already in `.claude/skills/`, so open Claude Code in the
checkout and ask for a video as below.

A product repo can also use a checkout's packages, including changes not yet
released: run `node /path/to/intentface-launch/packages/core/bin/launch.mjs init`
there instead of `npx`. `init` and `add` then install the packages as `link:`
dependencies on the checkout. `LAUNCH_SOURCE=/path/to/checkout` picks the
checkout explicitly.

## Ask for a video

Start the product's dev server first, then open Claude Code where the videos
live and describe the video, for example:

> Look at my app and make a feature release video about our scheduling
> feature, 30 seconds.

The product-launch-video skill takes it from there. Claude asks what sets the
product apart, writes a brief and a script with you, and shows a storyboard
before it builds anything heavy. See [How it works](/how-it-works).

Intentface Launch does not make music, but it cuts the video to a track, so the
track comes before the storyboard. If you have music for the product, have the
file ready. If not, Claude writes a brief from the script for you to generate
one with a music generator such as Suno or ElevenLabs Music.

[Recipes](/recipes) has other ways to start: screenshots of what to
highlight, your own images and clips, sound with ElevenLabs, and ideas such as
a weekly update scripted once.

## Keep it up to date

Update the package like any other dev dependency
(`pnpm update @intentface-launch/core`, and the add-ons you use), then run
`pnpm launch update` to refresh the skills and guides. A product repo linked to
a checkout updates when you pull the checkout. In a fork, merge from this repo
when you want its changes.