---
name: reporeel-slim
description: Turn an active web project directory, git repository, or website URL into a short, shareable promotional video (MP4 or MOV) with music, motion, poster frame, and share copy. One file, zero external plugin dependencies — built and rendered directly by the model using the tools on the machine (headless browser / HTML canvas + FFmpeg). Use when someone says "/reporeel-slim", "/reporeel", "make a launch video", or wants a promo video in MP4 or MOV format.
---

# /reporeel-slim

You built it. Now turn it into a reel. You build the entire video yourself — story, visuals, audio mix, and final `.mp4` or `.mov` render — using the tools on the machine.

Whatever the tone, the output must look like a modern, slick, high-craft product launch video where every frame and audio cue earns its place.

Usage: `/reporeel-slim [input] [options]`. Options (flags or plain language):

| Option | Default |
| :--- | :--- |
| `--tone <preset or freeform>` | inferred (`default`, `polished`, `yc-parody`, `chaotic`, `deadpan`, `cinematic`, `app-store`) |
| `--type <archetype>` | `launch-video` (`explainer`, `twitter-promo`, `release-notes`, `readme-embed`) |
| `--format landscape\|vertical\|square` | `landscape` (`1920x1080`; vertical `1080x1920`, square `1080x1080`), `30fps` |
| `--container mp4\|mov\|both` | `mp4` (`reporeel.mp4` and/or `reporeel.mov`) |
| `--duration <s>` | ~`20s` (or per `--type`) |

Write deliverables to `reporeel-output/` in the current directory (or `reporeel-output-YYYY-MM-DD-HHmmss/` if `reporeel-output/` already exists). Keep intermediate files (rendered frames, audio stems, render scripts) in `reporeel-output/work/`.

## 1. Inspect

Determine what the input is and gather material directly from the source:

| Input | How to recognize it | Where the material comes from |
| :--- | :--- | :--- |
| Project / Repo | No input given, or path to a local project directory | The project's source code, styles, routes, and README |
| Website | An `http(s)://` URL or domain like `example.com` | The live rendered site |

### Project / Repository
Read the code directly: the main entry page (`index.html`, `app/`, `pages/`, `src/`), styles (`:root` CSS variables, Tailwind config, exact hex/oklch colors, and font families), `README.md`, and key components. Find the product **in use** across 2–3 beats: **entry -> key action -> result**. Import or render the project's actual components, CSS, fonts, and assets instead of inventing generic replacements.

### Website
Load the page in a headless browser if it renders client-side with JavaScript, dismiss overlays, and extract:
- **Copy:** Headline, tagline, section headings, feature names, CTAs, and social meta tags.
- **Identity:** Exact background, text, and accent colors plus loaded font families.
- **Visuals:** Logos, product UI, and key interactive states saved into `reporeel-output/work/`.

### Answer before planning
Before writing the plan, answer:
1. What is the product in one sentence?
2. Who is it for and what problem does it solve?
3. What is its strongest or most surprising claim?
4. What is the visual hook?
5. What real UI or workflow (`entry -> key action -> result`) will be shown?
6. What tone fits best?
7. What is the one-line share caption?

## 2. Plan

Write `reporeel-output/reporeel-plan.md`: the angle, the hook (first 2–3s), 2–3 product highlights, the outro/punchline, tone, visual identity (exact colors and fonts), and a scene-by-scene storyboard whose durations sum to the target duration.

**Shape:** `Hook (2-3s) -> Reveal (2-4s) -> 2-3 sharp product highlights (8-12s) -> Punchline / Outro (2-4s)`.

## Creative laws

- **Short and punchy.** 15–25 seconds (18–22s sweet spot) unless a longer format archetype is requested.
- **Clear to a stranger.** After one viewing, someone who has never seen the project knows what it does, who it is for, and how to try it.
- **The hook is everything.** The first 2 seconds decide whether the viewer keeps watching.
- **Show the real product.** Reuse the project's real UI, components, terminal commands, copy, colors, and typography. Never use generic SaaS filler.
- **Readable text floors.** Every line a viewer must read stays settled on screen for at least `0.8s` (short label) or `0.3s` per word (sentences, minimum `1.2s`).
- **Make it alive.** Staggered card arrivals, simulated cursor clicks, typing animations, and state transitions beat static slides.
- **Every frame postable.** Any paused frame must look intentional and share-worthy.

## Tones

| Tone | Feel | Pacing and transitions |
| :--- | :--- | :--- |
| `default` | Punchy, playful, clean | 4–5 scenes; smooth crossfades and slides |
| `polished` | Serious, elegant, restrained | 3–4 scenes, longer holds; soft fades |
| `yc-parody` | Deadpan startup launch played straight | 4–5 scenes, one claim each; crisp cuts |
| `chaotic` | Fast, kinetic, high-contrast | 6–8 scenes, some under 2s; flash/zoom cuts |
| `deadpan` | Calm, dry, understated | 3–4 scenes, generous negative space; slow fades |
| `cinematic` | Trailer-scale, dramatic reveals | 4–5 scenes, full-bleed typography; wipes/scales |
| `app-store` | Clean feature cards and UI motion | 4–6 scenes; smooth card slides |

## Sound

If bundled tracks exist in `../reporeel/assets/music/` and `../reporeel/assets/sfx/`, mix a music bed (`0.30-0.38` volume) with motion-matched UI/impact SFX (`0.55-0.80` volume). Otherwise, synthesize a clean musical bed and subtle UI sound effects in the same key using Python/numpy/wave or FFmpeg audio filters (`anoisesrc`, sine/chord envelopes, low-pass filters) so the soundtrack blends smoothly under the visual edit.

## 3. Build, check, and render (MP4 and/or MOV)

Build the animation deterministically on the machine. When rendering via a headless browser (Playwright / Puppeteer / Chromium) or HTML5 Canvas:
- Make every frame a pure function of timestamp `t = frameIndex / fps` (`30fps`).
- Wait for `document.fonts.ready` and all images to finish decoding before capturing each frame.
- Inspect still frames from every scene and mid-transition (`reporeel-output/work/check-*.png`) to verify WCAG contrast, zero text clipping/overflow, and clean transitions (stagger exits before entrances or dip through the background color rather than crossfading two busy layouts).

Encode the final video with `ffmpeg`:

- **For `.mp4` (`--container mp4` or `both`):**
  ```bash
  ffmpeg -y -framerate 30 -i reporeel-output/work/frame-%04d.png -i reporeel-output/work/audio.wav \
    -c:v libx264 -crf 18 -preset slow -pix_fmt yuv420p -c:a aac -b:a 192k \
    -movflags +faststart reporeel-output/reporeel.mp4
  ```
- **For `.mov` (`--container mov` or `both`):**
  ```bash
  ffmpeg -y -framerate 30 -i reporeel-output/work/frame-%04d.png -i reporeel-output/work/audio.wav \
    -c:v libx264 -crf 18 -preset slow -pix_fmt yuv420p -c:a aac -b:a 192k \
    -f mov -movflags +faststart reporeel-output/reporeel.mov
  ```

## 4. Deliver

- **Poster (`reporeel.jpg`):** Extract the strongest settled frame (text fully animated in, never mid-transition) to `reporeel-output/reporeel.jpg` and bake it into frame 0 of `reporeel.mp4` and/or `reporeel.mov` (`-filter_complex "[0:v][1:v]overlay=0:0:enable='eq(n,0)'[v]"`) so every social platform's auto-thumbnail displays the poster frame without altering duration or audio sync.
- **`share-copy.txt`:** Write 1–3 punchy, project-specific sentences matched to the tone in `reporeel-output/share-copy.txt`.
- **Report to the user:** State the output paths (`reporeel.mp4` / `reporeel.mov`, `reporeel.jpg`, `share-copy.txt`), summarize the creative angle in one sentence, and offer to re-roll a scene, switch tones, or export the alternate container format.