hyperframes-best-practices
HyperFrames Best Practices
Adapted from the upstream HyperFrames skill at heygen-com/hyperframes (Apache-2.0). Hebrew and RTL adaptations by skills-il.
HTML is the source of truth for video. A composition is an HTML file with data-* attributes for timing, a GSAP timeline for animation, and CSS for appearance. The framework handles clip visibility, media playback, and timeline sync.
Problem
Building HTML-based videos with Hebrew text requires declaring a Hebrew Google font in a form the linter accepts (no Hebrew family is pre-bundled), explicit dir="rtl" on Hebrew containers, mirrored GSAP entrance directions, and Hebrew caption sync via Whisper, none of which HyperFrames documents out of the box. Hebrew voiceover is a separate gap: the local Kokoro fallback does not support Hebrew (its SUPPORTED_LANGS tuple holds 9 locales: en-us, en-gb, es, fr-fr, hi, it, pt-br, ja, zh), so Hebrew narration must come from a cloud TTS provider: the media-use audio engine (automatic order HeyGen Starfish, then ElevenLabs, then Kokoro; Gemini TTS, whose language table lists Hebrew, is an explicit "provider": "gemini" choice outside that order), or any external service whose file you import as an <audio> element. The hyperframes tts command itself is local-only and has no provider argument.
Hebrew and RTL
For Hebrew and RTL compositions, load references/hebrew-rtl.md. It covers Hebrew font loading (declare the family with a Google Fonts <link>; the compiler embeds it at build time), dir="rtl" scoping, GSAP x-axis mirroring, Hebrew caption sync via hyperframes transcribe --language he, Hebrew voiceover via external TTS, and bidirectional text with <bdi>.