mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 21:29:34 +00:00
Vance IngallsandClaude Opus 4.6
f8fad54261
* feat(cli): non-interactive by default, --human-friendly for UI Following ElevenLabs CLI pattern: default mode is agent-friendly (flag-driven, plain text output, fail fast on missing args). Interactive clack UI is opt-in via --human-friendly. Init command: - --template required in default mode (errors with example if missing) - --video / --audio flags for media input - --skip-skills / --skip-transcribe to control optional steps - --human-friendly enables the existing interactive prompts - --help shows examples for every flag combination - Transcription runs automatically in default mode (unless --skip-transcribe) - Plain console.log output, process.exit(1) on errors Skills command: - Added --human-friendly flag - Added examples to --help output Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(cli): improve --help documentation and add --yes/--check to upgrade - upgrade: add --yes and --check flags to skip interactive prompt - benchmark: clarify description — preset fps/quality/worker configs - browser: describe each subcommand (ensure/path/clear) in help - docs: list available topics inline in --help output Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(skill): add house style guide with motion defaults, palettes, and anti-defaults When no visual-style.md is provided, compose-video now follows house-style.md for professional output quality. Includes: - Motion: easing variety, timing, entrance patterns, choreography - Sizing: text scale contrast, element fill, travel distance - Visual depth: gradient/shadow/texture guidance - Typography: weight contrast, tracking, case - Anti-defaults: table of generic AI patterns to avoid - 72 curated color palettes across 9 categories - Content interpretation: generate real content, not prompt text Eval-validated across 5 iterations with 50+ test compositions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(skill): add container anti-default and typography guidance - Anti-default: discourage card/container patterns in favor of content placed directly on canvas (professional video style vs web UI style) - Typography section: weight contrast, deliberate case, tracking, one typeface at two weights - Visual depth: softened to avoid templating (content-appropriate, not every-composition-the-same) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat(skill): add scene pacing guidance to house style Three-phase composition structure: build (staggered entrances), breathe (subtle motion to keep holds alive), resolve (fast exits with intention). Prevents front-loading all animation into the first second and dead static holds. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(skill): replace zoom-in monoculture with ambient motion variety The viewport scale and end emphasis code examples were being copied verbatim to every composition. Now offers 6 ambient motion options (pan, rotation, scale in/out, parallax, color shift, stillness) and 4 ending options instead of always zooming. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Hyperframes
Write HTML. Render video. Built for agents.
Hyperframes is an open-source video rendering framework that lets you create, preview, and render HTML-based video compositions — with first-class support for AI agents via MCP.
Why Hyperframes?
- HTML-native — AI agents already speak HTML. No React required.
- Frame Adapter pattern — bring your own animation runtime (GSAP, Lottie, CSS, Three.js).
- Deterministic rendering — same input = identical output. Built for automated pipelines.
- AI-first design — not a bolted-on afterthought.
Quick Start
npx hyperframes init my-video
cd my-video
npx hyperframes dev # preview in browser
npx hyperframes render # render to MP4
Requirements: Node.js >= 22, FFmpeg
How It Works
Define your video as HTML with data attributes:
<div id="stage" data-composition-id="my-video" data-start="0" data-width="1920" data-height="1080">
<video
id="clip-1"
data-start="0"
data-duration="5"
data-track="0"
src="intro.mp4"
muted
playsinline
></video>
<img id="overlay" data-start="2" data-duration="3" data-track="1" src="logo.png" />
<audio
id="bg-music"
data-start="0"
data-duration="9"
data-track="2"
data-volume="0.5"
src="music.wav"
></audio>
</div>
Preview instantly in the browser. Render to MP4 locally. Let AI agents compose videos using tools they already understand.
Packages
| Package | Description |
|---|---|
hyperframes |
CLI — create, preview, lint, and render compositions |
@hyperframes/core |
Types, parsers, generators, linter, runtime, frame adapters |
@hyperframes/engine |
Seekable page-to-video capture engine (Puppeteer + FFmpeg) |
@hyperframes/producer |
Full rendering pipeline (capture + encode + audio mix) |
@hyperframes/studio |
Browser-based composition editor UI |
Documentation
Full docs at hyperframes.heygen.com — includes guides, concepts, API reference, and package documentation.
Contributing
See CONTRIBUTING.md for guidelines on how to contribute.
License
See LICENSE for details.