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 the compiler to fetch Hebrew Google Fonts on demand, 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 (only 8 languages: en-us, en-gb, es, fr-fr, hi, it, pt-br, ja, zh), so Hebrew narration must come from a cloud TTS provider, either by pointing hyperframes tts at ElevenLabs via $ELEVENLABS_API_KEY (when your CLI build supports cloud providers), or by generating the file with any external service and importing it as an <audio> element.

Hebrew and RTL

For Hebrew and RTL compositions, load references/hebrew-rtl.md. It covers Hebrew font loading (the compiler auto-fetches from Google Fonts), 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>.

Approach

Before writing HTML, think at a high level: