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
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.
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.
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.
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.
A Claude Code skill that guides the creation of seek-safe 2D/3D keyframe animations for HyperFrames compositions, supporting GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP transitions, SVG morph/draw, motion paths, and 3D depth effects with built-in verification diagnostics.
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 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.
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.
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.