yuv-video-director
The conductor for YUV.AI video. You (the agent) decide what each beat needs, route it to the
right engine, compose everything into one HyperFrames composition, wrap it in the YUV.AI
Neon Phoenix brand, self-verify, and render to MP4. This skill is the router + the
working reference implementations; load a reference file only when that engine is in play.
Design source of truth: the yuv-design-system skill (Neon mode — pink #FF1464, cyan
#00E5FF, rich-black/white, Anton+Inter+JetBrains Mono, neural-net phoenix motif). The video
form of it is frame.md — see references/frame-md.md. Bundled
template: assets/FRAME.md. Drop it in the project root; HyperFrames reads it.
The one law (decides everything)
HyperFrames renders by seeking each frame in headless Chrome → FFmpeg (frameIndex = floor(t·fps),
same input → same output). So every visual is one of two kinds:
| Pattern |
Runs… |
Engines |
Rule |
| Live seekable adapter |
inside the render, driven to time t per frame |
GSAP, Lottie (window.__hfLottie), Three.js, a canvas driven by a GSAP proxy onUpdate |
must be clock-driven — no Date.now(), Math.random() (seed a mulberry32), setTimeout, or .play() |
| Pre-rendered asset |
offline, outputs a file, imported as a clip |
ManimCE (Python→MP4/alpha), TTS audio, background-removal |
render first, then drop in as a <video>/asset clip |
If it can be seeked, it's an adapter. If it can't, pre-render it. Manim is always a pre-rendered clip — it has its own renderer and runs in Python; it can never be a live adapter.
Route each beat to an engine
"explain X as a TEASER/promo (FOMO, cliffhanger, fast)" → references/teaser-explainer.md (the formula)
"explain a concept / math / neural network / algorithm / training" → ManimCE (pre-rendered clip — cut into BURSTS for teasers)
"branded motion: logo sting · stat reveal · icon pop · pulse" → Lottie (live, lottie-web)
"kinetic captions · titles · reveals · transitions · data callouts" → GSAP (live) ← default
"3D / spatial" → Three.js (live) (Babylon NOT used)
speech → captions → transcribe + approve webapp (see video-edit skill)
no voiceover provided → TTS (Kokoro: npx hyperframes tts)
brand colors / fonts / motifs → frame.md (picked up front)
GSAP is the reliable default for text/motion. Reach for Lottie for designed branded graphics, Manim for explaining an idea.
Workflow
- Plan the beats. Narrative arc + which engine each beat needs. Pick 16:9 and/or 9:16.
- Set the brand. Ensure
FRAME.md is in the project root (copy assets/FRAME.md). All colors/fonts/motifs come from it — never invent. Three brand must-haves on every video (see references/brand-kit.md + references/cinematic.md): the real phoenix logo (assets/logo-phoenix.png) at the reveal + end card, a real featured Lottie (generate one — assets/lottie-burst-generator.py), and the link end-card (logo + "LET'S FLY HIGH" + the full link set + CTA). For teaser/social pacing see references/editing.md; for psychological/cliffhanger/FOMO cuts see references/cinematic.md.
- Pre-render the asset beats first (so they exist as clips):
- Manim → references/manim.md + assets/manim-scene-template.py. Render
py -m manim render -qh --fps 30 scene.py SceneName, copy the MP4 into assets/.
- Captions/TTS → reuse the
video-edit skill (transcribe → approve webapp → sync) and npx hyperframes tts.
- Scaffold + compose.
npx hyperframes init <slug> --non-interactive. Author index.html (the hyperframes skill is the contract). Use:
- the seekable neural-net field background → assets/neural-net-field.js
- Lottie the brand way → references/lottie.md + assets/neural-pulse.json
- the Manim render as a
<video class="clip" muted playsinline> body clip
- GSAP entrances per scene, a neon flash transition on each boundary, fade-out only on the final scene
- for teaser / social pacing (fast hard cuts, kinetic word-slams, a hook montage, glitch/chromatic stabs) → references/editing.md — cut it like a producer, not a slideshow
- Self-verify (gates). references/gates.md:
npx hyperframes lint (0 errors) → validate (0 console errors, WCAG AA) → render → spot-check 5 frames across the timeline. Fix → re-run. Lottie MUST be screenshot-verified (the Skottie-vs-lottie-web trap).
- Render.
npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4. For vertical, clone with a 1080×1920 layout (see video-edit).
Prerequisites (check first; degrade gracefully)
See references/prereqs.md. Need Node 22+, FFmpeg, Python 3.11+ with pip (Manim/captions). On this machine: real Python is py → C:\Python313 (the bare python is Hermes' venv with NO pip — don't use it). ManimCE installs via py -m pip install manim (no LaTeX needed if you author with Text()/MarkupText, not Tex/MathTex). If Manim isn't available → skip math beats or offer to install; never hard-fail the whole video.
What this skill bundles (reference implementations that lint + render)
| File |
What it is |
| assets/FRAME.md |
YUV.AI Neon Phoenix video frame spec (rebranded from HeyGen's Coral pack) |
| assets/neural-net-field.js |
Deterministic, seekable neural-net phoenix canvas background |
| assets/neural-pulse.json |
Hand-authored Bodymovin Lottie (renders in lottie-web, not just Skottie) |
| assets/gen_content_lotties.py |
Generator for 6 production-grade CONTENT lotties (WhatsApp-collapse, decode-beam, eye-read, ghost-line hero, orb-extract, brain-fire) — transparent, persistent+continuous, lottie-web verified |
| assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.json |
The 6 generated content lotties, ready to drop in |
| assets/manim-scene-template.py |
ManimCE scene template, neon brand styling, Text-only (no LaTeX) |
| assets/what_is_nn.py |
"What is a neural network" ManimCE scene (neuron → network → training, 34.5s) |
| assets/Anton-Regular.woff2 |
Local Anton (renderer doesn't auto-resolve it; declare @font-face) |
| references/composition-pattern.md |
The full multi-engine index.html pattern (field + Lottie + Manim clip + GSAP + flash) |
| references/teaser-explainer.md |
The cinematic teaser-explainer formula: cold-open slams → manim BURSTS → face-off → FOMO montage → cliffhanger; content-synced transparent lottie beats; the seek-modulo fix; teaser music synth |
Companion skills
hyperframes (composition contract — always invoke when authoring), hyperframes-cli, lottie,
video-edit (transcribe + approve webapp), yuv-design-system (brand). This skill orchestrates them.
1---2name: yuv-video-director3description: Yuval's all-in-one AI video pipeline. Turns an idea/script into a finished, on-brand MP4 by orchestrating HyperFrames (HTML→deterministic video render), Lottie (branded motion graphics), ManimCE (math / neural-network / concept animations), and a transcribe→approve caption flow — all wrapped in the YUV.AI Neon Phoenix brand via a frame.md. Use whenever Yuval wants to make, edit, or explain something as a video: promo, explainer, launch, social reel, "make a video about X", "explain X as a video", "neural network animation", "turn this into a video", captioned tutorial, 16:9 or 9:16. Triggers: video, explainer, promo, reel, manim, lottie, hyperframes, animation, "make a video", "explain ... as a video", מצגת וידאו, סרטון, הסבר וידאו. Routes each beat to the right engine, wraps in brand, self-verifies, and renders.4---5
6# yuv-video-director
7
8The conductor for YUV.AI video. You (the agent) decide **what each beat needs**, route it to the
9right **engine**, compose everything into **one HyperFrames composition**, wrap it in the **YUV.AI
10Neon Phoenix** brand, **self-verify**, and **render** to MP4. This skill is the router + the
11working reference implementations; load a reference file only when that engine is in play.
12
13> **Design source of truth:** the `yuv-design-system` skill (Neon mode — pink `#FF1464`, cyan
14> `#00E5FF`, rich-black/white, Anton+Inter+JetBrains Mono, neural-net phoenix motif). The video
15> form of it is **`frame.md`** — see [references/frame-md.md](references/frame-md.md). Bundled
16> template: [assets/FRAME.md](assets/FRAME.md). Drop it in the project root; HyperFrames reads it.
17
18## The one law (decides everything)
19
20HyperFrames renders by **seeking each frame in headless Chrome → FFmpeg** (`frameIndex = floor(t·fps)`,
21same input → same output). So every visual is one of two kinds:
22
23| Pattern | Runs… | Engines | Rule |
24|---|---|---|---|
25| **Live seekable adapter** | *inside* the render, driven to time `t` per frame | GSAP, Lottie (`window.__hfLottie`), Three.js, a canvas driven by a GSAP proxy `onUpdate` | must be **clock-driven** — no `Date.now()`, `Math.random()` (seed a mulberry32), `setTimeout`, or `.play()` |
26| **Pre-rendered asset** | *offline*, outputs a file, imported as a clip | **ManimCE** (Python→MP4/alpha), TTS audio, background-removal | render first, then drop in as a `<video>`/asset clip |
27
28**If it can be seeked, it's an adapter. If it can't, pre-render it.** Manim is *always* a pre-rendered clip — it has its own renderer and runs in Python; it can never be a live adapter.
29
30## Route each beat to an engine
31
32```
33"explain X as a TEASER/promo (FOMO, cliffhanger, fast)" → references/teaser-explainer.md (the formula)
34"explain a concept / math / neural network / algorithm / training" → ManimCE (pre-rendered clip — cut into BURSTS for teasers)
35"branded motion: logo sting · stat reveal · icon pop · pulse" → Lottie (live, lottie-web)
36"kinetic captions · titles · reveals · transitions · data callouts" → GSAP (live) ← default
37"3D / spatial" → Three.js (live) (Babylon NOT used)
38speech → captions → transcribe + approve webapp (see video-edit skill)
39no voiceover provided → TTS (Kokoro: npx hyperframes tts)
40brand colors / fonts / motifs → frame.md (picked up front)
41```
42
43GSAP is the reliable default for text/motion. Reach for Lottie for *designed* branded graphics, Manim for *explaining* an idea.
44
45## Workflow
46
471. **Plan the beats.** Narrative arc + which engine each beat needs. Pick 16:9 and/or 9:16.
482. **Set the brand.** Ensure `FRAME.md` is in the project root (copy [assets/FRAME.md](assets/FRAME.md)). All colors/fonts/motifs come from it — never invent. **Three brand must-haves on every video** (see [references/brand-kit.md](references/brand-kit.md) + [references/cinematic.md](references/cinematic.md)): the **real phoenix logo** ([assets/logo-phoenix.png](assets/logo-phoenix.png)) at the reveal + end card, a **real featured Lottie** (generate one — [assets/lottie-burst-generator.py](assets/lottie-burst-generator.py)), and the **link end-card** (logo + "LET'S FLY HIGH" + the full link set + CTA). For teaser/social pacing see [references/editing.md](references/editing.md); for psychological/cliffhanger/FOMO cuts see [references/cinematic.md](references/cinematic.md).
493. **Pre-render the asset beats first** (so they exist as clips):
50 - **Manim** → [references/manim.md](references/manim.md) + [assets/manim-scene-template.py](assets/manim-scene-template.py). Render `py -m manim render -qh --fps 30 scene.py SceneName`, copy the MP4 into `assets/`.
51 - **Captions/TTS** → reuse the `video-edit` skill (transcribe → approve webapp → sync) and `npx hyperframes tts`.
524. **Scaffold + compose.** `npx hyperframes init <slug> --non-interactive`. Author `index.html` (the `hyperframes` skill is the contract). Use:
53 - the seekable **neural-net field** background → [assets/neural-net-field.js](assets/neural-net-field.js)
54 - **Lottie** the brand way → [references/lottie.md](references/lottie.md) + [assets/neural-pulse.json](assets/neural-pulse.json)
55 - the **Manim** render as a `<video class="clip" muted playsinline>` body clip
56 - GSAP entrances per scene, a neon **flash** transition on each boundary, fade-out only on the final scene
57 - for **teaser / social** pacing (fast hard cuts, kinetic word-slams, a hook montage, glitch/chromatic stabs) → [references/editing.md](references/editing.md) — cut it like a producer, not a slideshow
585. **Self-verify (gates).** [references/gates.md](references/gates.md): `npx hyperframes lint` (0 errors) → `validate` (0 console errors, WCAG AA) → render → spot-check 5 frames across the timeline. Fix → re-run. Lottie MUST be screenshot-verified (the Skottie-vs-lottie-web trap).
596. **Render.** `npx hyperframes render --fps 30 --output renders/<name>_FINAL.mp4`. For vertical, clone with a 1080×1920 layout (see `video-edit`).
60
61## Prerequisites (check first; degrade gracefully)
62
63See [references/prereqs.md](references/prereqs.md). Need **Node 22+**, **FFmpeg**, **Python 3.11+ with pip** (Manim/captions). On this machine: real Python is **`py` → `C:\Python313`** (the bare `python` is Hermes' venv with NO pip — don't use it). ManimCE installs via `py -m pip install manim` (no LaTeX needed if you author with `Text()`/`MarkupText`, not `Tex`/`MathTex`). If Manim isn't available → skip math beats or offer to install; never hard-fail the whole video.
64
65## What this skill bundles (reference implementations that lint + render)
66
67| File | What it is |
68|---|---|
69| [assets/FRAME.md](assets/FRAME.md) | YUV.AI Neon Phoenix video frame spec (rebranded from HeyGen's Coral pack) |
70| [assets/neural-net-field.js](assets/neural-net-field.js) | Deterministic, seekable neural-net phoenix canvas background |
71| [assets/neural-pulse.json](assets/neural-pulse.json) | Hand-authored Bodymovin Lottie (renders in lottie-web, not just Skottie) |
72| [assets/gen_content_lotties.py](assets/gen_content_lotties.py) | Generator for 6 production-grade CONTENT lotties (WhatsApp-collapse, decode-beam, eye-read, ghost-line hero, orb-extract, brain-fire) — transparent, persistent+continuous, lottie-web verified |
73| assets/{wa-collapse,decode-beam,eye-read,ghost-line,orb-extract,brain-fire}.json | The 6 generated content lotties, ready to drop in |
74| [assets/manim-scene-template.py](assets/manim-scene-template.py) | ManimCE scene template, neon brand styling, Text-only (no LaTeX) |
75| [assets/what_is_nn.py](assets/what_is_nn.py) | "What is a neural network" ManimCE scene (neuron → network → training, 34.5s) |
76| [assets/Anton-Regular.woff2](assets/Anton-Regular.woff2) | Local Anton (renderer doesn't auto-resolve it; declare `@font-face`) |
77| [references/composition-pattern.md](references/composition-pattern.md) | The full multi-engine `index.html` pattern (field + Lottie + Manim clip + GSAP + flash) |
78| [references/teaser-explainer.md](references/teaser-explainer.md) | The cinematic teaser-explainer formula: cold-open slams → manim BURSTS → face-off → FOMO montage → cliffhanger; content-synced transparent lottie beats; the seek-modulo fix; teaser music synth |
79
80## Companion skills
81
82`hyperframes` (composition contract — always invoke when authoring), `hyperframes-cli`, `lottie`,
83`video-edit` (transcribe + approve webapp), `yuv-design-system` (brand). This skill orchestrates them.
hoodini