--- name: hyperframes description: Programmatic motion-graphics video engine (HeyGen HyperFrames, Apache 2.0). Agent writes HTML/CSS/JS + GSAP → deterministic MP4/WebM via Chromium + FFmpeg. FREE, isolated (own node_modules, no OpenClaw config touch). Fills the motion-graphics gap (complements Veo/Grok Imagine generative + HeyGen avatar). Strong Arabic RTL. ---
HyperFrames Skill (HTML → video)
What it is / is NOT
- IS: programmatic composition — motion graphics, kinetic typography, data-driven video, slideshows, lower-thirds, branded intros/outros, explainers. Deterministic output.
- IS NOT: a generative model. For realistic footage use Veo/Grok Imagine; for talking-head use HeyGen avatar. HyperFrames COMPLEMENTS them.
Install (verified live 2026-06-29)
- Isolated project:
skills/hyperframes/(ownnode_modules, npm, NO global, NO OpenClaw config touch). - CLI:
hyperframesv0.7.18. Packages: core/engine/producer/parsers/lint/studio-server. - Deps present: Node 24 · FFmpeg 8.1.1 · system Chromium /usr/bin/chromium.
- Agent skills installed for Claude Code + Codex (~/.claude/skills, ~/.agents/skills): product-launch-video, slideshow, talking-head-recut, website-to-video, remotion-to-hyperframes.
Render (failover-safe wrapper)
bash
bash skills/hyperframes/render.sh <project_dir> <output.mp4> [draft|standard|high]
direct CLI:
./node_modules/.bin/hyperframes render <project_dir> -o out.mp4 --no-browser-gpu --workers 1
--no-browser-gpu (no host GPU) + --workers 1 (4 vCPU / small /dev/shm). HYPERFRAMES_BROWSER_PATH=/usr/bin/chromium.Composition format (the essentials)
- HTML with
<meta data-composition-id="ID" data-width=.. data-height=..>, GSAP from CDN, a pausedgsap.timeline()registered inwindow.__timelines["ID"](THE #1 requirement). - Timed elements:
class="clip"+data-start+data-duration+data-track-index. Never animatevisibility(framework owns it). Animate opacity/transform/etc.
🟢 Arabic RTL (verified 9.5/10 — proper joining + RTL + hamza)
<html lang="ar" dir="rtl">+direction:rtlon stage.- Font:
Cairo(Google Fonts CDN, producer resolves it) with localAmirifallback (installed at ~/.local/share/fonts). Both render Arabic correctly. text-align:center/right. Latin tokens (e.g. KCPC) integrate correctly inline.- Working reference:
projects/arabic_demo/index.html(KCPC method-statement intro, 1920x1080, rendered MP4 confirmed).
Use cases (Dr. Wael)
- KCPC: animated Method-Statement intros, phase/Zoning sequence animations, progress data → video, tender presentation intros, branded lower-thirds.
- Family/education: animated Arabic educational clips, kinetic typography.
- Hybrid: HyperFrames (graphics/text/data) + Grok Imagine/Veo (footage) + HeyGen avatar (speech) → composite full production.
🔊 Arabic voiceover (verified — merges with OUR TTS arsenal)
bash skills/hyperframes/narrate.sh <project_dir> "النص العربي" [voice]→ generatesnarration.mp3viamedia_failover.py(Gemini 3.1 Flash Charon → xai → ElevenLabs WAEL → MiniMax, never-stop).- Composition picks it up via
<audio src="narration.mp3" data-start=0 data-duration=N data-track-index=1>. - Verified:
projects/arabic_narrated/→ MP4 with h264 + AAC audio, Arabic narration synced. Tashkeel the text first (skills/arabic-tashkeel) for best pronunciation. - For professional/cloned voice use ElevenLabs WAEL explicitly; default daily = Gemini Charon (cheap).
Extras (status)
- ✅ chrome-headless-shell installed (optimized capture path, faster renders).
- 🟢 Heavy/parallel render:
hyperframes lambda(AWS) /cloudrun/cloud(HeyGen) — AVAILABLE ON DEMAND (our 4-vCPU box is fine for short clips; use cloud for long/parallel jobs). - 🟢 Built-in, install on demand:
transcribe(whisper-cpp, word-level timestamps for captions),remove-background(transparent video),tts(Kokoro local — English; Arabic uses our arsenal via narrate.sh).
RED LINES honored
- Additive + isolated: failure never blocks the arsenal (render.sh returns non-zero + clear message; nothing else affected).
- No OpenClaw config touched. Free (Apache 2.0). Portal-registered.