James Russo
f7bc0384f0
* docs: list all 19 skills in README + add CLAUDE.md maintenance reminder Agents discover skills via the README, so silently-out-of-date entries kill discovery. This change: - Adds a `## Skills` section to the README listing all 19 skills, grouped Router / Creation workflows / Domain skills, with a one-line "use when" blurb for each (sourced from each skill's SKILL.md frontmatter `description:`). - Updates the existing CLAUDE.md `## Skills` section to cover all 19 skills (was missing the domain skills, `/media-use`, `/slideshow`, and `/music-to-video`), mirroring the README's Router / Creation / Domain grouping. - Adds a "Skill catalog maintenance" section to CLAUDE.md so future skill additions / renames update both surfaces and the `/hyperframes` router skill in lockstep. Docs-only — no source or test changes. — Jerrai (https://claude.com/claude-code) * docs(mintlify): add skills catalog page + extend maintenance reminder Per follow-up on HF#1722: the Mintlify docs at hyperframes.heygen.com also need the skills catalog so agent discoverability is consistent across README and docs site. - New: docs/guides/skills.mdx (3-group catalog — router / creation workflows / domain skills — mirrors README structure, sourced from the same SKILL.md frontmatter) - Update: docs/quickstart.mdx — completes the workflow-skills list (was missing /music-to-video, /slideshow, /general-video) and cross-links the new page - Update: docs/introduction.mdx — adds a skills-catalog card to the hero CardGroup and the Next Steps section - Update: docs/docs.json — adds /guides/skills to the Guides nav - Update: CLAUDE.md "Skill catalog maintenance" — adds docs/guides/skills.mdx as the third sync target alongside README and skills/hyperframes/SKILL.md, and notes the count drift surface (README + CLAUDE.md mention "19 AI agent skills" in their intros; the new docs page deliberately omits a count to avoid drift) Docs-only — no source, packages, or test changes. — Jerrai (https://claude.com/claude-code) * docs(readme): oxfmt table column-alignment fix Pure whitespace — oxfmt's table-column alignment caught README.md after the previous commit. No content change. — Jerrai (https://claude.com/claude-code) * docs(skills): reconcile install-command contract across README/CLAUDE/Mintlify Per Magi's review on HF#1722: the new README/CLAUDE/skills.mdx pages described bare `npx skills add heygen-com/hyperframes` as installing all 19 skills, while existing quickstart/prompting docs said the bare command opens a picker and `--all` installs everything. Verified actual CLI behavior with `npx skills add --help` and a clean-dir run: bare command opens an interactive picker for human users (the CLI help documents `--all` as "Shorthand for --skill '*' --agent '*' -y" — the picker-skipping form). Inside an agent the bare command auto-installs all non-interactively, but that's an agent-detection UX shortcut, not the public contract — documenting the picker is correct for human readers. All touched docs now use the consistent contract: - `npx skills add heygen-com/hyperframes` -> interactive picker - `npx skills add heygen-com/hyperframes --all` -> install all 19 (skips picker) - `npx skills add heygen-com/hyperframes --skill <name>` -> install just one Files updated: README.md, CLAUDE.md, docs/guides/skills.mdx. Existing docs/quickstart.mdx and docs/guides/prompting.mdx already used this contract and are unchanged. — Jerrai (https://claude.com/claude-code)
136 lines
6.9 KiB
Plaintext
136 lines
6.9 KiB
Plaintext
---
|
|
title: Introduction
|
|
description: "Write HTML. Render video. Built for agents."
|
|
---
|
|
|
|
Hyperframes is an open-source framework that turns HTML into deterministic, frame-by-frame rendered video — so you can define a video the same way you build a web page.
|
|
|
|
## See It in Action
|
|
|
|
Here is a video defined entirely as HTML:
|
|
|
|
```html
|
|
<div id="root" data-composition-id="demo"
|
|
data-start="0" data-width="1920" data-height="1080">
|
|
|
|
<video id="clip-1" data-start="0" data-duration="5"
|
|
data-track-index="0" src="intro.mp4" muted playsinline></video>
|
|
|
|
<h1 id="title" class="clip"
|
|
data-start="1" data-duration="4" data-track-index="1"
|
|
style="font-size: 72px; color: white;">
|
|
Welcome to Hyperframes
|
|
</h1>
|
|
|
|
<audio id="bg-music" data-start="0" data-duration="5"
|
|
data-track-index="2" data-volume="0.5" src="music.wav"></audio>
|
|
</div>
|
|
```
|
|
|
|
Run `npx hyperframes render --output demo.mp4` and this produces an MP4 with deterministic, frame-by-frame capture. Same input, identical output, every time. No timeline editor. No proprietary format. Just HTML.
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Watch the Showcase" icon="play" href="/showcase">
|
|
Finished HyperFrames videos you can watch, read, run, and remix — product launches, website-to-video demos, UI reveals, and VFX experiments.
|
|
</Card>
|
|
<Card title="Browse the Catalog" icon="grid-2" href="/catalog/blocks/data-chart">
|
|
50+ ready-to-use blocks and components — social overlays, shader transitions, data visualizations, and cinematic effects. Install any of them with one command.
|
|
</Card>
|
|
<Card title="Quick Start" icon="rocket" href="/quickstart">
|
|
Go from zero to rendered video in under 5 minutes.
|
|
</Card>
|
|
<Card title="Skills catalog" icon="sparkles" href="/guides/skills">
|
|
Every HyperFrames AI agent skill — router, creation workflows, and domain skills. Install with `npx skills add heygen-com/hyperframes`.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Why Hyperframes?
|
|
|
|
<Tabs>
|
|
<Tab title="For developers">
|
|
**You already know the stack.** Compositions are HTML files with data attributes. Animations use GSAP, Lottie, CSS, or any runtime that can seek to a given frame. There is no custom DSL, no proprietary component system, and no React requirement. If you can build a web page, you can build a video.
|
|
</Tab>
|
|
<Tab title="For AI agents">
|
|
**Agents already speak HTML.** Most video tools require complex APIs or drag-and-drop interfaces that agents cannot operate. Hyperframes compositions are plain HTML documents — the format LLMs are best at generating. The CLI is non-interactive by default — all inputs via flags, plain text output, fail-fast on errors — so agents can drive every command without prompts or parsing.
|
|
</Tab>
|
|
<Tab title="For automated pipelines">
|
|
**Determinism by design.** The rendering pipeline is seek-driven with no wall-clock dependencies. `frame = floor(time * fps)` — every frame is independently captured via Chrome's `beginFrame` API and encoded with FFmpeg. Same input always produces identical output, making CI testing and batch rendering reliable.
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
<Tip>
|
|
Hyperframes was designed from the ground up for AI agent integration. Compositions are plain HTML that any LLM can generate. The CLI is non-interactive by default — flag-driven with plain text output — so agents can scaffold, render, and lint without interactive prompts. Add `--human-friendly` for the interactive terminal UI. See [CLI](/packages/cli) for details.
|
|
</Tip>
|
|
|
|
## How It Works
|
|
|
|
<Steps>
|
|
<Step title="Write HTML">
|
|
Define your video as an HTML document. Each element gets data attributes for timing (`data-start`, `data-duration`) and layout (`data-track-index`). Add animations with GSAP, Lottie, CSS transitions, or any seekable runtime via the Frame Adapter pattern.
|
|
</Step>
|
|
<Step title="Preview in the browser">
|
|
Run `npx hyperframes preview` to open a live preview in your browser. Edit your HTML and see changes instantly — no build step, no compilation.
|
|
</Step>
|
|
<Step title="Render to MP4">
|
|
Run `npx hyperframes render --output output.mp4` to produce a final video. The engine seeks each frame in headless Chrome, captures it with `beginFrame`, and pipes the result through FFmpeg. Run locally or in Docker for fully reproducible output.
|
|
</Step>
|
|
</Steps>
|
|
|
|
## Packages
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="@hyperframes/core" icon="cube" href="/packages/core">
|
|
Types, HTML parsing, runtime, and composition linter — the foundation everything else builds on.
|
|
</Card>
|
|
<Card title="@hyperframes/sdk" icon="code" href="/packages/sdk">
|
|
Headless composition editing engine for agents, custom editors, patch events, and persistence.
|
|
</Card>
|
|
<Card title="@hyperframes/engine" icon="gear" href="/packages/engine">
|
|
Seekable page-to-video capture engine. Loads HTML in headless Chrome and captures frame-by-frame.
|
|
</Card>
|
|
<Card title="@hyperframes/player" icon="play" href="/packages/player">
|
|
Embeddable web component for playing HyperFrames compositions in any web page.
|
|
</Card>
|
|
<Card title="@hyperframes/producer" icon="video" href="/packages/producer">
|
|
Full rendering pipeline combining capture and FFmpeg encoding into a single API call.
|
|
</Card>
|
|
<Card title="@hyperframes/shader-transitions" icon="sparkles" href="/packages/shader-transitions">
|
|
WebGL shader transitions for scene-to-scene motion and render-time compositing.
|
|
</Card>
|
|
<Card title="@hyperframes/aws-lambda" icon="cloud" href="/packages/aws-lambda">
|
|
AWS Lambda and Step Functions adapter for distributed rendering.
|
|
</Card>
|
|
<Card title="@hyperframes/gcp-cloud-run" icon="cloud" href="/packages/gcp-cloud-run">
|
|
Google Cloud Run and Workflows adapter for distributed rendering.
|
|
</Card>
|
|
<Card title="@hyperframes/studio" icon="palette" href="/packages/studio">
|
|
Visual composition editor UI for building and previewing timelines interactively.
|
|
</Card>
|
|
<Card title="hyperframes (CLI)" icon="terminal" href="/packages/cli">
|
|
Command-line tool for creating, previewing, and rendering compositions.
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Next Steps
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Showcase" icon="play" href="/showcase">
|
|
Get inspired by finished videos and production launch projects.
|
|
</Card>
|
|
<Card title="Quickstart" icon="rocket" href="/quickstart">
|
|
Build and render your first video in 60 seconds
|
|
</Card>
|
|
<Card title="Skills catalog" icon="sparkles" href="/guides/skills">
|
|
Every HyperFrames AI agent skill — router, creation workflows, and domain skills
|
|
</Card>
|
|
<Card title="Compositions" icon="layer-group" href="/concepts/compositions">
|
|
Understand the HTML-based data model behind every video
|
|
</Card>
|
|
<Card title="GSAP Animation" icon="wand-magic-sparkles" href="/guides/gsap-animation">
|
|
Add timeline-driven animations with GSAP
|
|
</Card>
|
|
<Card title="Rendering" icon="film" href="/guides/rendering">
|
|
Render locally, in Docker, or in a CI pipeline
|
|
</Card>
|
|
</CardGroup>
|