# HyperFrames

## Guides

### Start here

- [What is HyperFrames?](https://hyperframes.heygen.com/introduction.md): See what an AI agent can make with ordinary web technology.
- [Make your first video](https://hyperframes.heygen.com/quickstart.md): Install the HyperFrames skills, make one short request, and continue with your agent, Studio, or the CLI.
- [Go further with HyperFrames](https://hyperframes.heygen.com/go-further.md): Take more control of an existing project through your agent, Studio, richer composition tools, and a reliable finish.
- [Build on HyperFrames](https://hyperframes.heygen.com/developers/index.md): Choose the smallest HyperFrames surface for automation, editing, playback, rendering, or generated compositions.

### Explore

- [Examples](https://hyperframes.heygen.com/examples.md): Watch finished HyperFrames videos, inspect real production projects, or start from a working template.
- [30 Days of HyperFrames](https://hyperframes.heygen.com/thirty-days.md): The official 30 Days of HyperFrames lessons, collected in one place as the series is published.
- [Product updates](https://hyperframes.heygen.com/product-updates.md): The HyperFrames changes that matter when you create, edit, and render projects.
- [Weekly updates](https://hyperframes.heygen.com/weekly-updates.md): Curated weekly highlights for HyperFrames.
- [Changelog](https://hyperframes.heygen.com/changelog.md): Release notes for HyperFrames.

### Choose where to create

- [Choose how to create](https://hyperframes.heygen.com/guides/choose-creation-path.md): Four places to make a HyperFrames video, and how to tell which one is yours.
- [Create through an AI chat](https://hyperframes.heygen.com/guides/mcp.md): Use the hosted HyperFrames MCP connector to create and render without installing the local CLI.
- [Bring a design into a project](https://hyperframes.heygen.com/guides/design-tools.md): Start from a Figma file or a design-tool draft. Keep the look, rebuild only what has to move.

### Prompt Guide

- [Prompt Guide](https://hyperframes.heygen.com/prompting/overview.md): How to prompt AI agents to author HyperFrames videos — setup, the two prompt shapes, and the map of this guide.

#### Level 1 — Your first video

- [Product launch videos](https://hyperframes.heygen.com/prompting/product-launch.md): What to say to turn a product URL, a script, or a brief into a launch or promo video — and when to reach for a site tour instead.
- [Explainers](https://hyperframes.heygen.com/prompting/explainers.md): What to say to turn an article, notes, or a topic into a faceless explainer — where every visual is invented, not captured.
- [Code changes and PRs](https://hyperframes.heygen.com/prompting/code-and-prs.md): What to say to turn a GitHub pull request into a code-change explainer — changelog, feature reveal, fix, or refactor walkthrough.
- [Captions and talking-head footage](https://hyperframes.heygen.com/prompting/captions-and-talking-heads.md): Two ways to dress an existing talking-head clip — readable captions or designed graphic overlays — both leaving the footage itself untouched.
- [Music videos and slideshows](https://hyperframes.heygen.com/prompting/music-and-slideshows.md): Two music- and slide-driven outputs that look alike in a brief but ship differently — a beat-synced MP4 versus a navigable deck — and how to route to the right one.
- [Motion graphics](https://hyperframes.heygen.com/prompting/motion-graphics.md): Short, design-led pieces where motion is the message — kinetic type, a stat hit, a logo sting — and the knobs that decide MP4 versus transparent overlay.

#### Level 2 — Control

- [Anatomy of a one-shot prompt](https://hyperframes.heygen.com/prompting/anatomy.md): The six-part skeleton — route, spec, beats, copy, technique, negatives — that removes the decisions agents most often get wrong.
- [The specification dial](https://hyperframes.heygen.com/prompting/specification-dial.md): Spec density controls how far the result drifts from what you imagined — not whether it works.
- [Vocabulary that changes output](https://hyperframes.heygen.com/prompting/vocabulary.md): Natural-language adjectives the skills map to specific framework settings — easing, captions, transitions, audio, voices.
- [High-fidelity looks](https://hyperframes.heygen.com/prompting/visual-specs.md): Write a visual spec that names, places, colors, and times every element, so words alone carry a specific look.
- [Verified example prompts](https://hyperframes.heygen.com/prompting/examples.md): Prompts that produced the videos on this page, plus the shared motion preamble each one was run with.

#### Level 3 — Life

- [Motion that reads premium](https://hyperframes.heygen.com/prompting/motion.md): Eight rules for motion that reads as premium: nothing stops, the camera acts, action overlaps, and imperfection stays reproducible.
- [Transitions](https://hyperframes.heygen.com/prompting/transitions.md): Map energy and mood to named shader and CSS transition blocks, and prompt them per seam.

#### Level 4 — Substance

- [Code animations](https://hyperframes.heygen.com/prompting/code-blocks.md): Prompt code walkthroughs — typing, diffing, highlighting, scrolling — and pick a terminal or editor theme by name.
- [Data and maps](https://hyperframes.heygen.com/prompting/data-and-maps.md): Prompt animated charts, count-up stats, and maps — highlight regions, draw flows, size bubbles — or hand-draw a chart for full control.
- [Overlays and lower thirds](https://hyperframes.heygen.com/prompting/overlays-and-lower-thirds.md): Prompt named lower-third and social-post overlay blocks with timing, copy, and brand tone.
- [Caption styles](https://hyperframes.heygen.com/prompting/captions-catalog.md): Map caption tone to named caption components, and prompt per-word emphasis for composed videos.
- [When to generate artwork](https://hyperframes.heygen.com/prompting/generated-artwork.md): Code-drawn wins for UI, type, geometry, and 3D. Illustration-led hero art comes from an image model, animated as layers.
- [Color grading and film effects](https://hyperframes.heygen.com/prompting/color-grading.md): Grade media with a fixed-order pipeline — tonal work, hue keys, print and analogue treatments — and know why the source matters more than the payload.
- [VFX and liquid glass](https://hyperframes.heygen.com/prompting/vfx-and-liquid-glass.md): Prompt device mockups, liquid-glass UI, shatter/portal/magnetic moments, and ambient polish — and know which effects need the canvas pipeline.
- [Runtimes and 3D](https://hyperframes.heygen.com/prompting/runtimes-and-3d.md): GSAP is the default and you rarely name it. Real 3D, existing animation files, and scene transitions each have a runtime worth pinning in the prompt.

#### Level 5 — Voice and sound

- [Media and audio](https://hyperframes.heygen.com/prompting/media-and-audio.md): Ask for the voiceover, music, sound, captions, cutouts, and assets a composition needs, in phrasing the media pipeline acts on.
- [Audio effects and mixing](https://hyperframes.heygen.com/prompting/audio-effects.md): Ask for a mix in symptoms rather than in filters — make music step out of the way of narration, clean a voice, and know which requests have no honest answer.

#### Level 6 — Scale

- [Design systems and brand](https://hyperframes.heygen.com/prompting/design-systems.md): Point the agent at a source of brand truth — a design spec, a site, or a Figma file — instead of asking for 'on-brand', and let it compose the frame.
- [Variables and templating](https://hyperframes.heygen.com/prompting/variables-and-templating.md): Ask for the parts that should change to become named slots, then re-render the same composition with different values — one output per record.
- [Storyboards](https://hyperframes.heygen.com/prompting/storyboards.md): For multi-scene work, don't prompt the scenes one by one — prompt the plan: the arc, the per-frame beats, and the pacing rule the build follows to fill them in.
- [Editing existing videos](https://hyperframes.heygen.com/prompting/editing-existing-videos.md): Direct the agent like an editor — trim, move, retime, swap, restyle — with the NLE verb you already know mapped to the prompt that lands it in one pass.
- [Iterating](https://hyperframes.heygen.com/prompting/iterating.md): Talk to the agent like a video editor — small targeted edits beat re-specification.
- [Recreating something you saw](https://hyperframes.heygen.com/prompting/recreating-references.md): Transcribe motion, iterate with absolute targets, distill the constants — and know where the text-only ceiling is.
- [Rendering and output](https://hyperframes.heygen.com/prompting/rendering-and-output.md): What to say to get the right file out — quality tier, format, resolution, framerate, and cloud rendering — without over-speccing a render that slows to no benefit.
- [Porting from Remotion](https://hyperframes.heygen.com/prompting/remotion-migration.md): What to say to migrate an existing Remotion (React) composition's source into HyperFrames HTML — and what to expect the agent to refuse.

#### Level 7 — Capstone

- [Capstone — every technique, one journey](https://hyperframes.heygen.com/prompting/capstone.md): One prompt, one unbroken camera move, and every technique in this guide joined into a single 62-second film.

#### Appendix

- [Rules and anti-patterns](https://hyperframes.heygen.com/prompting/rules-and-anti-patterns.md): The technical rules that keep renders correct, and the prompt patterns that cause friction.

### Workflows

- [Choose a workflow](https://hyperframes.heygen.com/workflows.md): Start from the material you already have.
- [Create a product or website video](https://hyperframes.heygen.com/guides/product-launch-video.md): Turn a product URL or launch brief into a promo, product tour, or social video.
- [Create a faceless explainer](https://hyperframes.heygen.com/guides/faceless-explainer.md): Turn notes, an article, or a difficult idea into a visual explanation without product footage.
- [Turn a pull request into a video](https://hyperframes.heygen.com/guides/pr-to-video.md): Show what changed, why it matters, and what happens next.
- [Add captions or repackage talking-head footage](https://hyperframes.heygen.com/guides/captions-and-recuts.md): Add captions, add designed overlays, or change the spoken edit.
- [Create a motion graphic](https://hyperframes.heygen.com/guides/motion-graphics.md): Make a short, motion-led title, statistic, chart, logo sting, or overlay.
- [Create a music-driven video](https://hyperframes.heygen.com/guides/music-to-video.md): Cut footage, images, lyrics, and motion to a track’s beat grid.
- [Create an interactive presentation](https://hyperframes.heygen.com/guides/slideshow.md): Build a navigable deck with reveals, notes, optional branches, hotspots, and presenter mode.
- [Create a custom video](https://hyperframes.heygen.com/guides/general-video.md): Combine sources, change existing footage, or co-direct a video when no focused workflow fits.
- [HyperFrames or Remotion?](https://hyperframes.heygen.com/guides/hyperframes-vs-remotion.md): The same three-second title card written in Remotion React and in HyperFrames HTML, plus an honest read on which tool fits your project.

### Build the project

- [How a HyperFrames project works](https://hyperframes.heygen.com/concepts/index.md): Understand the editable files, compositions, timing, and tools behind a HyperFrames video.
- [Work with media](https://hyperframes.heygen.com/guides/media.md): Use footage, images, audio, captions, backgrounds, and color in a HyperFrames project.
- [Use images and video](https://hyperframes.heygen.com/guides/video-components.md): Import, place, replace, trim, and review images and footage in a HyperFrames project.
- [Add an avatar presenter](https://hyperframes.heygen.com/guides/avatar-presenter.md): Create or reuse a presenter clip, keep it as project media, and combine it with editable HyperFrames scenes.
- [Use voice, music, sound, and captions](https://hyperframes.heygen.com/guides/voice-and-audio.md): Build an understandable audio mix, transcribe real speech, and turn it into readable captions.
- [Remove a background](https://hyperframes.heygen.com/guides/remove-background.md): Turn footage of a person or a portrait image into transparent media you can layer over a HyperFrames scene.
- [Color grade images and footage](https://hyperframes.heygen.com/guides/color-grading.md): Fix exposure and color on an image or video, shape a look with wheels and curves, apply a LUT, and check the result against real measurements.
- [Apply media effects](https://hyperframes.heygen.com/guides/media-effects.md): Turn an image or video into ASCII, halftone print, tape damage, CRT, painted art, and more — without touching the original file.
- [Finish and share a video](https://hyperframes.heygen.com/guides/export-and-share.md): Review the project, run its checks, render through an agent, Studio, or the CLI, and deliver the right file or link.

### Help

- [Get unstuck](https://hyperframes.heygen.com/help.md): Start with what you can see, try the smallest useful fix, and get back to your HyperFrames task.
- [Troubleshooting](https://hyperframes.heygen.com/guides/troubleshooting.md): Solve common Studio, project, media, animation, preview, and rendering problems.
- [Share feedback](https://hyperframes.heygen.com/guides/feedback.md): Report a problem or tell the HyperFrames team what would make the product better.

## Studio

### Start in Studio

- [Work on a project in Studio](https://hyperframes.heygen.com/studio/index.md): Open a HyperFrames project, understand the workspace, make a safe edit, and finish a version.

### Edit

- [Edit the frame](https://hyperframes.heygen.com/studio/canvas.md): Select the right element, change its content or design, arrange layers, and verify the result in motion.
- [Edit timing on the timeline](https://hyperframes.heygen.com/studio/timeline.md): Move, trim, split, align, and inspect clips in HyperFrames Studio.
- [Edit animation and keyframes](https://hyperframes.heygen.com/studio/animation.md): Read existing motion, add and retime keyframes, record gestures, shape paths, and handle generated animation.
- [Edit captions](https://hyperframes.heygen.com/studio/captions.md): Review captions in context and understand which Studio edits are saved today.

### Audio

- [Mix audio and apply effects](https://hyperframes.heygen.com/studio/audio-effects.md): Open a track's effect rack, fix a voice with one preset, and add individual effects in an order that works.
- [Make music sit under narration](https://hyperframes.heygen.com/studio/voiceover-carve.md): Take only the frequencies a voice occupies out of a music bed, so the music keeps its character while speech stays intelligible.
- [Group tracks, mute, and solo](https://hyperframes.heygen.com/studio/audio-groups.md): Give several audio clips one set of effects, one fader, and one mute — and know which of mute and solo reaches the export.
- [Automate a parameter over time](https://hyperframes.heygen.com/studio/audio-automation.md): Draw an envelope on a track's volume or an effect's knob, shape a selection, and know which parameters can move at all.

### Build and reuse

- [Use Assets and Catalog](https://hyperframes.heygen.com/studio/assets-and-blocks.md): Import project media, reuse existing files, and add ready-made visuals.
- [Use variables and templates](https://hyperframes.heygen.com/studio/variables.md): Turn a visible value into a reusable input, preview variants, and hand the template off.
- [Build a slideshow](https://hyperframes.heygen.com/studio/slideshows.md): Shape the main presentation, then add reveals, notes, branches, and hotspots where they help.

### Finish and recover

- [Export and manage renders](https://hyperframes.heygen.com/studio/export.md): Choose a format, quality, resolution, and frame rate, then manage the render queue.
- [Studio troubleshooting](https://hyperframes.heygen.com/studio/troubleshooting.md): Recover from selection, preview, editing, timeline, and export problems.

### Reference

- [Work with source and an agent](https://hyperframes.heygen.com/studio/source.md): Edit project files, diagnose a failed check, and hand the right context to an AI agent.
- [Keyboard shortcuts](https://hyperframes.heygen.com/studio/shortcuts.md): Use Studio shortcuts for playback, editing, navigation, and project actions.

## Studio app

### Get started

- [Get the HyperFrames Studio app](https://hyperframes.heygen.com/studio-app/index.md): Download the HyperFrames Studio app for Mac or Linux, open it for the first time, and sign in with your HeyGen account.
- [Connect your agent](https://hyperframes.heygen.com/studio-app/connect-your-agent.md): Set up Claude Code or Codex once so the HyperFrames Studio app can build and change your videos.

### Make videos

- [Make your first video](https://hyperframes.heygen.com/studio-app/first-video.md): Pick four parts, add your website or idea, and let the agent build your first video in the HyperFrames Studio app.
- [Change your video with the agent](https://hyperframes.heygen.com/studio-app/edit-with-the-agent.md): Type a change, point at the picture, draw, or comment, then send several edits to the agent at once.
- [Export your video](https://hyperframes.heygen.com/studio-app/export.md): Render a finished video file from the HyperFrames Studio app and find it in your Downloads folder.

### Help

- [Updates and troubleshooting](https://hyperframes.heygen.com/studio-app/troubleshooting.md): How the HyperFrames Studio app updates itself, and what to do when it says your agent is signed out, out of usage, or blocked.

- [Catalog (394 pages)](https://hyperframes.heygen.com/_llms/catalog.md): Documentation for Catalog.

## Developers

### Start here

- [How HyperFrames fits into an application](https://hyperframes.heygen.com/developers/overview.md): Understand the composition contract, editing surfaces, Player, CLI, and rendering layers before choosing an integration.

### Command line

- [CLI guide](https://hyperframes.heygen.com/developers/cli.md): Find the HyperFrames command for creating, checking, rendering, publishing, and automating projects.
- [CLI](https://hyperframes.heygen.com/packages/cli.md): Create, preview, and render HTML video compositions from the command line.
- [How catalog search works](https://hyperframes.heygen.com/developers/catalog-search.md): What `hyperframes catalog --query` does, the on-device model behind meaning search, what it downloads, and how its index is built.
- [@hyperframes/lint](https://hyperframes.heygen.com/packages/lint.md): The composition linter as a standalone library — lint a directory or a single HTML file without the CLI.

### SDK guides

- [Edit a composition with the SDK](https://hyperframes.heygen.com/sdk/quickstart.md): Open composition HTML, query and edit elements, serialize the result, and add persistence.
- [Querying & Editing Elements](https://hyperframes.heygen.com/sdk/guides/querying-and-editing.md): Find elements by property, make typed mutations, group edits with batch, and work with element handles and selection.
- [Timing & Animation](https://hyperframes.heygen.com/sdk/guides/timing-and-animation.md): Set clip timing, elastic holds, GSAP tweens, and keyframed animations on composition elements.
- [Undo, Redo & Patches](https://hyperframes.heygen.com/sdk/guides/undo-redo-and-patches.md): Use the SDK's built-in undo stack, subscribe to patch events, and integrate with a host application's own history.
- [Persistence](https://hyperframes.heygen.com/sdk/guides/persistence.md): Autosave composition edits through pluggable adapters — filesystem, memory, or your own storage backend.
- [Embedded Override Mode](https://hyperframes.heygen.com/sdk/guides/embedded-override-mode.md): Layer a sparse delta on top of a reusable base composition so the host stores only what changed.
- [Canvas & Preview Integration](https://hyperframes.heygen.com/sdk/guides/canvas-integration.md): Connect a same-origin composition iframe to the SDK for hit-testing, draft preview, and selection.
- [Editing Affordances](https://hyperframes.heygen.com/sdk/guides/editing-affordances.md): Resolve capability flags and inspector sections for a selected element so your editor panel is element-aware.

### SDK reference

- [openComposition](https://hyperframes.heygen.com/sdk/reference/open-composition.md): Open a composition HTML string for editing. Returns a Composition session.
- [Composition](https://hyperframes.heygen.com/sdk/reference/composition.md): The main editing surface returned by openComposition — query, mutate, animate, and serialize a composition.
- [Edit Operations](https://hyperframes.heygen.com/sdk/reference/edit-operations.md): The complete EditOp catalog for dispatch(), can(), and batch().
- [Types](https://hyperframes.heygen.com/sdk/reference/types.md): Core types exported from @hyperframes/sdk, with pointers to the adapter, history, and persistence types.
- [Adapters](https://hyperframes.heygen.com/sdk/reference/adapters.md): Persistence and preview adapter interfaces, contracts, and the built-in factory functions.
- [Utilities & Constants](https://hyperframes.heygen.com/sdk/reference/utilities.md): History module, persist queue, document utilities, constants, and error types exported from @hyperframes/sdk.

### Composition, design & animation

- [Compositions](https://hyperframes.heygen.com/concepts/compositions.md): The fundamental building block of a Hyperframes video.
- [Reuse a design with variables](https://hyperframes.heygen.com/concepts/variables.md): Change approved text, colors, media, and choices without rebuilding the composition.
- [Time elements with data attributes](https://hyperframes.heygen.com/concepts/data-attributes.md): Place clips on the HyperFrames timeline without putting timing logic in JavaScript.
- [Animate with GSAP](https://hyperframes.heygen.com/guides/gsap-animation.md): Create a paused timeline that HyperFrames can seek to any frame.
- [Frame sources](https://hyperframes.heygen.com/guides/frame-sources.md): Run deterministic scene code on the HyperFrames timeline.
- [Imported film HTML](https://hyperframes.heygen.com/guides/imported-film-html.md): Connect preserved film-runner HTML to HyperFrames capture.
- [Frame adapters](https://hyperframes.heygen.com/concepts/frame-adapters.md): Connect a seekable animation timeline to a custom HyperFrames host.
- [Deterministic Rendering](https://hyperframes.heygen.com/concepts/determinism.md): Same input, identical output. Every time.
- [HTML in Canvas](https://hyperframes.heygen.com/guides/html-in-canvas.md): Use live DOM content as a texture for WebGL and canvas effects.
- [Per-pixel effects with data-vfx-chain](https://hyperframes.heygen.com/guides/vfx-chain.md): The data-vfx-chain attribute: a WebGL2 kernel chain for warps, displacement, and generated noise that repaints deterministically on every seek.
- [Figma integration](https://hyperframes.heygen.com/guides/figma.md): Bring Figma designs into HyperFrames — frozen assets, brand tokens, editable components, storyboard reconstruction, and Figma Motion timelines translated to GSAP.

### Composition reference

- [HTML schema reference](https://hyperframes.heygen.com/reference/html-schema.md): The current contract for a HyperFrames composition.
- [Color grading implementation](https://hyperframes.heygen.com/reference/color-grading.md): Persist, automate, animate, and spatially isolate media color grading.
- [Audio effects implementation](https://hyperframes.heygen.com/reference/audio-effects.md): The four audio attributes, every effect and parameter, automation targets, the voiceover carve, audio groups, and how preview and render stay identical.
- [Speed ramps](https://hyperframes.heygen.com/reference/speed-ramps.md): Change a clip's playback speed over time with a rate lane in data-automation. One curve drives the preview, the render and Studio.

### Rendering paths

- [Render from the command line](https://hyperframes.heygen.com/guides/rendering.md): Check a project and render MP4, MOV, WebM, GIF, or PNG output.
- [Choose a rendering path](https://hyperframes.heygen.com/deploy/overview.md): Choose the smallest HyperFrames rendering surface for local work, an application backend, managed cloud, or infrastructure you operate.
- [Cloud rendering](https://hyperframes.heygen.com/deploy/cloud.md): Render on HeyGen's managed cloud without deploying your own infrastructure.
- [Deploy a preview and render API](https://hyperframes.heygen.com/guides/deploy.md): Start from an official Vercel, Cloudflare, or Modal template when you need a hosted preview and MP4 render endpoint.

### Cloud infrastructure

- [AWS Lambda](https://hyperframes.heygen.com/deploy/aws-lambda.md): Deploy distributed HyperFrames rendering to AWS Lambda and drive renders from a laptop or CI.
- [Google Cloud Run](https://hyperframes.heygen.com/deploy/gcp-cloud-run.md): Deploy distributed HyperFrames rendering to Cloud Run, Cloud Workflows, and Google Cloud Storage.
- [Render templates on Lambda](https://hyperframes.heygen.com/deploy/templates-on-lambda.md): Render one HyperFrames composition with different variable values, individually or from a JSONL batch.
- [Migrating to HyperFrames Lambda](https://hyperframes.heygen.com/deploy/migrating-to-hyperframes-lambda.md): Side-by-side mapping for adopters coming to HyperFrames from another one-command-deploy video renderer.
- [@hyperframes/aws-lambda](https://hyperframes.heygen.com/packages/aws-lambda.md): AWS Lambda and Step Functions adapter for distributed HyperFrames rendering.
- [@hyperframes/gcp-cloud-run](https://hyperframes.heygen.com/packages/gcp-cloud-run.md): Google Cloud Run and Workflows adapter for distributed HyperFrames rendering.

### Advanced rendering

- [Render in 4K](https://hyperframes.heygen.com/guides/4k-rendering.md): Author at 4K or supersample an existing composition at render time.
- [Render HDR video](https://hyperframes.heygen.com/guides/hdr.md): Preserve BT.2020 PQ or HLG sources in a 10-bit H.265 MP4.
- [Fix a slow preview or render](https://hyperframes.heygen.com/guides/performance.md): Find the expensive part of a composition and make it cheaper.

### Packages

- [@hyperframes/core](https://hyperframes.heygen.com/packages/core.md): Composition types, generation, compilation, and browser runtime.
- [@hyperframes/parsers](https://hyperframes.heygen.com/packages/parsers.md): The GSAP + HTML parser/writer suite — standalone, zero @hyperframes/* dependencies.
- [@hyperframes/studio-server](https://hyperframes.heygen.com/packages/studio-server.md): Mount the Studio project and preview API in your own server.
- [@hyperframes/sdk](https://hyperframes.heygen.com/packages/sdk.md): Headless, framework-neutral composition editing engine for agents and custom editors.
- [@hyperframes/engine](https://hyperframes.heygen.com/packages/engine.md): Low-level, seekable frame capture and encoding primitives.
- [@hyperframes/player](https://hyperframes.heygen.com/packages/player.md): Embeddable web component for playing HyperFrames compositions in any web page.
- [@hyperframes/producer](https://hyperframes.heygen.com/packages/producer.md): Render a HyperFrames project from Node.js.
- [@hyperframes/shader-transitions](https://hyperframes.heygen.com/packages/shader-transitions.md): WebGL shader transitions for HyperFrames scenes and compositions.
- [@hyperframes/studio](https://hyperframes.heygen.com/packages/studio.md): React components and hooks used to build the HyperFrames Studio editing interface.

### Agent setup

- [Authentication & API keys](https://hyperframes.heygen.com/guides/authentication.md): Sign in to HeyGen and understand how agent workflows choose voice, music, sound, and optional capture-description providers.
- [Install the HyperFrames plugin](https://hyperframes.heygen.com/guides/plugins.md): Install video creation skills as one versioned plugin and let your agent manage updates.
- [Install and update agent skills](https://hyperframes.heygen.com/guides/skills.md): Teach a coding agent how to create valid HyperFrames projects and load specialized workflows when needed.
- [Let an agent drive Studio](https://hyperframes.heygen.com/guides/webmcp.md): Studio exposes its editing capabilities as WebMCP tools, so an agent in your browser can see the composition and change it alongside you.

### Contributing & community

- [Contribute to HyperFrames](https://hyperframes.heygen.com/contributing.md): Set up the repository, make a focused change, and open a pull request.
- [Contribute to the Catalog](https://hyperframes.heygen.com/contributing/catalog.md): Add a reusable block or component to the HyperFrames registry.
- [Release channels](https://hyperframes.heygen.com/contributing/release-channels.md): How HyperFrames keeps alpha-only work out of stable releases.
- [Release agent plugins](https://hyperframes.heygen.com/contributing/agent-plugins.md): Build, verify, and publish HyperFrames plugin packages from one committed release.
- [Changelog process](https://hyperframes.heygen.com/contributing/changelog-process.md): How HyperFrames drafts, reviews, and publishes release notes.
- [Test local CLI changes](https://hyperframes.heygen.com/contributing/testing-local-changes.md): Run an unreleased HyperFrames CLI build against a real project outside the monorepo.
- [Canary rollouts](https://hyperframes.heygen.com/contributing/canary-rollouts.md): Ship a change to a percentage of installs instead of all-or-nothing.
- [Adopters](https://hyperframes.heygen.com/community/adopters.md): Organizations using HyperFrames in production or actively evaluating it.

> The links below point to documentation indexes. Follow each `/_llms/` index recursively until you reach documentation pages.

## Indexes

- [Catalog (394 pages)](https://hyperframes.heygen.com/_llms/catalog.md): Documentation for Catalog.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.