From 652b129348cd9f21b6589eb98769787e767e6255 Mon Sep 17 00:00:00 2001 From: ukimsanov Date: Tue, 20 Oct 2026 03:26:27 -0400 Subject: [PATCH] docs: reorganize navigation into start, make and studio tabs Split the Guides tab into Start, Make and Prompt guide tabs, and merge the two Studio tabs into one with app and browser groups. No file moves and no URL changes: all 608 pages stay in the nav. Add six pages for the top docs-assistant questions: Is HyperFrames free?, Make videos with Claude Code, Codex and Cursor, Remotion alternatives, and a FAQ. Co-Authored-By: Claude Opus 5.5 --- docs/docs.json | 272 +++++++++++++----------- docs/faq.mdx | 155 ++++++++++++++ docs/guides/hyperframes-vs-remotion.mdx | 1 + docs/guides/is-hyperframes-free.mdx | 60 ++++++ docs/guides/remotion-alternatives.mdx | 51 +++++ docs/guides/with-claude-code.mdx | 110 ++++++++++ docs/guides/with-codex.mdx | 97 +++++++++ docs/guides/with-cursor.mdx | 99 +++++++++ docs/quickstart.mdx | 2 +- 9 files changed, 716 insertions(+), 131 deletions(-) create mode 100644 docs/faq.mdx create mode 100644 docs/guides/is-hyperframes-free.mdx create mode 100644 docs/guides/remotion-alternatives.mdx create mode 100644 docs/guides/with-claude-code.mdx create mode 100644 docs/guides/with-codex.mdx create mode 100644 docs/guides/with-cursor.mdx 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