diff --git a/docs/docs.json b/docs/docs.json
index 72a6dc8b80c..a83ab4936db 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -48,26 +48,25 @@
"navigation": {
"tabs": [
{
- "tab": "Guides",
- "icon": "book-open",
+ "tab": "Start",
+ "icon": "rocket",
"groups": [
{
"group": "Start here",
"pages": [
"introduction",
+ "guides/is-hyperframes-free",
"quickstart",
"go-further",
"developers/index"
]
},
{
- "group": "Explore",
+ "group": "Choose your agent",
"pages": [
- "examples",
- "thirty-days",
- "product-updates",
- "weekly-updates",
- "changelog"
+ "guides/with-claude-code",
+ "guides/with-codex",
+ "guides/with-cursor"
]
},
{
@@ -79,86 +78,39 @@
]
},
{
- "group": "Prompt Guide",
+ "group": "Compare",
"pages": [
- "prompting/overview",
- {
- "group": "Level 1 — Your first video",
- "pages": [
- "prompting/product-launch",
- "prompting/explainers",
- "prompting/code-and-prs",
- "prompting/captions-and-talking-heads",
- "prompting/music-and-slideshows",
- "prompting/motion-graphics"
- ]
- },
- {
- "group": "Level 2 — Control",
- "pages": [
- "prompting/anatomy",
- "prompting/specification-dial",
- "prompting/vocabulary",
- "prompting/visual-specs",
- "prompting/examples"
- ]
- },
- {
- "group": "Level 3 — Life",
- "pages": [
- "prompting/motion",
- "prompting/transitions"
- ]
- },
- {
- "group": "Level 4 — Substance",
- "pages": [
- "prompting/code-blocks",
- "prompting/data-and-maps",
- "prompting/overlays-and-lower-thirds",
- "prompting/captions-catalog",
- "prompting/generated-artwork",
- "prompting/color-grading",
- "prompting/vfx-and-liquid-glass",
- "prompting/runtimes-and-3d"
- ]
- },
- {
- "group": "Level 5 — Voice and sound",
- "pages": [
- "prompting/media-and-audio",
- "prompting/audio-effects"
- ]
- },
- {
- "group": "Level 6 — Scale",
- "pages": [
- "prompting/design-systems",
- "prompting/variables-and-templating",
- "prompting/storyboards",
- "prompting/editing-existing-videos",
- "prompting/iterating",
- "prompting/recreating-references",
- "prompting/rendering-and-output",
- "prompting/remotion-migration"
- ]
- },
- {
- "group": "Level 7 — Capstone",
- "pages": [
- "prompting/capstone"
- ]
- },
- {
- "group": "Appendix",
- "pages": [
- "prompting/rules-and-anti-patterns"
- ]
- }
+ "guides/hyperframes-vs-remotion",
+ "guides/remotion-alternatives",
+ "faq"
+ ]
+ },
+ {
+ "group": "Explore",
+ "pages": [
+ "examples",
+ "thirty-days",
+ "product-updates",
+ "weekly-updates",
+ "changelog"
]
},
{
- "group": "Workflows",
+ "group": "Help",
+ "pages": [
+ "help",
+ "guides/troubleshooting",
+ "guides/feedback"
+ ]
+ }
+ ]
+ },
+ {
+ "tab": "Make",
+ "icon": "clapperboard",
+ "groups": [
+ {
+ "group": "Make a video",
"pages": [
"workflows",
"guides/product-launch-video",
@@ -168,8 +120,7 @@
"guides/motion-graphics",
"guides/music-to-video",
"guides/slideshow",
- "guides/general-video",
- "guides/hyperframes-vs-remotion"
+ "guides/general-video"
]
},
{
@@ -185,92 +136,153 @@
"guides/media-effects",
"guides/export-and-share"
]
- },
- {
- "group": "Help",
- "pages": [
- "help",
- "guides/troubleshooting",
- "guides/feedback"
- ]
}
]
},
{
- "tab": "Studio",
- "icon": "palette",
+ "tab": "Prompt guide",
+ "icon": "wand-magic-sparkles",
"groups": [
{
- "group": "Start in Studio",
+ "group": "Overview",
"pages": [
- "studio/index"
+ "prompting/overview"
]
},
{
- "group": "Edit",
+ "group": "Level 1 — Your first video",
"pages": [
- "studio/canvas",
- "studio/timeline",
- "studio/animation",
- "studio/captions"
+ "prompting/product-launch",
+ "prompting/explainers",
+ "prompting/code-and-prs",
+ "prompting/captions-and-talking-heads",
+ "prompting/music-and-slideshows",
+ "prompting/motion-graphics"
]
},
{
- "group": "Audio",
+ "group": "Level 2 — Control",
"pages": [
- "studio/audio-effects",
- "studio/voiceover-carve",
- "studio/audio-groups",
- "studio/audio-automation"
+ "prompting/anatomy",
+ "prompting/specification-dial",
+ "prompting/vocabulary",
+ "prompting/visual-specs",
+ "prompting/examples"
]
},
{
- "group": "Build and reuse",
+ "group": "Level 3 — Life",
"pages": [
- "studio/assets-and-blocks",
- "studio/variables",
- "studio/slideshows"
+ "prompting/motion",
+ "prompting/transitions"
]
},
{
- "group": "Finish and recover",
+ "group": "Level 4 — Substance",
"pages": [
- "studio/export",
- "studio/troubleshooting"
+ "prompting/code-blocks",
+ "prompting/data-and-maps",
+ "prompting/overlays-and-lower-thirds",
+ "prompting/captions-catalog",
+ "prompting/generated-artwork",
+ "prompting/color-grading",
+ "prompting/vfx-and-liquid-glass",
+ "prompting/runtimes-and-3d"
]
},
{
- "group": "Reference",
+ "group": "Level 5 — Voice and sound",
"pages": [
- "studio/source",
- "studio/shortcuts"
+ "prompting/media-and-audio",
+ "prompting/audio-effects"
+ ]
+ },
+ {
+ "group": "Level 6 — Scale",
+ "pages": [
+ "prompting/design-systems",
+ "prompting/variables-and-templating",
+ "prompting/storyboards",
+ "prompting/editing-existing-videos",
+ "prompting/iterating",
+ "prompting/recreating-references",
+ "prompting/rendering-and-output",
+ "prompting/remotion-migration"
+ ]
+ },
+ {
+ "group": "Level 7 — Capstone",
+ "pages": [
+ "prompting/capstone"
+ ]
+ },
+ {
+ "group": "Appendix",
+ "pages": [
+ "prompting/rules-and-anti-patterns"
]
}
]
},
{
- "tab": "Studio app",
- "icon": "laptop",
+ "tab": "Studio",
+ "icon": "palette",
"groups": [
{
- "group": "Get started",
+ "group": "Studio app (Mac, Linux)",
"pages": [
"studio-app/index",
- "studio-app/connect-your-agent"
- ]
- },
- {
- "group": "Make videos",
- "pages": [
+ "studio-app/connect-your-agent",
"studio-app/first-video",
"studio-app/edit-with-the-agent",
- "studio-app/export"
+ "studio-app/export",
+ "studio-app/troubleshooting"
]
},
{
- "group": "Help",
+ "group": "Studio in the browser",
"pages": [
- "studio-app/troubleshooting"
+ "studio/index",
+ {
+ "group": "Edit",
+ "pages": [
+ "studio/canvas",
+ "studio/timeline",
+ "studio/animation",
+ "studio/captions"
+ ]
+ },
+ {
+ "group": "Audio",
+ "pages": [
+ "studio/audio-effects",
+ "studio/voiceover-carve",
+ "studio/audio-groups",
+ "studio/audio-automation"
+ ]
+ },
+ {
+ "group": "Build and reuse",
+ "pages": [
+ "studio/assets-and-blocks",
+ "studio/variables",
+ "studio/slideshows"
+ ]
+ },
+ {
+ "group": "Finish and recover",
+ "pages": [
+ "studio/export",
+ "studio/troubleshooting"
+ ]
+ },
+ {
+ "group": "Reference",
+ "pages": [
+ "studio/source",
+ "studio/shortcuts"
+ ]
+ }
]
}
]
diff --git a/docs/faq.mdx b/docs/faq.mdx
new file mode 100644
index 00000000000..80e2c9dad35
--- /dev/null
+++ b/docs/faq.mdx
@@ -0,0 +1,155 @@
+---
+title: "HyperFrames FAQ"
+sidebarTitle: "FAQ"
+description: "Short answers to the questions people ask most about HyperFrames: cost, which agent to use, Windows, Studio, Remotion, rendering, audio, and fonts."
+---
+
+Short answers to the questions people ask the docs assistant most often. Each
+answer links to the page with the details.
+
+## Is HyperFrames free?
+
+Yes. The framework, CLI, and skills are open source under Apache 2.0, and
+rendering on your own computer is free and needs no account. Your AI agent's
+plan and optional HeyGen-hosted features, such as HeyGen voices, avatars, and
+cloud rendering, bill through their own accounts. See
+[Is HyperFrames free?](/guides/is-hyperframes-free).
+
+## Can I use HyperFrames commercially?
+
+Yes. The [Apache 2.0 license](https://github.com/heygen-com/hyperframes/blob/main/LICENSE)
+lets you use, change, and distribute HyperFrames, including in commercial work,
+under its terms. Media you add, such as fonts, music, or footage, keeps its own
+license.
+
+## Which AI agent should I use?
+
+Any coding agent that supports skills works, including Claude Code, Codex,
+Cursor, Gemini CLI, GitHub Copilot, Google Antigravity, IBM Bob, and OpenCode.
+If you have none yet, start with Claude Code or Codex. Setup guides:
+[Claude Code](/guides/with-claude-code), [Codex](/guides/with-codex),
+[Cursor](/guides/with-cursor), and [other agents](/guides/skills).
+
+## Can I use it in the Claude or ChatGPT chat app?
+
+Yes, through the hosted HyperFrames connector. It creates and renders videos in
+your HeyGen account, with nothing installed on your computer. You give up the
+local project folder and Studio. Your chat product's plan decides whether you
+can add a custom connector. See [Create through an AI chat](/guides/mcp).
+
+## How do I install it?
+
+For Claude Code, install the plugin:
+
+```bash
+claude plugin marketplace add heygen-com/hyperframes
+claude plugin install hyperframes@hyperframes
+```
+
+For most other agents, run `npx skills add heygen-com/hyperframes` and choose
+**Core Skills**. Then start a new agent session. See
+[Make your first video](/quickstart).
+
+## Do I need a HeyGen account or API key?
+
+Not to make and render videos on your computer. You need one for HeyGen voices
+and music, avatars, cloud rendering, the hosted connector, and the Studio app.
+Sign in with `npx hyperframes auth login`. See
+[Authentication and API keys](/guides/authentication).
+
+## Does HyperFrames work on Windows?
+
+The CLI and the agent skills run on Windows, including rendering from
+PowerShell. The HyperFrames Studio app is available for Mac and Linux only. On
+Windows, edit in Studio in the browser with `npx hyperframes preview`. For WSL
+rendering tips, see [Troubleshooting](/guides/troubleshooting).
+
+## What is the difference between Studio and the Studio app?
+
+The **Studio app** is a desktop app for Mac and Linux: a chat with your agent, a
+preview, and an editor in one window, with no terminal needed. **Studio in the
+browser** is the editor that opens from any project when you run
+`npx hyperframes preview`. Both edit the same project files. See
+[Get the Studio app](/studio-app) and
+[Work on a project in Studio](/studio).
+
+## How is HyperFrames different from Remotion?
+
+Remotion videos are React components. HyperFrames videos are HTML, CSS, and
+JavaScript, timed with data attributes and a paused animation timeline.
+HyperFrames does not use or run Remotion. See
+[HyperFrames or Remotion?](/guides/hyperframes-vs-remotion) and
+[Remotion alternatives](/guides/remotion-alternatives).
+
+## How do I preview and render a video?
+
+Inside the project folder, open the live preview:
+
+```bash
+npx hyperframes preview
+```
+
+Then render the MP4:
+
+```bash
+npx hyperframes render --output final.mp4
+```
+
+Rendering needs FFmpeg. Run `npx hyperframes doctor` to check your machine. See
+[Render from the command line](/guides/rendering).
+
+## How long does a render take?
+
+It depends on length, resolution, and effects. In one measured example, a
+300-frame 1920×1080 composition rendered in 9.8 seconds, and in 25 seconds with
+one expensive CSS declaration left in. Use `--quality draft` for a faster review
+render. See [Fix a slow preview or render](/guides/performance).
+
+## Can it add voiceover, music, and sound effects?
+
+Yes. Ask the agent for them in your request. With a HeyGen account it uses HeyGen
+voices and the HeyGen music library. Without one, voice uses Kokoro, music uses
+MusicGen, and sound effects come from a bundled library, all on your computer.
+See [Use voice, music, sound, and captions](/guides/voice-and-audio).
+
+## Can it add captions to my video?
+
+Yes. Give the agent your talking-head footage and ask for captions. It
+transcribes the speech, times each word, and adds captions without changing the
+footage. See [Add captions or repackage talking-head footage](/guides/captions-and-recuts).
+
+## Can I use my own fonts?
+
+Yes. Put the font file in the project and declare it with `@font-face`. A font
+the project does not declare can fall back to a default face in the render, and
+`npx hyperframes lint` reports it. See the
+[font lint rules](/reference/lint-rules#fonts).
+
+## Can I render in the cloud or on my own servers?
+
+Yes. `hyperframes cloud render` renders on HeyGen's cloud and bills credits to
+your HeyGen account. You can also render on your own AWS Lambda or Google Cloud
+Run, or in Docker. See [Choose a rendering path](/deploy/overview).
+
+## Does HyperFrames send my video to HeyGen?
+
+Not when you preview and render locally: the project stays on your computer.
+Cloud rendering uploads the project to HeyGen, and the hosted connector builds it
+in your HeyGen account. The CLI sends usage data, such as command names and
+render performance, which stays anonymous until you sign in. It never sends
+project names or video content. Turn it off with `npx hyperframes telemetry disable`. Your
+AI agent sends your prompts to its own provider. See
+[the telemetry reference](/packages/cli#telemetry).
+
+## Something failed. What do I check first?
+
+Run these in the project folder and give the agent the full output:
+
+```bash
+npx hyperframes doctor
+npx hyperframes lint
+npx hyperframes check
+```
+
+See [Troubleshooting](/guides/troubleshooting) for specific errors, and
+[Share feedback](/guides/feedback) to report a bug.
diff --git a/docs/guides/hyperframes-vs-remotion.mdx b/docs/guides/hyperframes-vs-remotion.mdx
index f0894e67422..ef18f110456 100644
--- a/docs/guides/hyperframes-vs-remotion.mdx
+++ b/docs/guides/hyperframes-vs-remotion.mdx
@@ -163,3 +163,4 @@ because one framework looks newer.
- [How a HyperFrames composition works](/concepts/compositions)
- [Install and use the agent skills](/guides/skills)
- [Choose a rendering path](/deploy/overview)
+- [Compare more Remotion alternatives](/guides/remotion-alternatives)
diff --git a/docs/guides/is-hyperframes-free.mdx b/docs/guides/is-hyperframes-free.mdx
new file mode 100644
index 00000000000..dd5bc2d4900
--- /dev/null
+++ b/docs/guides/is-hyperframes-free.mdx
@@ -0,0 +1,60 @@
+---
+title: "Is HyperFrames free?"
+sidebarTitle: "Is it free?"
+description: "Yes. HyperFrames is open source under Apache 2.0 and renders locally for free. See what can cost money, and who bills you for it."
+---
+
+Yes. The HyperFrames framework, CLI, and agent skills are open source under the
+[Apache 2.0 license](https://github.com/heygen-com/hyperframes/blob/main/LICENSE),
+and rendering on your own computer is free. You pay only for the services you choose to add, such as
+your AI agent's plan or HeyGen-hosted features.
+
+## What is free
+
+| Part | Cost |
+| --- | --- |
+| The framework, CLI, and skills | Free and open source (Apache 2.0). You can use, change, and ship them, including in commercial work, under the license terms. |
+| Preview and render on your computer | Free. Local rendering does not use HeyGen credits and does not need an account. |
+| Offline voice, music, and sound effects | Free. With no key set, voice uses Kokoro, music uses MusicGen, and sound effects come from a bundled library. See [Working offline](/guides/authentication#working-offline). |
+| The HyperFrames Studio app | Free to download for Mac and Linux. You do not need to sign in to download it. |
+| Studio in the browser | Free. It opens from any project with `npx hyperframes preview`. |
+
+## What can cost money
+
+None of these come from HyperFrames itself. Each one bills through its own account.
+
+| You use | Who bills you |
+| --- | --- |
+| An AI agent (Claude Code, Codex, Cursor, and others) | The agent's provider, on your own plan or API key. In the Studio app, runs bill to the plan of the account your agent is signed in with. See [Connect your agent](/studio-app/connect-your-agent). |
+| HeyGen voices, the HeyGen music library, and avatar presenters | Your HeyGen account. Some of these draw on the account's allowance or credits. |
+| Cloud rendering with `hyperframes cloud render` | Your HeyGen account, in credits. 4K renders bill at 1.5×. See [Cloud rendering](/deploy/cloud). |
+| The hosted HyperFrames connector in an AI chat | Your HeyGen account and the chat product's plan. See [Create through an AI chat](/guides/mcp). |
+| Rendering on your own AWS Lambda or Google Cloud Run | Your cloud provider. See [AWS Lambda](/deploy/aws-lambda) and [Google Cloud Run](/deploy/gcp-cloud-run). |
+| Other providers you add a key for, such as ElevenLabs or Gemini | That provider. See [Providers used by agent workflows](/guides/authentication#providers-used-by-agent-workflows). |
+
+Check your HeyGen account's usage before a long or repeated run that uses hosted
+features.
+
+## Do I need a HeyGen account?
+
+Not to make and render videos on your computer. You need one for HeyGen-hosted
+features, cloud rendering, the hosted connector, and the Studio app, which asks
+you to sign in on first launch. Signing in and creating an account are the same
+step:
+
+```bash
+npx hyperframes auth login
+```
+
+See [Authentication and API keys](/guides/authentication).
+
+## Related topics
+
+
+
+ Install the skills and make a video locally, for free.
+
+
+ Answers to the questions people ask most.
+
+
diff --git a/docs/guides/remotion-alternatives.mdx b/docs/guides/remotion-alternatives.mdx
new file mode 100644
index 00000000000..c7f8c58b1be
--- /dev/null
+++ b/docs/guides/remotion-alternatives.mdx
@@ -0,0 +1,51 @@
+---
+title: "Remotion alternatives"
+description: "Compare tools that make video from code: HyperFrames, Remotion, Motion Canvas, Revideo, Editframe, Shotstack, and Creatomate. What you write, cost, and fit."
+---
+
+The main alternatives to Remotion are HyperFrames (HTML), Motion Canvas and
+Revideo (TypeScript), Editframe (HTML or React), and the hosted APIs Shotstack
+and Creatomate (JSON templates). Pick by what you want to write and where you
+want the render to run.
+
+## At a glance
+
+| Tool | What you write | License and pricing, in plain words | Best for |
+| --- | --- | --- | --- |
+| [HyperFrames](https://github.com/heygen-com/hyperframes) | HTML, CSS, and JavaScript, often written by an AI agent | Open source, [Apache 2.0](https://github.com/heygen-com/hyperframes/blob/main/LICENSE). Local rendering is free; optional [cloud rendering](/deploy/cloud) uses HeyGen credits | Agent-made videos, and teams with existing HTML, CSS, GSAP, or Lottie work |
+| [Remotion](https://www.remotion.dev) | React components | Free for individuals and companies of up to three people; a paid company license is required for four or more ([terms](https://www.remotion.pro/license)) | React teams that want typed components and a mature ecosystem |
+| [Motion Canvas](https://motioncanvas.io) | TypeScript generator functions, with an editor for a live preview | Open source, [MIT](https://github.com/motion-canvas/motion-canvas) | Informative vector animations synced to a voiceover |
+| [Revideo](https://github.com/redotvideo/revideo) | TypeScript scenes as generator functions, plus a render API and a React player | Open source, [MIT](https://github.com/redotvideo/revideo) | Code-defined scenes rendered from your own app or service |
+| [Editframe](https://www.editframe.com) | HTML and CSS custom elements, or React | Free for individuals and teams of up to three; paid plans for larger organizations and for metered cloud rendering ([pricing](https://www.editframe.com/pricing)) | Personalized video from app data, and an editor embedded in your product |
+| [Shotstack](https://shotstack.io) | JSON edits and templates, sent to a cloud API (SDKs for Node.js, Python, PHP, and Ruby) | Hosted service. Free sandbox; you pay per rendered minute with credits, pay as you go or monthly ([pricing](https://shotstack.io/pricing/)) | High-volume templated rendering with no render servers to run |
+| [Creatomate](https://creatomate.com) | Templates made in an online editor, filled through a REST API, or JSON | Hosted service. Free trial; monthly plans with credits, where video cost depends on resolution, frame rate, and length ([pricing](https://creatomate.com/pricing)) | Automated social and marketing videos, including no-code workflows |
+
+Pricing and terms change. Check each linked page before you decide.
+
+## How to choose
+
+- **You want an AI agent to make the video.** HyperFrames ships agent skills
+ that plan, build, check, and render a project. See
+ [Make your first video](/quickstart).
+- **Your team writes React.** Remotion or Editframe keep you in components.
+ For the line-by-line difference from HyperFrames, see
+ [HyperFrames or Remotion?](/guides/hyperframes-vs-remotion).
+- **You animate diagrams or explainers by hand in code.** Motion Canvas and
+ Revideo are built around generator-function scenes.
+- **You fill the same template thousands of times and do not want servers.**
+ Shotstack and Creatomate render in their cloud from JSON or templates.
+ HyperFrames can do this with [template variables](/concepts/variables) and
+ [cloud rendering](/deploy/cloud) or your own
+ [AWS Lambda](/deploy/aws-lambda).
+
+## Moving from Remotion
+
+HyperFrames does not run Remotion code. To port an existing Remotion
+composition, ask your agent to use the `remotion-to-hyperframes` skill. See
+[Porting from Remotion](/prompting/remotion-migration).
+
+## Related topics
+
+- [HyperFrames or Remotion?](/guides/hyperframes-vs-remotion)
+- [Is HyperFrames free?](/guides/is-hyperframes-free)
+- [HyperFrames FAQ](/faq)
diff --git a/docs/guides/with-claude-code.mdx b/docs/guides/with-claude-code.mdx
new file mode 100644
index 00000000000..fb02d3fc645
--- /dev/null
+++ b/docs/guides/with-claude-code.mdx
@@ -0,0 +1,110 @@
+---
+title: "Make videos with Claude Code"
+sidebarTitle: "Claude Code"
+description: "Install the HyperFrames plugin in Claude Code, ask for a video in plain words, then preview and render it to MP4 on your computer."
+---
+
+Install the HyperFrames plugin, then ask Claude Code for a video. Claude Code
+writes an HTML project in your folder, opens a live preview, and renders the MP4
+on your computer.
+
+```bash
+claude plugin marketplace add heygen-com/hyperframes
+claude plugin install hyperframes@hyperframes
+```
+
+## Before you start
+
+- [Claude Code](https://code.claude.com/docs), signed in with your Claude account
+ or an Anthropic Console account. Its usage bills to that account.
+- Node.js 22 or newer, and npm.
+- FFmpeg, for rendering MP4 files. Run `npx hyperframes doctor` to check.
+
+## Install
+
+
+
+ Run the two commands above in your terminal. Then start a new Claude Code
+ session, or run `/reload-plugins` in the current one.
+
+ To get updates on their own, run `/plugin`, open **Marketplaces**, select
+ **hyperframes**, and choose **Enable auto-update**. See
+ [Install the HyperFrames plugin](/guides/plugins) for manual updates and
+ removal.
+
+
+ Run this in your project folder and choose **Core Skills**:
+
+ ```bash
+ npx skills add heygen-com/hyperframes
+ ```
+
+ Or install the core set for your user, with no picker:
+
+ ```bash
+ npx hyperframes skills update
+ ```
+
+ Start a new Claude Code session afterwards. See
+ [Install and update agent skills](/guides/skills).
+
+
+
+## Ask for your first video
+
+Open Claude Code in an empty folder and paste:
+
+```text
+Using /hyperframes:hyperframes, make a 10-second product intro for https://example.com.
+```
+
+With standalone skills, the router is `/hyperframes` instead of
+`/hyperframes:hyperframes`. Replace the URL with the page you want the video to
+show.
+
+## What happens
+
+1. Claude Code proposes a direction and asks for anything important that is
+ missing.
+2. It picks a workflow for your request, such as a product launch video or an
+ explainer, and builds the project in your folder.
+3. It checks the project and opens a local preview.
+
+Watch the first version and say what to change, in the same conversation.
+
+## Preview and render
+
+To reopen the preview later, run this inside the project folder:
+
+```bash
+npx hyperframes preview
+```
+
+The preview opens in Studio, where you can also edit the video by hand. To make
+the MP4 yourself:
+
+```bash
+npx hyperframes render --output final.mp4
+```
+
+You can also ask Claude Code to render it.
+
+## Prefer an app?
+
+The [HyperFrames Studio app](/studio-app) for Mac and Linux uses Claude Code
+too. It installs Claude Code for you and gives you a chat, a preview, and an
+editor in one window. To create inside the Claude chat app instead, with
+nothing installed, use the [hosted connector](/guides/mcp).
+
+## If something goes wrong
+
+- **Claude Code does not see the skill.** Start a new session or run
+ `/reload-plugins`. For standalone skills, run `npx hyperframes skills check`.
+- **The render fails.** Run `npx hyperframes doctor` and fix what it reports.
+- **Anything else.** See [Troubleshooting](/guides/troubleshooting).
+
+## Related topics
+
+- [Make your first video](/quickstart)
+- [Choose a workflow](/workflows)
+- [Write better prompts](/prompting/overview)
diff --git a/docs/guides/with-codex.mdx b/docs/guides/with-codex.mdx
new file mode 100644
index 00000000000..71a854a1337
--- /dev/null
+++ b/docs/guides/with-codex.mdx
@@ -0,0 +1,97 @@
+---
+title: "Make videos with Codex"
+sidebarTitle: "Codex"
+description: "Install the HyperFrames skills for OpenAI Codex, ask for a video in plain words, then preview and render it to MP4 on your computer."
+---
+
+Install the HyperFrames skills, then ask Codex for a video. Codex writes an HTML
+project in your folder, opens a live preview, and renders the MP4 on your
+computer.
+
+```bash
+npx hyperframes skills update
+```
+
+This installs the core skills into your user's shared skills folder,
+`~/.agents/skills`, which Codex reads in every project.
+
+## Before you start
+
+- [Codex](https://developers.openai.com/codex), signed in with your ChatGPT
+ account or an OpenAI API key. Its usage bills to that account.
+- Node.js 22 or newer, and npm.
+- FFmpeg, for rendering MP4 files. Run `npx hyperframes doctor` to check.
+
+## Install
+
+Run the command above once. Run it again later to update the skills.
+
+To keep the skills with one project instead, run this in the project folder and
+choose **Core Skills** and **Codex** in the picker:
+
+```bash
+npx skills add heygen-com/hyperframes
+```
+
+Start a new Codex session after either install. See
+[Install and update agent skills](/guides/skills) for checking and updating.
+
+## Ask for your first video
+
+Open Codex in an empty folder and paste:
+
+```text
+Use $hyperframes to make a 10-second product intro for https://example.com.
+```
+
+`$hyperframes` names the HyperFrames router skill. Replace the URL with the page
+you want the video to show.
+
+## What happens
+
+1. Codex proposes a direction and asks for anything important that is missing.
+2. It picks a workflow for your request, such as a product launch video or an
+ explainer, and builds the project in your folder.
+3. It checks the project and opens a local preview.
+
+Codex may ask before it runs a command or uses the network. The skills install
+packages, start a preview server, and run the renderer, so approve those steps
+for this folder. Watch the first version and say what to change, in the same
+conversation.
+
+## Preview and render
+
+To reopen the preview later, run this inside the project folder:
+
+```bash
+npx hyperframes preview
+```
+
+The preview opens in Studio, where you can also edit the video by hand. To make
+the MP4 yourself:
+
+```bash
+npx hyperframes render --output final.mp4
+```
+
+You can also ask Codex to render it.
+
+## Prefer an app?
+
+The [HyperFrames Studio app](/studio-app) for Mac and Linux can use Codex as its
+agent. See [Connect your agent](/studio-app/connect-your-agent#codex). To create
+inside ChatGPT instead, with nothing installed, use the
+[hosted connector](/guides/mcp).
+
+## If something goes wrong
+
+- **Codex does not see the skill.** Start a new session, then run
+ `npx hyperframes skills check`.
+- **The render fails.** Run `npx hyperframes doctor` and fix what it reports.
+- **Anything else.** See [Troubleshooting](/guides/troubleshooting).
+
+## Related topics
+
+- [Make your first video](/quickstart)
+- [Choose a workflow](/workflows)
+- [Write better prompts](/prompting/overview)
diff --git a/docs/guides/with-cursor.mdx b/docs/guides/with-cursor.mdx
new file mode 100644
index 00000000000..a2d57ffde17
--- /dev/null
+++ b/docs/guides/with-cursor.mdx
@@ -0,0 +1,99 @@
+---
+title: "Make videos with Cursor"
+sidebarTitle: "Cursor"
+description: "Install the HyperFrames skills in Cursor, ask its agent for a video in plain words, then preview and render it to MP4 on your computer."
+---
+
+Install the HyperFrames skills in your project, then ask Cursor's agent for a
+video. The agent writes an HTML project in your folder, opens a live preview,
+and renders the MP4 on your computer.
+
+```bash
+npx skills add heygen-com/hyperframes
+```
+
+Run it in the root of the folder you open in Cursor, and choose **Core Skills**
+and **Cursor** in the picker.
+
+## Before you start
+
+- [Cursor](https://cursor.com), signed in. Agent usage bills to your Cursor plan.
+- Node.js 22 or newer, and npm.
+- FFmpeg, for rendering MP4 files. Run `npx hyperframes doctor` to check.
+
+## Install
+
+
+
+ Run the command above in the project folder. The skills stay with that
+ project. Reload Cursor or start a new agent chat afterwards.
+
+
+ Install the core set once for every project:
+
+ ```bash
+ npx hyperframes skills update
+ ```
+
+ When Cursor is installed, this links the skills into `~/.cursor/skills`.
+ Run it again later to update them.
+
+
+ Teams can add the HyperFrames plugin through a Cursor team marketplace, or
+ load a local copy. See [Install the HyperFrames plugin](/guides/plugins#cursor).
+
+
+
+## Ask for your first video
+
+Open a new agent chat in an empty project and paste:
+
+```text
+Using /hyperframes, make a 10-second product intro for https://example.com.
+```
+
+Replace the URL with the page you want the video to show.
+
+## What happens
+
+1. The agent proposes a direction and asks for anything important that is
+ missing.
+2. It picks a workflow for your request, such as a product launch video or an
+ explainer, and builds the project in your folder.
+3. It checks the project and opens a local preview.
+
+The agent runs terminal commands to install packages, start the preview, and
+render. Approve them when Cursor asks. Watch the first version and say what to
+change, in the same chat.
+
+## Preview and render
+
+To reopen the preview later, run this in Cursor's terminal, inside the project
+folder:
+
+```bash
+npx hyperframes preview
+```
+
+The preview opens in Studio, where you can also edit the video by hand. To make
+the MP4 yourself:
+
+```bash
+npx hyperframes render --output final.mp4
+```
+
+You can also ask the agent to render it.
+
+## If something goes wrong
+
+- **The agent does not see the skill.** Start a new agent chat. Confirm that
+ `.agents/skills` (project install) or `~/.cursor/skills` (user install)
+ contains `hyperframes`, then run `npx hyperframes skills check`.
+- **The render fails.** Run `npx hyperframes doctor` and fix what it reports.
+- **Anything else.** See [Troubleshooting](/guides/troubleshooting).
+
+## Related topics
+
+- [Make your first video](/quickstart)
+- [Choose a workflow](/workflows)
+- [Write better prompts](/prompting/overview)
diff --git a/docs/quickstart.mdx b/docs/quickstart.mdx
index 1249998d271..515ff5eae9b 100644
--- a/docs/quickstart.mdx
+++ b/docs/quickstart.mdx
@@ -17,7 +17,7 @@ import { DocsVideo } from "/snippets/docs-video.jsx";
HyperFrames is free and open-source, and local rendering does not use HeyGen credits. Your coding
agent and any optional hosted, voice, avatar, or generated-media services may have their own
- costs.
+ costs. See [Is HyperFrames free?](/guides/is-hyperframes-free)
## The short way: hand it to your agent