🎯

hyperframes-core

🎯Skill

from heygen-com/hyperframes

What it does

The foundational technical contract for HyperFrames HTML video compositions, defining data attributes, clip/track structure, sub-compositions, variables, media playback, deterministic rendering rules, and project validation.

Overview

HyperFrames Core defines the technical contract for rendering video from HTML. A composition is an HTML file whose DOM declares timing via data-* attributes, whose animation runtime is seekable, and whose media playback is framework-owned. This skill serves as the single source of truth for composition structure, covering everything from minimal renderable projects to complex modular architectures with sub-compositions and shared variables.

Key Features

Composition architecture patterns: monolithic single-file or modular orchestrator with slots, including four sub-composition archetypes (content, driver-only, multi-scene merge, audio-reactive)
Complete data attribute reference: root-level, clip-level, sub-composition host, and legacy alias attributes for full DOM timing control
Track and clip system: track indexing, same-track overlap rules, relative timing expressions (e.g. data-start="intro + 2"), crossfade overlap, and clip chaining
Sub-composition wiring: host attributes, <template> wrappers, per-instance variables, and seek-back animation behavior
Variable system: typed declarations with defaults, strict validation mode for CI, plus media element handling (volume, trim with data-media-start)
Determinism rules: paused timeline construction, seekable state management, visual-property allowlists, text fitting, and avoidance of non-deterministic patterns like clocks or infinite repeats
Tailwind v4 project support: browser-runtime contract for hyperframes init --tailwind projects

Who is this for?

Developers building HTML-based video compositions with HyperFrames who need to understand the structural contract: how to declare timing, organize clips and tracks, wire sub-compositions, manage variables and media, and ensure deterministic frame-accurate rendering output.

📦

Same repository

heygen-com/hyperframes(48 items)

hyperframes-core

Installation

Vibe Index InstallInstalls to .claude/skills/

npx vibeindex add heygen-com/hyperframes --skill hyperframes-core

skills.sh Install⚠ Installs to .agents/skills/

npx skills add heygen-com/hyperframes --skill hyperframes-core

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/hyperframes-core/SKILL.md

SKILL.md

194,008Installs

AddedJun 18, 2026

View on GitHub Back to Skills

More from this repository10

🎯

hyperframes-cli🎯Skill

CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.

🎯

hyperframes🎯Skill

Skill for authoring HTML-based video compositions with the Hyperframes framework, covering captions, TTS, audio-reactive animation, and transitions for AI agent-driven video creation.

🎯

hyperframes-registry🎯Skill

Skill for installing blocks and components into Hyperframes projects via the `hyperframes add` command, providing access to 50+ ready-to-use overlays, shader transitions, and data visualizations.

🎯

remotion-to-hyperframes🎯Skill

A skill for the HyperFrames open-source video rendering framework that teaches AI agents to write correct HTML-based video compositions and GSAP animations, enabling them to render video from HTML code.

🎯

hyperframes-animation🎯Skill

Comprehensive animation skill for HyperFrames providing atomic motion rules, multi-phase scene blueprints, scene transitions, motion-design techniques, and seven runtime adapters including GSAP, Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, and TypeGPU.

🎯

hyperframes-creative🎯Skill

Non-animation creative direction for HyperFrames videos covering design specs, color palettes, typography, narration scripting, beat planning, audio-reactive visuals, composition patterns, and brand/style decisions.

🎯

media-use🎯Skill

Resolves media needs (background music, sound effects, images, icons) into frozen local files by searching the HeyGen catalog, downloading the best match, and registering it in a manifest. One resolve command handles the full cascade from cache lookup to provider search to file freezing.

🎯

hyperframes-media🎯Skill

A media framework by HeyGen for building interactive video experiences with composable frames and real-time rendering capabilities.

🎯

general-video🎯Skill

A fallback HyperFrames composition authoring skill for custom video creation when no specialized workflow fits. Handles multi-scene pieces, brand reels, montages, title cards, motion posters, static loops, and freeform compositions at any length or format.

🎯

faceless-explainer🎯Skill

Converts arbitrary text (articles, notes, topics, briefs) into faceless explainer videos with auto-generated TTS narration and LLM-designed visuals including typography, abstract graphics, diagrams, and data visualizations.