hyperframes-core
🎯Skillfrom heygen-com/hyperframes
Installation
npx vibeindex add heygen-com/hyperframes --skill hyperframes-corenpx skills add heygen-com/hyperframes --skill hyperframes-core~/.claude/skills/hyperframes-core/SKILL.md
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 --tailwindprojects
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(52 items)
SKILL.md
More from this repository10
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.
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.
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.
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.
CLI tool for the Hyperframes video rendering framework that provides commands to create, preview, lint, and render HTML-based video compositions to MP4.
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.
Creates product launch, SaaS promo, feature reveal, and marketing videos using HyperFrames. Takes a product URL for brand capture or a brief/script, then produces a professionally structured promotional video.
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.
A HyperFrames skill for authoring navigable slideshow compositions with discrete slides, fragment reveals, branching sequences, and hotspot navigation for presentations and pitch decks.
A HyperFrames skill that turns a music track into a beat-synced video by analyzing the audio, laying out frames on the beat grid, and building each frame as a composition with typography and optional user-supplied media.