grok-video-editing git:20261020.d0c8fdaA

Immutable. This exact content never changes and is served at /api/v1/blob/ae44fd344f524aee.

---
name: grok-video-editing
description: Record a product demo on a Linux desktop, cut it into feature clips, and render an on-brand 1080p motion-graphics promo video entirely with code (ffmpeg + HTML Canvas + headless Chromium via Playwright + a procedural audio mix). Use when asked to make a product demo, launch video, or social promo themed to a website's colors and fonts.
---

# Grok video editing skill

A code-only pipeline with no video-editor GUI. Everything lives in `template/`; copy it into a new project folder and work there.

```
record (ffmpeg x11grab) -> pick moments (clips.json) -> extract frames (ffmpeg)
  -> scenes drawn on <canvas> with theme.json -> frames captured by Playwright -> ffmpeg x264
  + music bed & SFX synthesised in Python -> muxed AAC -> contact sheet review -> iterate as v2, v3...
```

## 0. Setup
- Needs: `ffmpeg`, Node 18+, Python 3 with `numpy` + `scipy`, an X11 display for recording.
- `cp -r template my-video && cd my-video && npm install && npx playwright install chromium`
- Fill in `TASTE.md` (the project's style memory) as decisions get approved. Re-read it at the start of every new chat.

## 1. Brand theming (do this first)
1. Open the brand's website and pull the real values from its CSS: background, primary, accent and text colours; `@font-face` families and weights; the logo file.
2. Write them into `theme.json` (see `themes/zarlabs.json` for the format). `glowRGB` is the primary colour as `r,g,b`.
3. Put font files in `assets/fonts/` and the logo at `assets/brand/logo.png`. Only use fonts the user is licensed to use; otherwise rely on the `fallback` stack.
4. Colour rules from the original video: one background colour, the primary colour for hero words and UI glow, the accent colour used sparingly, and muted text at about 62% opacity.

## 2. Record
- Start the app, open it in a browser on the virtual display, then run `scripts/record.sh recordings/raw.mp4 :0 1280x800`.
- Click through the flow slowly and pause about 2 s on each screen you want to show. Do several takes (the original took 4 takes plus a clean re-record) and keep the best one.
- Only demo/fake data on screen: no real emails, keys or customer names.
- No display handy? `scripts/sample_recording.sh` makes a synthetic test recording.

## 3. Cut
- Scrub the take (`ffmpeg -ss T -i raw.mp4 -frames:v 1 f.png`, then look at the stills) and note the start/end seconds of each moment.
- Put them in `clips.json`, one entry per clip id. `crop` removes the browser's tab/URL bar (72 px at 1280x800).
- `python3 scripts/extract_clips.py` writes `assets/clips/<id>/NNNNN.jpg` and `src/clips.js`.

## 4. Storyboard & motion
- Edit `src/data.js`. Each scene has a `scene` (a file in `src/scenes/`), `start`/`end` in seconds, and `props` (its text). `captions` are burned-in subtitle pills for sound-off viewing.
- The original 63 s structure: hook -> problem -> struggle -> "so I built X" -> 4 feature steps (each a screen clip in a browser mockup with a step title on the left) -> "now it's open source" chips -> logo end card with URL.
- Available scenes:
  - `hook`: 3 staggered lines.
  - `feature`: step title plus the recorded clip in a browser frame, with a slide-in and slow push.
  - `chips`: hero line plus pills.
  - `end`: logo pop, tagline, URL, fade out.
- To add a new scene, copy one. Helpers live in `src/lib.js` (`bg`, `reveal`, `kicker`, `pill`, `device`, easing).
- Motion language: cubic ease-out fade-up reveals (0.6 s, 40 px rise), 0.12–0.4 s staggers, a 0.45 s fade-out at scene end, a drifting grid + radial glow background, and overshoot (`back`) only on the logo.

## 5. Sound
- `plan/beats.json` lists SFX hit times: swish on scene changes, tick on text reveals, pop on chips, drop on hero words. Keep it in sync with `data.js`.
- `scripts/make_sfx.py` synthesises the SFX set.
- `scripts/mix.py <seconds>` builds an original Am–F–C–G pad + kick bed at 100 bpm, lays the SFX on top, and peak-normalises to -1.5 dBFS. No licensed music needed.

## 6. Render
- Quick look at frames: `node src/render.js --from 4 --to 6 --fps 10 --scale 0.5 --out cache/smoke1 --jpg`
- Full: `./build.sh v1` writes `renders/v1/Video_v1.mp4` (1920x1080, 30 fps, H.264 CRF 18, AAC 192k). The renderer refuses to overwrite, so bump the version for every change.

## 7. Review
- Run `scripts/contact_sheet.sh renders/v1/Video_v1.mp4 2` and open the JPEG. Check:
  - only brand colours
  - text readable over its background
  - captions never overlap the clip
  - nothing private on screen
  - pacing (one idea per scene)
- Show the user the render and sheet, log their feedback in `TASTE.md` §9, then iterate as v2.

## Safety
- Never record secrets, API keys, inboxes or real lead/customer data. Use seeded demo data.
- Only use fonts, logos and music you have rights to.

Built by Zar Labs: https://zarlabs.online