From 6fe5b4f82a2ee108f7bb7279f4848e61e2c3b26e Mon Sep 17 00:00:00 2001 From: ukimsanov Date: Mon, 3 Aug 2026 16:40:22 -0700 Subject: [PATCH] docs: add the Studio section, workflow guides, and section hubs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds the pages the rebuilt navigation is organised around, and moves the sidebar onto that structure. Every entry points at a file that exists after this commit; nothing is rewritten or removed yet, and no redirect is claimed yet. - Studio (13 pages) — the editor had no section of its own - One guide per creation workflow, matching the shipped agent skills - Section hubs: Concepts, Catalog, Developers, Deploy, Workflows, Help, Go further, Product updates, 30 Days of HyperFrames Pages a later commit retires drop out of the sidebar here but still exist and still resolve, so the site stays navigable at this commit. Incidentally fixes a link to /concepts from the Lambda migration guide that is broken on main today — the destination did not exist. --- docs/catalog/index.mdx | 62 ++++ docs/concepts/index.mdx | 163 +++++++++++ docs/deploy/overview.mdx | 99 +++++++ docs/developers/cli.mdx | 62 ++++ docs/developers/index.mdx | 93 ++++++ docs/developers/overview.mdx | 135 +++++++++ docs/docs.json | 404 +++++++++++++++++++-------- docs/go-further.mdx | 40 +++ docs/guides/avatar-presenter.mdx | 96 +++++++ docs/guides/captions-and-recuts.mdx | 70 +++++ docs/guides/choose-creation-path.mdx | 70 +++++ docs/guides/design-tools.mdx | 81 ++++++ docs/guides/export-and-share.mdx | 153 ++++++++++ docs/guides/faceless-explainer.mdx | 73 +++++ docs/guides/general-video.mdx | 73 +++++ docs/guides/media.mdx | 81 ++++++ docs/guides/motion-graphics.mdx | 68 +++++ docs/guides/music-to-video.mdx | 68 +++++ docs/guides/pr-to-video.mdx | 72 +++++ docs/guides/product-launch-video.mdx | 82 ++++++ docs/guides/slideshow.mdx | 80 ++++++ docs/guides/voice-and-audio.mdx | 127 +++++++++ docs/help.mdx | 133 +++++++++ docs/product-updates.mdx | 53 ++++ docs/reference/color-grading.mdx | 113 ++++++++ docs/studio/animation.mdx | 152 ++++++++++ docs/studio/assets-and-blocks.mdx | 63 +++++ docs/studio/canvas.mdx | 133 +++++++++ docs/studio/captions.mdx | 54 ++++ docs/studio/export.mdx | 55 ++++ docs/studio/index.mdx | 168 +++++++++++ docs/studio/shortcuts.mdx | 78 ++++++ docs/studio/slideshows.mdx | 64 +++++ docs/studio/source.mdx | 121 ++++++++ docs/studio/storyboard.mdx | 65 +++++ docs/studio/timeline.mdx | 72 +++++ docs/studio/troubleshooting.mdx | 60 ++++ docs/studio/variables.mdx | 64 +++++ docs/thirty-days.mdx | 52 ++++ docs/workflows.mdx | 19 ++ 40 files changed, 3650 insertions(+), 121 deletions(-) create mode 100644 docs/catalog/index.mdx create mode 100644 docs/concepts/index.mdx create mode 100644 docs/deploy/overview.mdx create mode 100644 docs/developers/cli.mdx create mode 100644 docs/developers/index.mdx create mode 100644 docs/developers/overview.mdx create mode 100644 docs/go-further.mdx create mode 100644 docs/guides/avatar-presenter.mdx create mode 100644 docs/guides/captions-and-recuts.mdx create mode 100644 docs/guides/choose-creation-path.mdx create mode 100644 docs/guides/design-tools.mdx create mode 100644 docs/guides/export-and-share.mdx create mode 100644 docs/guides/faceless-explainer.mdx create mode 100644 docs/guides/general-video.mdx create mode 100644 docs/guides/media.mdx create mode 100644 docs/guides/motion-graphics.mdx create mode 100644 docs/guides/music-to-video.mdx create mode 100644 docs/guides/pr-to-video.mdx create mode 100644 docs/guides/product-launch-video.mdx create mode 100644 docs/guides/slideshow.mdx create mode 100644 docs/guides/voice-and-audio.mdx create mode 100644 docs/help.mdx create mode 100644 docs/product-updates.mdx create mode 100644 docs/reference/color-grading.mdx create mode 100644 docs/studio/animation.mdx create mode 100644 docs/studio/assets-and-blocks.mdx create mode 100644 docs/studio/canvas.mdx create mode 100644 docs/studio/captions.mdx create mode 100644 docs/studio/export.mdx create mode 100644 docs/studio/index.mdx create mode 100644 docs/studio/shortcuts.mdx create mode 100644 docs/studio/slideshows.mdx create mode 100644 docs/studio/source.mdx create mode 100644 docs/studio/storyboard.mdx create mode 100644 docs/studio/timeline.mdx create mode 100644 docs/studio/troubleshooting.mdx create mode 100644 docs/studio/variables.mdx create mode 100644 docs/thirty-days.mdx create mode 100644 docs/workflows.mdx diff --git a/docs/catalog/index.mdx b/docs/catalog/index.mdx new file mode 100644 index 000000000..7d42c5293 --- /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 000000000..ad6650a3f --- /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 000000000..55e6aa095 --- /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 000000000..9c9a4957a --- /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 a2946fa6f..66bc338c5 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,37 @@ "navigation": { "tabs": [ { - "tab": "Documentation", + "tab": "Guides", + "icon": "book-open", "groups": [ { - "group": "Getting Started", + "group": "Start here", "pages": [ "introduction", - "changelog", - "weekly-updates", "quickstart", - "showcase", - "examples", - "launch-videos" + "go-further", + "developers/index" ] }, { - "group": "Concepts", + "group": "Explore", "pages": [ - "concepts/compositions", - "concepts/data-attributes", - "concepts/variables", - "concepts/frame-adapters", - "concepts/determinism" + "examples", + "product-updates" + ] + }, + { + "group": "30 Days of HyperFrames", + "pages": [ + "thirty-days" + ] + }, + { + "group": "Choose where to create", + "pages": [ + "guides/choose-creation-path", + "guides/mcp", + "guides/design-tools" ] }, { @@ -150,53 +160,97 @@ ] }, { - "group": "Guides", + "group": "Workflows", "pages": [ - "guides/pipeline", - "guides/skills", - "guides/authentication", - "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/remove-background", - "guides/hdr", - "guides/4k-rendering", - "guides/performance", - "guides/timeline-editing", - "guides/video-editor-cheatsheet", - "guides/common-mistakes", - "guides/troubleshooting", - "guides/feedback" + "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": "Deploy", + "group": "Build the project", "pages": [ - "deploy/cloud", - "guides/deploy", - "deploy/aws-lambda", - "deploy/gcp-cloud-run", - "deploy/templates-on-lambda", - "deploy/migrating-to-hyperframes-lambda" + "concepts/index", + "guides/media", + "guides/video-components", + "guides/avatar-presenter", + "guides/voice-and-audio", + "guides/remove-background", + "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": "Edit", + "pages": [ + "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 +287,7 @@ ] }, { - "group": "HTML-in-Canvas", + "group": "Interface & VFX", "pages": [ "catalog/blocks/ios26-liquid-glass", "catalog/blocks/liquid-glass-context-menu", @@ -283,7 +337,7 @@ ] }, { - "group": "Shader Transitions", + "group": "Transitions", "pages": [ "catalog/blocks/chromatic-radial-split", "catalog/blocks/cinematic-zoom", @@ -298,12 +352,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 +373,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 +398,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 +414,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 +433,7 @@ ] }, { - "group": "Effects", + "group": "Effects & Annotations", "pages": [ "catalog/components/caption-blend-difference", "catalog/components/grain-overlay", @@ -399,21 +459,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 +477,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" - ] - } - ] - }, - { - "tab": "SDK", - "groups": [ - { - "group": "Overview", - "pages": [ - "sdk/overview", - "sdk/quickstart" + "developers/overview" ] }, { - "group": "Guides", + "group": "Command line", "pages": [ + "developers/cli", + "packages/cli", + "packages/lint" + ] + }, + { + "group": "SDK guides", + "pages": [ + "sdk/quickstart", "sdk/guides/querying-and-editing", "sdk/guides/timing-and-animation", "sdk/guides/undo-redo-and-patches", @@ -468,7 +508,7 @@ ] }, { - "group": "Reference", + "group": "SDK reference", "pages": [ "sdk/reference/open-composition", "sdk/reference/composition", @@ -477,20 +517,79 @@ "sdk/reference/adapters", "sdk/reference/utilities" ] - } - ] - }, - { - "tab": "Reference", - "groups": [ + }, { - "group": "Reference", + "group": "Composition, design & animation", "pages": [ - "reference/html-schema" + "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": "Contributing", + "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": [ + "deploy/aws-lambda", + "deploy/gcp-cloud-run", + "deploy/templates-on-lambda", + "deploy/migrating-to-hyperframes-lambda", + "packages/aws-lambda", + "packages/gcp-cloud-run" + ] + }, + { + "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 +597,7 @@ "contributing/changelog-process", "contributing/testing-local-changes", "contributing/canary-rollouts", - "contributing/studio-manual-dom-editing" - ] - }, - { - "group": "Community", - "pages": [ + "contributing/studio-manual-dom-editing", "community/adopters" ] } @@ -513,7 +607,75 @@ }, "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": [ diff --git a/docs/go-further.mdx b/docs/go-further.mdx new file mode 100644 index 000000000..e74504bed --- /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/avatar-presenter.mdx b/docs/guides/avatar-presenter.mdx new file mode 100644 index 000000000..801833663 --- /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 000000000..1879970a4 --- /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." +--- + + +