hyperframes

Name: hyperframes
Availability: InStock
Author: HeyGen

Render deterministic HTML5 video scenes with HyperFrames and GSAP timelines.

40.2k|3.8k|Updated Mar 10, 2026

Search Tags:#html #video #deterministic #tts #gsap #design-tokens #captioning

Ready to run

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-heygen-com

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes
Command: npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-heygen-com

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

HyperFrames enables deterministic HTML-based video authoring and rendering, allowing teams to generate repeatable, production-ready video compositions that render identically across environments.

Core Features & Use Cases

Compose HTML-based video scenes with data-start, data-duration, data-width, and data-height to define timing and layout.
Coordinate media, captions, narration (TTS), and transitions within a single production model.
Integrate with design tokens and design systems (design.md, house-style, palettes) to ensure brand-consistent visuals and motion.

Quick Start

Describe the video you want, and HyperFrames will generate a production-ready HTML composition ready to render.

Frequently Asked Questions about hyperframes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create HTML5 video compositions with deterministic rendering?▼

HTML5 video compositions are authored deterministically using the HyperFrames runtime to define scene timing and layout via HTML attributes like data-start and data-duration, ensuring repeatable cross-environment rendering.

How do I add TTS narration and captions to an HTML video scene?▼

TTS narration and captioning can be coordinated within a single HTML video production model, allowing you to synchronize media, text captions, and voiceover timing seamlessly across multi-scene productions.

Can I use GSAP timelines for beat-driven motion in HTML video rendering?▼

GSAP timelines can be used to drive beat-driven motion and CSS transitions across HTML video scenes, ensuring precise, repeatable animation timing within the deterministic runtime environment.

How do design tokens maintain brand fidelity in HTML video generation?▼

Design tokens from systems like design.md and house-style palettes integrate directly into the video authoring process to maintain brand-consistent visuals, typography, and motion across repeatable HTML video outputs.

What is the best way to render multi-scene HTML video productions identically across environments?▼

Multi-scene HTML video productions render identically across environments by using a deterministic authoring runtime that standardizes timing, transitions, and media coordination, producing repeatable, production-ready video compositions.