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-systemskill (Neon mode — pink#FF1464, cyan#00E5FF, rich-black/white, Anton+Inter+JetBrains Mono, neural-net phoenix motif). The video form of it isframe.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.mdis 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 intoassets/. - Captions/TTS → reuse the
video-editskill (transcribe → approve webapp → sync) andnpx hyperframes tts.
- Manim → references/manim.md + assets/manim-scene-template.py. Render
- Scaffold + compose.
npx hyperframes init <slug> --non-interactive. Authorindex.html(thehyperframesskill 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 (seevideo-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.
