ukimsanov · Oct 26, 2026 · Oct 26, 2026 · Oct 26, 2026 · Oct 26, 2026 · Oct 26, 2026
diff --git a/docs/custom.css b/docs/custom.css
@@ -1670,3 +1670,21 @@ pre.shiki {
 .code-block-fade-overlay {
   background-image: linear-gradient(to right, transparent, var(--hf-code-bg) 24px) !important;
 }
+
+/* 30 Days: a numbered syllabus, one row per lesson, the film previews on hover */
+.hf-days { list-style: none; margin: 1rem 0 2rem; padding: 0; border-top: 1px solid var(--hf-ui-border); }
+.hf-day { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) 10.5rem; gap: 1.25rem; align-items: center;
+  padding: 0.9rem 0; border-bottom: 1px solid var(--hf-ui-border); margin: 0; }
+.hf-day-n { font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--hf-text-tertiary);
+  font-variant-numeric: tabular-nums; }
+.hf-day-title { font-weight: 600; font-size: 1rem; color: inherit; text-decoration: none; }
+.hf-day-title:hover { text-decoration: underline; text-underline-offset: 3px; }
+.hf-day-text p { margin: 0.2rem 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--hf-text-secondary); }
+.hf-day-film { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.5rem; background: var(--hf-surface2); }
+@media (max-width: 640px) {
+  .hf-day { grid-template-columns: 2.25rem minmax(0, 1fr) 6.5rem; gap: 0.75rem; }
+  .hf-day-n { font-size: 1.25rem; }
+}
+
+.hf-day-play { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 0.5rem; }
+.hf-day-play:focus-visible { outline: 2px solid var(--hf-brand); outline-offset: 2px; }
diff --git a/docs/docs.json b/docs/docs.json
@@ -56,7 +56,8 @@
             "pages": [
               "introduction",
               "quickstart",
-              "examples"
+              "examples",
+              "faq"
             ]
           },
           {
@@ -82,6 +83,7 @@
               "guides/with-codex",
               "guides/with-cursor",
               "guides/mcp",
+              "guides/free-agents",
               "guides/skills",
               "guides/plugins",
               "guides/design-tools"

diff --git a/docs/faq.mdx b/docs/faq.mdx
@@ -0,0 +1,157 @@
+---
+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
+[what's free and what HeyGen adds](/guides/voice-and-audio#free-or-heygen-quality), and
+[Make videos with a free agent](/guides/free-agents) for an agent that costs nothing.
+
+## 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 [Make videos in Claude.ai or ChatGPT](/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 the browser editor with `npx hyperframes preview`. For WSL
+rendering tips, see [The render is slow under WSL2](/help#the-render-is-slow-under-wsl2).
+
+## What is the difference between the Studio app and the browser editor?
+
+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. The **browser
+editor** 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
+[Edit in the browser editor](/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 vs Remotion](/guides/hyperframes-vs-remotion) and
+[Move from Remotion to HyperFrames](/prompting/remotion-migration).
+
+## 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 a 10,000-track music catalog. Without one, voice uses Kokoro on your
+computer, music is tracks you add (or local generation if you install it), and
+sound effects come from a bundled set.
+See [Add voiceover, music, sound effects 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 to a video with AI](/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](/help) for specific errors, and
+[Share feedback](/help#share-feedback) to report a bug.
diff --git a/docs/guides/free-agents.mdx b/docs/guides/free-agents.mdx
@@ -0,0 +1,54 @@
+---
+title: "Make videos with a free agent"
+sidebarTitle: "Free agents"
+description: "HyperFrames is free; the agent is the only cost. Use OpenCode's free models in the Studio app, or a model on your own computer, and see how open models score."
+---
+
+import { DocsVideo } from "/snippets/docs-video.jsx";
+
+HyperFrames costs nothing. What you pay for is the AI agent that writes the video, and that can be free too.
+
+## Same prompt, paid model and open model
+
+In HeyGen's [Code2Video benchmark](https://www.heygen.com/research/introducing-code2video-benchmark), models wrote
+videos with the HyperFrames skills from 168 briefs and were ranked against each other. The open-weight models
+(Qwen 3.8 Max, DeepSeek V4.1 Flash, Kimi K3, GLM 5.3) all landed within 50 Elo points of first place. The same prompt,
+given to a paid model and to an open one:
+
+<div className="hf-versus">
+  <div>
+    <p><strong>Claude Fable 5</strong></p>
+    <DocsVideo title="Product intro by Claude Fable 5" src="https://dynamic.heygen.ai/www/video/research/code2video/claude-fable-5__Product_Intro_31_ijvIoCty8.mp4" poster="https://dynamic.heygen.ai/www/video/research/code2video/claude-fable-5__Product_Intro_31_ijvIoCty8.mp4/ik-thumbnail.jpg?tr=so-3" />
+  </div>
+  <div>
+    <p><strong>DeepSeek V4 Flash</strong></p>
+    <DocsVideo title="Product intro by DeepSeek V4 Flash" src="https://dynamic.heygen.ai/www/video/research/code2video/deepseek-v4-flash__Product_Intro_31_wJgiSCn0jw.mp4" poster="https://dynamic.heygen.ai/www/video/research/code2video/deepseek-v4-flash__Product_Intro_31_wJgiSCn0jw.mp4/ik-thumbnail.jpg?tr=so-3" />
+  </div>
+</div>
+
+The top models are still better at the hard parts: timing, composition, finish. For a first draft, a social post or
+learning the tool, an open model is often enough.
+
+## In the Studio app: OpenCode
+
+[Connect an agent](/studio-app/connect-your-agent) and choose **OpenCode**. The app installs it, and it runs free
+models with no sign-in. It needs **Full access**, and the app asks to turn it on the first time.
+
+## On your own computer
+
+OpenCode can also use a model running locally, so nothing leaves your machine and nothing is billed. With
+[Ollama](https://ollama.com) running, OpenCode finds its models by itself; pick one that supports tools. See [OpenCode's model docs](https://opencode.ai/v2/docs/models).
+
+Local models are slower and weaker than the hosted ones, so start with short videos.
+
+## What else is free
+
+Rendering, previews, Kokoro voices, background removal and the bundled sound effects run on your computer at no
+cost, and so does transcription when your own agent does it. The Studio app is free with a free HeyGen account. HeyGen's voices, avatars and generated clips use HeyGen credits;
+everything else in a video is code. See [free or HeyGen quality](/guides/voice-and-audio#free-or-heygen-quality).
+
+## Related topics
+
+- [Connect your agent](/studio-app/connect-your-agent)
+- [Use HyperFrames with Claude Code](/guides/with-claude-code)
+- [The Code2Video benchmark on Kaggle](https://www.kaggle.com/benchmarks/heygen/code2video)