diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index eafc2e7301..3ca7a00ea7 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -49,4 +49,6 @@ jobs: - name: Check broken links working-directory: docs - run: npx mint broken-links + # --check-redirects also resolves every redirect destination, so a + # restructure cannot leave a redirect pointing at a page it removed. + run: npx mint broken-links --check-redirects diff --git a/docs/catalog/index.mdx b/docs/catalog/index.mdx new file mode 100644 index 0000000000..7d42c52931 --- /dev/null +++ b/docs/catalog/index.mdx @@ -0,0 +1,62 @@ +--- +title: "Catalog" +description: "Browse reusable HyperFrames scenes, transitions, captions, overlays, effects, and components." +--- + +The Catalog is a library of visuals you can add to a project instead of building each one from scratch. + +Use a **block** when you want a larger scene or self-contained visual. Use a **component** when you want a smaller effect or behavior inside an existing scene. + +## Start with the job + + + + Show code being typed, changed, highlighted, scrolled, or transformed. + + + Keep speech readable or emphasize selected words without designing a caption system from zero. + + + Move between scenes with a quiet cut treatment or a more expressive transition. + + + Show posts, follow prompts, notifications, names, roles, and platform-inspired cards. + + + Explain a number, comparison, trend, location, or geographic movement. + + + Start from a larger scene that already combines design, media, and animation. + + + +## Use an item in a real project + +1. Open an item and watch the motion preview. +2. Check that its communication job matches the scene. +3. Copy the plain-language request from the item page into your agent chat. +4. Replace the example content with real project content. +5. Match the project's type, color, spacing, and motion language. +6. Review the item inside the complete video, not only in isolation. + +The terminal command and source details remain available on each item page for people who need them. + +## Before you keep it + + + A Catalog item is a starting point, not a finished design decision. Keep it only when it makes the scene clearer or faster to understand. Remove decorative motion that competes with the story. + + +Check: + +- Can the viewer understand why the visual is present? +- Is the real content readable at the final size? +- Does its timing fit the scenes around it? +- Does it feel like part of this project rather than a pasted demo? +- Is a quieter alternative more effective? + +## Related topics + +- [Add Catalog items in Studio](/studio/assets-and-blocks) +- [Build richer compositions](/go-further) +- [Contribute a Catalog item](/contributing/catalog) diff --git a/docs/concepts/index.mdx b/docs/concepts/index.mdx new file mode 100644 index 0000000000..ad6650a3f4 --- /dev/null +++ b/docs/concepts/index.mdx @@ -0,0 +1,163 @@ +--- +title: "How a HyperFrames project works" +sidebarTitle: "Project model" +description: "Understand the editable files, compositions, timing, and tools behind a HyperFrames video." +--- + +A HyperFrames project is a folder your agent can create and you can keep +editing. Its HTML is the video: it describes the scenes, timing, motion, media, +and reusable parts that HyperFrames plays or renders. + +## The source is the project + +The agent, Studio, CLI, SDK, and Player do not create separate versions of the +video. They work with the same project files. + +| What you want to change | Best place to start | +| ---------------------------------------------------- | ------------------- | +| Story, structure, or several scenes | Ask the agent | +| Text, layout, timing, or animation you can see | Studio | +| Preview, checks, snapshots, rendering, or automation | CLI | +| A composition inside your own product | SDK or Player | + +
+ + A HyperFrames project open in Studio with the source tree, canvas, controls, and timeline + +
+ +Studio writes supported edits back into the source. An agent can continue from +those files, Git can track them, and the renderer sees the same result. + +## What the agent creates + +A larger project often looks like this: + +```text +project/ +├── BRIEF.md what the video must communicate +├── STORYBOARD.md the planned sequence and review state +├── SCRIPT.md locked narration, when the video has it +├── frame.md visual direction, when the project needs one +├── index.html the main composition +├── hyperframes.json project settings +├── compositions/ scenes and reusable visual parts +├── assets/ images, video, audio, and fonts +└── renders/ finished files +``` + +Only the project source is essential. Planning files exist to preserve decisions +across reviews and agent sessions. A simple title card may need only +`index.html` and an asset; a narrated launch film benefits from a brief, +storyboard, script, and separate scenes. + +## Compositions hold the video together + +A **composition** is a finite, seekable piece of the project. The main +composition is the complete sequence. Other compositions can be scenes, +captions, title systems, or visuals reused more than once. + +```text +Main video +├── Opening +├── Product demo +├── Customer proof +└── Closing +``` + +Each part is still HTML. A larger project stays manageable because a scene can +be built and checked on its own, then placed on the main timeline. + +```html +
+``` + +Edit the nested composition when the scene itself should change everywhere it +is used. Edit its placement in the main composition when only this appearance +should start earlier, run longer, or move to another layer. + +## Time is part of the source + +Timed elements carry their start, duration, and track in HTML: + +```html + +``` + +This image starts at two seconds, remains for three seconds, and appears on +track one. Animation timelines are paused and seekable, so Studio, the Player, +and the renderer can request an exact moment without playing from the +beginning. + +## Variables keep approved parts changeable + +A variable exposes something that is meant to change—such as a title, logo, +color, price, or customer name—without rebuilding the layout. One composition +can produce several approved versions while preserving its design and motion. + +Use a variable when the structure should stay fixed. Use a normal edit when the +structure itself needs to change. + +## How a project moves forward + +There is no required seven-step ceremony. The project records only the +decisions its size and review process need. + +| Decision | Where it usually lives | +| ------------------------------ | ----------------------------------------------------------- | +| What the video is for | Your request and, for a fuller project, `BRIEF.md` | +| What happens and in what order | `STORYBOARD.md` and optional `SCRIPT.md` | +| How it looks | `frame.md`, project assets, and the compositions themselves | +| The editable result | `index.html`, `compositions/`, and `assets/` | +| The approved delivery | checks plus the file in `renders/` | + +Review the message and sequence before polishing individual frames. Once the +project looks right, run the checks, render it, and watch the exported file. + +## Why rendering can repeat the same moment + +HyperFrames seeks the composition to an exact time, captures the frame, and +advances. Media and audio follow the same timeline. + +For the same source, media, and settings, an exact timestamp should resolve to +the same project state. Compositions therefore avoid the current clock, +unseeded randomness, and render-time network requests. + +## Go deeper when you need it + + + + Expose approved content without opening the layout. + + + Review, check, render, watch, and deliver the same project. + + + Use nested compositions and exact source attributes. + + + Look up the complete technical composition contract. + + + +## Related topics + +- [Take more control of an existing project](/go-further) +- [Look up the complete HTML schema](/reference/html-schema) +- [Choose a developer integration surface](/developers/overview) diff --git a/docs/deploy/overview.mdx b/docs/deploy/overview.mdx new file mode 100644 index 0000000000..55e6aa0959 --- /dev/null +++ b/docs/deploy/overview.mdx @@ -0,0 +1,99 @@ +--- +title: "Choose a rendering path" +sidebarTitle: "Rendering overview" +description: "Choose the smallest HyperFrames rendering surface for local work, an application backend, managed cloud, or infrastructure you operate." +--- + +Every rendering path starts with the same HyperFrames project. The difference is +who operates Chrome and FFmpeg, how the request is submitted, and how much of the +pipeline your application needs to control. + +| Need | Start with | You operate | +| --- | --- | --- | +| Render while creating or in CI | **CLI** | The machine running the command | +| Render from a Node application | **Producer** | The Node service and its runtime | +| Control exact frame capture | **Engine** | Capture, encoding, and orchestration | +| Submit a render without managing infrastructure | **HyperFrames Cloud** | Nothing beyond the request and result | +| Run distributed renders in your AWS account | **AWS Lambda** | The deployed AWS stack | +| Run distributed renders in your Google Cloud account | **Cloud Run** | The deployed GCP resources | +| Deploy a preview and render API from a template | **Hosted templates** | The selected hosting account | + +## Local or CI: use the CLI + +The CLI owns the complete normal pipeline: project loading, checks, browser +capture, audio mixing, and encoding. + +```bash +npx hyperframes check +npx hyperframes render --output video.mp4 +``` + +Start here unless an application—not a person or CI job—must initiate the +render. See [Rendering](/guides/rendering) for the normal workflow and the +[complete CLI reference](/packages/cli) for automation flags. + +## A Node application: use Producer + +`@hyperframes/producer` is the complete programmable render pipeline. It is the +right layer for a backend that needs to provide project input, receive progress, +cancel work, or control encoding without spawning the CLI. + +```ts +import { createRenderJob, executeRenderJob } from "@hyperframes/producer"; + +const job = createRenderJob({ fps: 30, quality: "standard" }); +await executeRenderJob(job, "./project", "./video.mp4"); +``` + +Use [Producer](/packages/producer) for its current configuration and exported +API. Use Engine only when Producer performs work your application must replace. + +## Exact frame capture: use Engine + +`@hyperframes/engine` opens a seekable composition and captures exact frames. +It does not replace the complete Producer pipeline. + +Use it when building specialized capture, inspection, or rendering +infrastructure. For an ordinary encoded video, stay with CLI or Producer. See +[Engine](/packages/engine). + +## No infrastructure: use HyperFrames Cloud + +Managed cloud rendering accepts a project, runs the render, and returns the +finished file without requiring local Chrome or FFmpeg. + +```bash +npx hyperframes cloud render ./project --output video.mp4 +``` + +Authentication, variables, webhooks, and job management are covered in +[Cloud rendering](/deploy/cloud). + +## Infrastructure you control + +Use [AWS Lambda](/deploy/aws-lambda) or [Google Cloud Run](/deploy/gcp-cloud-run) +when renders must run inside your own cloud account. Both paths distribute work +across workers and store intermediate and final media in the corresponding +cloud storage. + +Use the [hosted templates](/guides/deploy) when the desired result is a small +preview application plus a render API on Vercel, Cloudflare, or Modal—not a +general distributed-rendering platform. + +## The decision + +Choose the highest-level surface that completes the job: + +```text +CLI → Producer → Engine +``` + +Moving right gives an application more control and more pipeline responsibility. +Managed Cloud, AWS Lambda, Cloud Run, and hosted templates decide where that +pipeline runs. + +## Related topics + +- [Render with the CLI](/guides/rendering) +- [Render with HyperFrames Cloud](/deploy/cloud) +- [Use Producer from a Node application](/packages/producer) diff --git a/docs/developers/cli.mdx b/docs/developers/cli.mdx new file mode 100644 index 0000000000..9c9a4957a9 --- /dev/null +++ b/docs/developers/cli.mdx @@ -0,0 +1,62 @@ +--- +title: "CLI guide" +description: "Find the HyperFrames command for creating, checking, rendering, publishing, and automating projects." +--- + +Use this page to choose a command. The [CLI reference](/packages/cli) contains +detailed flags, examples, and environment settings. The installed version +remains authoritative: run `npx hyperframes --help`. + +## Everyday project loop + +| Task | Command | +| --- | --- | +| Create a project | `npx hyperframes init my-video` | +| Open Studio | `npx hyperframes preview` | +| Check HTML structure | `npx hyperframes lint` | +| Run browser, layout, motion, and contrast checks | `npx hyperframes check` | +| Capture review frames | `npx hyperframes snapshot --at 0,2,5` | +| Render a video | `npx hyperframes render --output output.mp4` | +| Publish a browser link | `npx hyperframes publish` | +| Diagnose the machine | `npx hyperframes doctor` | + +## Work with media + +| Task | Command | +| --- | --- | +| Inspect project metadata | `npx hyperframes info` | +| Transcribe speech | `npx hyperframes transcribe ` | +| Generate narration | `npx hyperframes tts + + +``` + +Use its JavaScript API to play, pause, seek, change playback rate, and listen for timeline events. It does not edit or render the composition. + +See the [Player reference](/packages/player). + +## Rendering: choose the layer you need + +- **CLI** — complete local and automated rendering. +- **Producer** — the Node rendering pipeline: capture, encode, and audio mix. +- **Engine** — lower-level seekable page capture and exact-frame control. +- **Managed cloud** — hosted rendering without operating Chrome or FFmpeg. +- **AWS Lambda or Google Cloud Run** — infrastructure you deploy and control. + +Most applications should begin with the CLI or Producer. Reach for Engine only when building a specialized capture or rendering system. + +Use [rendering infrastructure](/deploy/overview) to compare hosted, local, and self-managed paths. + +## The complete mental model + +```text +composition → inspect or edit → play or render +``` + +Every surface works on the same source. Choose the smallest layer that produces the result your application needs, then move lower only when the higher-level layer removes control you genuinely require. + +## Related topics + +- [Run complete projects from the CLI](/developers/cli) +- [Edit composition HTML with the SDK](/sdk/quickstart) +- [Embed a composition with the Player](/packages/player) diff --git a/docs/docs.json b/docs/docs.json index a2946fa6f9..5f1d944fee 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -1,11 +1,11 @@ { "$schema": "https://mintlify.com/docs.json", "name": "HyperFrames", - "theme": "maple", + "theme": "aspen", "colors": { - "primary": "#0a0a0a", - "light": "#f6f5f1", - "dark": "#0a0a0a" + "primary": "#16785B", + "light": "#3CE6AC", + "dark": "#16785B" }, "background": { "color": { @@ -20,11 +20,12 @@ } }, "appearance": { - "default": "light" + "default": "system" }, "logo": { "light": "/logo/light.svg", - "dark": "/logo/dark.svg" + "dark": "/logo/dark.svg", + "href": "https://hyperframes.heygen.com/introduction" }, "favicon": "/favicon.svg", "contextual": { @@ -47,28 +48,39 @@ "navigation": { "tabs": [ { - "tab": "Documentation", + "tab": "Guides", + "icon": "book-open", "groups": [ { - "group": "Getting Started", + "group": "Start here", "pages": [ "introduction", - "changelog", - "weekly-updates", "quickstart", - "showcase", + "go-further", + "developers/index" + ] + }, + { + "group": "Explore", + "pages": [ "examples", - "launch-videos" + "product-updates", + "weekly-updates", + "changelog" ] }, { - "group": "Concepts", + "group": "30 Days of HyperFrames", "pages": [ - "concepts/compositions", - "concepts/data-attributes", - "concepts/variables", - "concepts/frame-adapters", - "concepts/determinism" + "thirty-days" + ] + }, + { + "group": "Choose where to create", + "pages": [ + "guides/choose-creation-path", + "guides/mcp", + "guides/design-tools" ] }, { @@ -150,53 +162,97 @@ ] }, { - "group": "Guides", + "group": "Workflows", "pages": [ - "guides/pipeline", - "guides/skills", - "guides/authentication", + "workflows", + "guides/product-launch-video", + "guides/faceless-explainer", + "guides/pr-to-video", + "guides/captions-and-recuts", + "guides/motion-graphics", + "guides/music-to-video", + "guides/slideshow", + "guides/general-video", + "guides/export-and-share" + ] + }, + { + "group": "Build the project", + "pages": [ + "concepts/index", + "guides/media", "guides/video-components", - "guides/color-grading", - "guides/media-effects", - "guides/media-overlays", - "guides/html-in-canvas", - "guides/website-to-video", - "guides/figma", - "guides/antigravity", - "guides/copilot-cli", - "guides/claude-design", - "guides/open-design", - "guides/hyperframes-vs-remotion", - "guides/gsap-animation", - "guides/keyframes", - "guides/rendering", + "guides/avatar-presenter", + "guides/voice-and-audio", "guides/remove-background", - "guides/hdr", - "guides/4k-rendering", - "guides/performance", - "guides/timeline-editing", - "guides/video-editor-cheatsheet", - "guides/common-mistakes", + "guides/color-grading", + "guides/media-effects" + ] + }, + { + "group": "Help", + "pages": [ + "help", "guides/troubleshooting", "guides/feedback" ] + } + ] + }, + { + "tab": "Studio", + "icon": "palette", + "groups": [ + { + "group": "Start in Studio", + "pages": [ + "studio/index", + "studio/storyboard" + ] }, { - "group": "Deploy", + "group": "Edit", "pages": [ - "deploy/cloud", - "guides/deploy", - "deploy/aws-lambda", - "deploy/gcp-cloud-run", - "deploy/templates-on-lambda", - "deploy/migrating-to-hyperframes-lambda" + "studio/canvas", + "studio/timeline", + "studio/animation", + "studio/captions" + ] + }, + { + "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" ] } ] }, { "tab": "Catalog", + "icon": "grid-2", "groups": [ + { + "group": "Overview", + "pages": [ + "catalog/index" + ] + }, { "group": "Code Animations", "pages": [ @@ -233,7 +289,7 @@ ] }, { - "group": "HTML-in-Canvas", + "group": "Interface & VFX", "pages": [ "catalog/blocks/ios26-liquid-glass", "catalog/blocks/liquid-glass-context-menu", @@ -283,7 +339,7 @@ ] }, { - "group": "Shader Transitions", + "group": "Transitions", "pages": [ "catalog/blocks/chromatic-radial-split", "catalog/blocks/cinematic-zoom", @@ -298,12 +354,7 @@ "catalog/blocks/sdf-iris", "catalog/blocks/swirl-vortex", "catalog/blocks/thermal-distortion", - "catalog/blocks/whip-pan" - ] - }, - { - "group": "CSS Transitions", - "pages": [ + "catalog/blocks/whip-pan", "catalog/blocks/beat-freeze-cut", "catalog/blocks/hw-scribble-transition", "catalog/blocks/mk-clone-wall-transition", @@ -324,11 +375,8 @@ ] }, { - "group": "Showcases", + "group": "Code Themes", "pages": [ - "catalog/blocks/app-showcase", - "catalog/blocks/apple-money-count", - "catalog/blocks/blue-sweater-intro-video", "catalog/blocks/code-snippet-apple-terminal-basic", "catalog/blocks/code-snippet-apple-terminal-clear-dark", "catalog/blocks/code-snippet-apple-terminal-clear-light", @@ -352,7 +400,15 @@ "catalog/blocks/code-snippet-monokai", "catalog/blocks/code-snippet-solarized-light", "catalog/blocks/code-snippet-visual-studio-dark", - "catalog/blocks/code-snippet-visual-studio-light", + "catalog/blocks/code-snippet-visual-studio-light" + ] + }, + { + "group": "Complete Scenes", + "pages": [ + "catalog/blocks/app-showcase", + "catalog/blocks/apple-money-count", + "catalog/blocks/blue-sweater-intro-video", "catalog/blocks/north-korea-locked-down", "catalog/blocks/nyc-paris-flight", "catalog/blocks/ui-3d-reveal", @@ -360,10 +416,16 @@ ] }, { - "group": "Data", + "group": "Data & Diagrams", "pages": [ "catalog/blocks/data-chart", + "catalog/blocks/flowchart", + "catalog/blocks/flowchart-vertical", + "catalog/blocks/hw-pipeline", + "catalog/blocks/hw-text-cloud", "catalog/blocks/mk-line-graph", + "catalog/blocks/mk-progress-stat", + "catalog/blocks/mk-specs-list", "catalog/blocks/spain-map", "catalog/blocks/us-map", "catalog/blocks/us-map-bubble", @@ -373,7 +435,7 @@ ] }, { - "group": "Effects", + "group": "Effects & Annotations", "pages": [ "catalog/components/caption-blend-difference", "catalog/components/grain-overlay", @@ -399,21 +461,15 @@ ] }, { - "group": "Blocks", + "group": "Titles & Layouts", "pages": [ "catalog/blocks/camcorder-hud", - "catalog/blocks/flowchart", - "catalog/blocks/flowchart-vertical", "catalog/blocks/hw-frame", "catalog/blocks/hw-path-text", - "catalog/blocks/hw-pipeline", - "catalog/blocks/hw-text-cloud", "catalog/blocks/hw-title", "catalog/blocks/logo-outro", "catalog/blocks/mk-background", "catalog/blocks/mk-placeholder-grid", - "catalog/blocks/mk-progress-stat", - "catalog/blocks/mk-specs-list", "catalog/blocks/yt-lcd-background", "catalog/blocks/yt-logo-intro", "catalog/blocks/yt-prism-title", @@ -423,41 +479,27 @@ ] }, { - "tab": "Packages", + "tab": "Developers", + "icon": "code", "groups": [ { - "group": "Packages", + "group": "Start here", "pages": [ - "packages/core", - "packages/parsers", - "packages/lint", - "packages/studio-server", - "packages/sdk", - "packages/engine", - "packages/player", - "packages/producer", - "packages/shader-transitions", - "packages/aws-lambda", - "packages/gcp-cloud-run", - "packages/studio", - "packages/cli" + "developers/overview" ] - } - ] - }, - { - "tab": "SDK", - "groups": [ + }, { - "group": "Overview", + "group": "Command line", "pages": [ - "sdk/overview", - "sdk/quickstart" + "developers/cli", + "packages/cli", + "packages/lint" ] }, { - "group": "Guides", + "group": "SDK guides", "pages": [ + "sdk/quickstart", "sdk/guides/querying-and-editing", "sdk/guides/timing-and-animation", "sdk/guides/undo-redo-and-patches", @@ -468,7 +510,7 @@ ] }, { - "group": "Reference", + "group": "SDK reference", "pages": [ "sdk/reference/open-composition", "sdk/reference/composition", @@ -477,20 +519,79 @@ "sdk/reference/adapters", "sdk/reference/utilities" ] - } - ] - }, - { - "tab": "Reference", - "groups": [ + }, { - "group": "Reference", + "group": "Composition, design & animation", + "pages": [ + "concepts/compositions", + "concepts/variables", + "concepts/data-attributes", + "guides/gsap-animation", + "concepts/frame-adapters", + "concepts/determinism", + "guides/html-in-canvas", + "guides/hyperframes-vs-remotion", + "guides/figma" + ] + }, + { + "group": "Composition reference", + "pages": [ + "reference/html-schema", + "reference/color-grading" + ] + }, + { + "group": "Rendering paths", + "pages": [ + "guides/rendering", + "deploy/overview", + "deploy/cloud", + "guides/deploy" + ] + }, + { + "group": "Cloud infrastructure", "pages": [ - "reference/html-schema" + "deploy/aws-lambda", + "deploy/gcp-cloud-run", + "deploy/templates-on-lambda", + "deploy/migrating-to-hyperframes-lambda", + "packages/aws-lambda", + "packages/gcp-cloud-run" ] }, { - "group": "Contributing", + "group": "Advanced rendering", + "pages": [ + "guides/4k-rendering", + "guides/hdr", + "guides/performance" + ] + }, + { + "group": "Packages", + "pages": [ + "packages/core", + "packages/parsers", + "packages/studio-server", + "packages/sdk", + "packages/engine", + "packages/player", + "packages/producer", + "packages/shader-transitions", + "packages/studio" + ] + }, + { + "group": "Agent setup", + "pages": [ + "guides/authentication", + "guides/skills" + ] + }, + { + "group": "Contributing & community", "pages": [ "contributing", "contributing/catalog", @@ -498,12 +599,6 @@ "contributing/changelog-process", "contributing/testing-local-changes", "contributing/canary-rollouts", - "contributing/studio-manual-dom-editing" - ] - }, - { - "group": "Community", - "pages": [ "community/adopters" ] } @@ -513,14 +608,206 @@ }, "footer": { "socials": { - "github": "https://github.com/heygen-com/hyperframes" + "github": "https://github.com/heygen-com/hyperframes", + "x": "https://x.com/HeyGen", + "instagram": "https://www.instagram.com/heygen_official/" + }, + "links": [ + { + "header": "Explore", + "items": [ + { + "label": "Introduction", + "href": "/introduction" + }, + { + "label": "Make your first video", + "href": "/quickstart" + }, + { + "label": "Examples", + "href": "/examples" + } + ] + }, + { + "header": "Build", + "items": [ + { + "label": "Studio", + "href": "/studio" + }, + { + "label": "Catalog", + "href": "/catalog" + }, + { + "label": "Developers", + "href": "/developers/overview" + } + ] + }, + { + "header": "Resources", + "items": [ + { + "label": "Product updates", + "href": "/product-updates" + }, + { + "label": "Playground", + "href": "https://www.hyperframes.dev/" + }, + { + "label": "GitHub", + "href": "https://github.com/heygen-com/hyperframes" + } + ] + } + ] + }, + "navbar": { + "links": [ + { + "type": "github", + "href": "https://github.com/heygen-com/hyperframes" + } + ], + "primary": { + "type": "button", + "label": "Playground", + "href": "https://www.hyperframes.dev/" } }, "redirects": [ + { + "source": "/guides", + "destination": "/introduction" + }, + { + "source": "/showcase", + "destination": "/examples" + }, + { + "source": "/launch-videos", + "destination": "/examples" + }, + { + "source": "/guides/claude-design", + "destination": "/guides/design-tools" + }, + { + "source": "/guides/open-design", + "destination": "/guides/design-tools" + }, + { + "source": "/guides/common-mistakes", + "destination": "/guides/troubleshooting" + }, + { + "source": "/guides/create-with-agent", + "destination": "/workflows" + }, + { + "source": "/guides/choose-your-path", + "destination": "/workflows" + }, + { + "source": "/guides/help", + "destination": "/help" + }, + { + "source": "/guides/project-tour", + "destination": "/concepts" + }, + { + "source": "/guides/media-overlays", + "destination": "/catalog" + }, + { + "source": "/guides/common-questions", + "destination": "/help" + }, + { + "source": "/contributing/studio-manual-dom-editing", + "destination": "/studio/canvas" + }, + { + "source": "/guides/video-editor-cheatsheet", + "destination": "/studio/shortcuts" + }, + { + "source": "/guides/timeline-editing", + "destination": "/studio/timeline" + }, + { + "source": "/guides/website-to-video", + "destination": "/guides/product-launch-video" + }, { "source": "/guides/prompting", "destination": "/prompting/overview", "permanent": true + }, + { + "source": "/guides/pipeline", + "destination": "/workflows", + "permanent": true + }, + { + "source": "/guides/quality-checklist", + "destination": "/guides/export-and-share", + "permanent": true + }, + { + "source": "/guides/publish-and-share", + "destination": "/guides/export-and-share", + "permanent": true + }, + { + "source": "/guides/antigravity", + "destination": "/guides/skills", + "permanent": true + }, + { + "source": "/guides/copilot-cli", + "destination": "/guides/skills", + "permanent": true + }, + { + "source": "/studio/tour", + "destination": "/studio", + "permanent": true + }, + { + "source": "/studio/layers", + "destination": "/studio/canvas", + "permanent": true + }, + { + "source": "/studio/design", + "destination": "/studio/canvas", + "permanent": true + }, + { + "source": "/guides/keyframes", + "destination": "/studio/animation", + "permanent": true + }, + { + "source": "/studio/lint-and-agent", + "destination": "/studio/source", + "permanent": true + }, + { + "source": "/guides/transcribe-and-caption", + "destination": "/guides/voice-and-audio", + "permanent": true + }, + { + "source": "/sdk/overview", + "destination": "/sdk/quickstart", + "permanent": true } ] } diff --git a/docs/go-further.mdx b/docs/go-further.mdx new file mode 100644 index 0000000000..e74504bed5 --- /dev/null +++ b/docs/go-further.mdx @@ -0,0 +1,40 @@ +--- +title: "Go further with HyperFrames" +sidebarTitle: "Go further" +description: "Take more control of an existing project through your agent, Studio, richer composition tools, and a reliable finish." +--- + +import { AdvancedPathGrid } from "/snippets/advanced-path-grid.jsx"; +import { DocsVideo } from "/snippets/docs-video.jsx"; + +
+ +
+ +The project does not change format as you gain control. Your agent, Studio, the +SDK, the Player, and the renderer all work from the same HTML project. + +The [Reference Project](https://github.com/heygen-com/hyperframes/tree/main/examples/docs-reference-project) +continues the first-video example. Its first version is a real page capture on a +10-second timeline. The revised version keeps that source and adds editable +variables, narration, fixed captions, music, and sound. + +## Choose by the size of the change + +Use the agent for changes to the story or several scenes. Use Studio for the +specific visual or timing detail you can point at. + + + +For reusable content and nested structure, continue with [Variables](/concepts/variables) and +[Compositions](/concepts/compositions). + +## Related topics + +- [Edit the project visually in Studio](/studio) +- [Understand how a HyperFrames project works](/concepts) +- [Build on HyperFrames as a developer](/developers) diff --git a/docs/guides/antigravity.mdx b/docs/guides/antigravity.mdx deleted file mode 100644 index 8836b1d133..0000000000 --- a/docs/guides/antigravity.mdx +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Google Antigravity -description: "Set up HyperFrames in Google Antigravity — install skills, author compositions, and render video from the agent-first IDE." ---- - -Google Antigravity is Google's agent-first IDE built on VS Code. Its agent discovers and loads HyperFrames skills automatically based on your prompts, so you get correct compositions without memorizing framework internals. - -## Install skills - -Install the HyperFrames skill package into your project: - -```bash -npx skills add heygen-com/hyperframes -``` - -This places skill directories inside `.agents/skills/` at your workspace root — the location Antigravity scans for workspace-scoped skills. - - - If you want the skills available across all your Antigravity projects, install them to the global scope instead: - - ```bash - npx skills add heygen-com/hyperframes --agent antigravity --global - ``` - - Global skills live in `~/.gemini/antigravity/skills/` and load in every workspace. - - -Verify the skills are installed: - -```bash -ls .agents/skills/ -``` - -You should see directories like `hyperframes/` (the entry skill), `hyperframes-core/`, `hyperframes-animation/`, `hyperframes-cli/`, and others — each containing a `SKILL.md` that the agent reads on demand. - -## How skills work in Antigravity - -Antigravity uses **semantic matching** — when you type a prompt, the agent compares it against the `description` field of every available skill and loads the ones that are relevant. You don't need to invoke skills with a slash command (though you can reference them by name for precision). - -| You say | Agent loads | -|---|---| -| "Create a 10-second product intro with captions" | `hyperframes`, `hyperframes-core` | -| "Add a GSAP scale-pop to the title" | `hyperframes-animation` | -| "Use Tailwind for styling" | `hyperframes-core` | -| "Transcribe this audio and add captions" | `media-use` | -| "Add a shimmer sweep transition" | `hyperframes-registry` | - -The skill is only injected into the agent's context window when it matches — this keeps the context clean and focused. - - - For the best results, mention "HyperFrames" or "composition" in your prompt so the agent matches the right skills immediately instead of guessing at generic web-video conventions. - - -## Create and preview a video - - - - Open Antigravity's integrated terminal and run: - - ```bash - npx hyperframes init my-video - cd my-video - ``` - - The wizard walks you through example selection and media import. Skills are installed automatically inside the new project. - - - - ```bash - npx hyperframes preview - ``` - - This launches the HyperFrames Studio in your browser with hot reload — edits to `index.html` appear instantly. - - - - In Antigravity's agent sidebar, describe the video you want: - - > Create a 15-second dark-themed product intro for my SaaS app with a fade-in title, hype-style captions, and a flash transition to the CTA. - - The agent reads the HyperFrames skill, writes valid HTML with `data-*` attributes and GSAP timelines, and saves it to your project files. The preview updates automatically. - - - - Talk to the agent like a video editor — don't re-prompt from scratch: - - > Make the title 2x bigger and swap the transition to a whip pan. - - > Add a lower third at 0:03 with my name. - - > Replace the background with assets/hero.mp4. - - - - ```bash - npx hyperframes render --output output.mp4 - ``` - - - -## Using multiple agents in Manager view - -Antigravity's [Manager view](https://antigravity.google/docs/agent) lets you orchestrate multiple agents in parallel. For complex multi-scene videos, you can split the work: - -- **Agent 1:** Author the intro scene and transitions -- **Agent 2:** Generate TTS narration and caption timing -- **Agent 3:** Build the data visualization scene - -Each agent picks up the relevant HyperFrames skills independently. Merge the output into a single `index.html` with `data-composition-src` references when all agents finish. - -## MCP alternative - -If you prefer zero-install cloud authoring, Antigravity supports remote MCP servers. Add the HyperFrames MCP connector to author and render compositions without the CLI — see [Antigravity's MCP documentation](https://antigravity.google/docs/mcp) for the exact setup steps in your version, then use the server URL: - -``` -https://mcp.heygen.com/mcp/hyperframes -``` - -Authorize via OAuth with your HeyGen account when prompted. See the [HyperFrames MCP guide](/guides/mcp) for full details on tools and prompting. The MCP handles rendering in the cloud; the CLI gives you local control. - -## Agent instruction files - -HyperFrames projects created with `npx hyperframes init` scaffold both `CLAUDE.md` and `AGENTS.md` automatically — these give the agent additional composition context beyond what the skills provide. - -- **`AGENTS.md`** — the cross-agent convention. Antigravity reads this regardless of which model you've selected (Gemini, Claude, or others). -- **`CLAUDE.md`** — read when Antigravity's agent uses a Claude model (Sonnet or Opus), providing Claude-specific project instructions. - -## Tips - -- **Mention the skill by name when precision matters.** "Using the hyperframes skill, add a grain overlay" is more reliable than "add a grain overlay" when the agent has many skills loaded. -- **Use `npx hyperframes lint` before rendering.** The linter catches structural issues (missing `class="clip"`, unregistered timelines, muted video violations) that the agent might miss on complex edits. -- **Install registry blocks for advanced effects.** Run `npx hyperframes add shimmer-sweep` to install pre-built blocks, then ask the agent to wire them into your composition. -- **Keep the preview server running.** Antigravity's file watcher + HyperFrames' hot reload means you see every agent edit in real time. - -## Next steps - - - - Vocabulary and patterns that produce better compositions. - - - 50+ ready-to-use blocks the agent can install and wire. - - - Motion principles and timeline authoring. - - - The 7-step structure agents follow for multi-beat videos. - - diff --git a/docs/guides/avatar-presenter.mdx b/docs/guides/avatar-presenter.mdx new file mode 100644 index 0000000000..8018336634 --- /dev/null +++ b/docs/guides/avatar-presenter.mdx @@ -0,0 +1,96 @@ +--- +title: "Add an avatar presenter" +sidebarTitle: "Avatar presenter" +description: "Create or reuse a presenter clip, keep it as project media, and combine it with editable HyperFrames scenes." +--- + +import { DocsVideo } from "/snippets/docs-video.jsx"; + +Use an avatar when a person should speak on screen. Use HyperFrames for the +parts around that person: layouts, product scenes, captions, graphics, timing, +music, and the final composition. + + + + + +## Choose the right path + +**The presenter is the whole video.** Use HeyGen Video Agent or an avatar-video +workflow. The result is a rendered HeyGen video, not an editable HyperFrames +composition. + +**The presenter is one part of a designed video.** Generate the presenter clip, +keep it as a local project asset, then compose the rest in HyperFrames. This is +the path below. + +**You already recorded a person.** Skip avatar generation. Bring the footage +into the project and choose [captions, designed overlays, or a real recut](/guides/captions-and-recuts). + +## Ask for the complete result + +Tell the agent what the presenter contributes and what remains editable: + +```text +Using /hyperframes, make a 20-second product update. +Use a generated presenter only for the opening sentence. +Build the product scenes, captions, and ending in HyperFrames. +Keep the presenter clip as a local project asset. +``` + +The agent may ask you to sign in to HeyGen before it generates the clip. Check +the active account first: + +```bash +npx hyperframes auth status +``` + +Run `npx hyperframes auth login` if no account is active. Avatar generation can +use the allowance or credits attached to that account; confirm the account and +usage before starting a long or repeated run. + +## Build around the clip + +Once the presenter video exists: + +1. Keep the original file inside the project. +2. Place and trim it like any other video clip. +3. Transcribe the real speech before styling captions. +4. Add product scenes or graphics only where they support what is being said. +5. Render and watch the complete file with sound. + +Use **Assets → Import media** in Studio, or ask the agent to add the generated +file. If the presenter must sit over a designed background, create a transparent +version locally: + +```bash +npx hyperframes remove-background assets/presenter.mp4 \ + -o assets/presenter-transparent.webm +``` + +Background removal is optional. Keep the original background when it already +belongs in the shot or when difficult hair, hands, or motion produce a weak +matte. + +## Check the result + +- The presenter says the approved words with the intended voice. +- Captions match the actual audio, including names and numbers. +- The person does not cover the product or another important visual. +- Music stays below speech. +- Generated and source media are stored locally rather than fetched during render. +- The final file has been watched once from beginning to end. + +For manual avatar, voice, and image-to-video controls, use the current +[HeyGen CLI guide](https://developers.heygen.com/cli) and +[Create Video reference](https://developers.heygen.com/reference/create-video). + +## Related topics + +- [Work with captions and talking-head footage](/guides/captions-and-recuts) +- [Work with all project media](/guides/media) +- [Remove the presenter's background](/guides/remove-background) diff --git a/docs/guides/captions-and-recuts.mdx b/docs/guides/captions-and-recuts.mdx new file mode 100644 index 0000000000..1879970a46 --- /dev/null +++ b/docs/guides/captions-and-recuts.mdx @@ -0,0 +1,70 @@ +--- +title: "Add captions or repackage talking-head footage" +sidebarTitle: "Captions and talking head" +description: "Add captions, add designed overlays, or change the spoken edit." +--- + + +