--- name: eva-launch-video description: >- Produce polished, mobile-friendly product demo videos of the eva app with Remotion — 1280×720, snappy beat-synced hard cuts, lo-fi music that swells on every cut, and footage captured from the REAL running app via agent-browser (no mockups). Use this whenever the user wants to make, update, re-cut, re-score, re-capture, or re-render an eva demo/product/launch/Twitter video or screen-recording walkthrough, or mentions the `video/` Remotion project — even if they don't say "Remotion". It encodes hard-won defaults (resolution, zoom/framing, theme, pacing, music sync, rendering, QA) so you don't repeat past mistakes. --- # eva product video Make a high-end product video of the **eva** app (Linear/Notion quality) using the existing Remotion project at `video/`. Footage comes from the real app, captured with `agent-browser`. **Wrong skill?** This one is the polished multi-scene edit (Remotion, music, captions). For a single feature, prefer the lighter siblings: `eva-feature-screenshot` (one screenshot + tweet) or `eva-feature-demo` (one raw agent-browser recording + tweet). Tweet copy for any of the three comes from `eva-tweet`. **The canonical project already exists — reuse it, don't start over.** - Project: `video/` · primary composition: **`EvaHero`** (`video/src/EvaHero.tsx`) - Render output: `video/out/eva-demo.mp4` - Reusable components in `video/src/components/`: `Backdrop`, `AppWindow`, `EvaMark`, `HeroCaption` (+ `Accent`), `Cursor`, `Spotlight`, `StatCounter`, `SnapIn`, `tokens`. - Helper scripts in `video/scripts/`: `stills.mjs`, `gen-music.mjs`, `check-audio.mjs`. To make a NEW video: re-capture screens for the new story, edit the scene list / captions / durations in `EvaHero.tsx`, regenerate the music to match the cut times, render, QA. ## Non-negotiable defaults (learned the hard way — change only with a reason) Each of these was a mistake first. Keep them unless the user overrides. 1. **1280×720, 30fps.** Not 1080p. The eva UI is a dense desktop app; at 1080p it reads "too zoomed / too big" on a phone. 720p is the mobile-friendly sweet spot for Twitter/X. 2. **Capture at the frame's native layout, show full-bleed.** Set the browser viewport to **1280×720** when capturing, then display the screenshot **full-bleed at 1:1** (filling the whole frame). The single biggest quality lever: - Capturing at 2560×1440 and downscaling to 720p halves UI text size → "zoomed out" and unreadable on mobile. - Cropping/zooming the camera _into_ a region shows awkward fragments of the UI. - A 1280-wide layout shown 1:1 = native element sizes = readable + "zoomed in" + crisp. **Zero zoom means zero.** `PanScene` `from`/`to` stay at `{ scale: 1.0, fx: 0.5, fy: 0.5 }` for every screenshot scene. Even a 1.02–1.06 "subtle push-in" clips the chrome the viewer needs — the sidebar labels, the primary button in the top-right corner, the stats footer. Also pass `` around screenshots: the default 1.06 pops _inward_ and crops the opening frames of every cut. Motion comes from the hard cuts and caption snaps, not from camera moves. 3. **Real footage, finished states.** Drive the actual app with `agent-browser`. Record _already-completed_ work (merged tasks, diffs, PRs) — do NOT wait on live agent runs (sandboxes are stopped; live runs are slow and flaky). Stage clean inputs (e.g. a tidy task title in the New Task modal). See `references/capture-workflow.md`. **Never submit — type only.** Fill the input, open the picker, capture. No Enter in a composer, no send arrow, Create, Save, Run, or Start, and never kick off a real session or agent run, not even for demo footage. Submitting mutates the user's real workspace and burns real compute; the staged state is all the shot needs. Enter is allowed only where it commits to the field itself and nothing else (accepting an `@`-mention from an open picker) — otherwise click the picker row. 4. **Snappy, hard-cut, beat-synced.** ~20s total. Cut on the beat (use ``, not long crossfades) and snap captions in fast. Pop scenes in with `SnapIn` — bare over title/outro cards, `from={0.97}` over screenshots (see default 2). Boring = too long + too many slow crossfades. 5. **Music synced to every cut.** The user's standing preference is **lo-fi, the "classic" variant, no clap** — generate it with `gen-lofi-variants.mjs`, which marks each cut with a warm-chord swell instead. It takes `--duration`, `--cuts`, `--only`, `--prefix`, so a new video needs no edits to the script: ```bash node scripts/gen-lofi-variants.mjs --duration=20.5 --cuts=2.5,5.5,8.5,11.5,14.5,17.5 \ --only=classic --prefix=platform # → public/audio/platform-music-lofi-classic.wav ``` `--cuts` **must** match the scene boundaries in the composition. `gen-music.mjs` is the older clap bed — only use it if the user asks for one. See `references/remotion-build.md` → Music. 6. **Match eva's theme.** Near-black `#050606`, indigo accent `#818cf8`, brand mark gradient purple `#8B3FB8` → blue `#3B7DD8`, fonts Inter + JetBrains Mono. All in `video/src/components/tokens.ts`. Never invent brand colors. 7. **Be honest + protect confidentiality.** Use the user's OWN repo (`vvedantb/eva`), never client repos (Evalucom/CarePulse). Don't show the "Codebases" home (lists client repos), and check document/task lists for client-named items before capturing — stage a clean demo doc if the list is dirty. **Never raise personal-data concerns about names or emails on screen** — Settings → Experimental has a blur-PID toggle that blurs every `[data-pii]` element, so this is handled in the product. Do flag error panels leaking env var names or project ids. Captions describe truthfully — never imply a feature the screen doesn't show. If the only available capture is a stopped sandbox or an empty state, reword the caption to match the screen rather than dressing it up. ## Workflow Work in this order; read each step's reference file before doing the step. 1. **Plan the story.** Default hero flow (8 scenes, ~20s): title → describe a task → Eva writes code → review & ship PR → board → projects → proof (count-up stats) → outro. Pick the scenes and one-line captions first. 2. **Capture footage** → read `references/capture-workflow.md`. Start the app (`pnpm dev`), sign in as the agent user, set viewport **1280×720**, screenshot each screen into `video/public/captures/`. 3. **Compose / edit** → read `references/remotion-build.md`. Edit `EvaHero.tsx`: scene list, durations (multiples of the beat), captions, the cursor path for the input scene. Reuse existing components. 4. **Score it** → read `references/remotion-build.md` → Music. Run `gen-lofi-variants.mjs` with `--cuts` matching the scene boundaries (default 5 above), point the composition's `