mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
Miguel Ángel
d7a692c97c
* docs: document Studio's WebMCP agent tools
Adds `guides/webmcp`, under Developers > Agent setup.
Its first job is to defuse a name collision. `guides/mcp` already exists and
covers HeyGen's HOSTED MCP connector, which builds a video from a chat. This
page is about an agent working inside Studio on a composition already open in
front of you. Different feature, confusingly similar name, so the page says
what it is not before it says what it is.
Written to DOCS_GUIDELINES: one-sentence intro, outcome before implementation,
real values rather than placeholders, and three callouts.
The three things a reader most needs are the ones easiest to get wrong:
The API is `document.modelContext`, not `navigator.modelContext`. Most
published examples use the second, which is a polyfill compatibility shim
rather than a spec member, so feature-detecting it misleads.
Select first, then edit. Most editing tools act on the current selection, and
an agent that skips it gets an error rather than a wrong-element write.
Leave Studio visible. Some of Studio's write paths report failure through a
toast rather than a return value, so the human is the one who sees it. That is
a real property of the co-pilot design, not a nicety, so the page says it
plainly.
Verified with `npx mint validate` and `npx mint broken-links --check-redirects`,
both passing.
* fix(studio): target the text field that exists, not one named self
Found by running the tools end to end in a browser, which is the only way it
could have been found: the unit tests mock `setText`, so they never crossed the
boundary where this breaks.
An element's text usually lives in a CHILD field, keyed like `self:0:h1` or
`child:0:h1`. `studio_set_text` passed no field key, so
`buildNextDomTextFields` planned zero operations, the request went out with an
empty patch, and the server answered:
POST /api/projects/<id>/file-mutations/patch-element
-> 400 {"error":"target and operations required"}
Which surfaced as `persist-failed`. The tool was telling the truth, so the
reporting work in the earlier PRs did its job, but the failure looked like a
server problem and was not.
The tool now resolves the field: the one the caller named, or the element's
single field when it has exactly one. An element with several fields is asked
to name one; an element with none is reported blocked. Naming a field the
element does not have is rejected with the list of the ones it does have,
rather than silently writing nowhere.
Four regression tests, including the exact `child:0:h1` shape that failed. One
existing assertion changed: it expected the field to be `undefined`, which is
precisely the bug, so it now expects the resolved key.
Also documents two things the browser run surfaced, both real and neither a
defect: registration is asynchronous, so a caller reading `getTools()` too
early sees a partial list; and the tools that act on the current selection need
a render between the select and the edit, which a real agent gets for free
because its calls arrive as separate messages.
* docs: give the agent-tools kill switch instructions that work
The page told readers to set agentToolsEnabled in Studio's preferences.
Nothing writes that flag: it is read in useStudioAgentTools and parsed in
studioUiPreferences, but there is no settings UI and no toggle, so the
instruction could not be followed. Replace it with the localStorage write
that actually flips it, and spell out the merge, since overwriting the key
drops every other stored preference.
* docs: do not promise a per-call permission prompt we have not verified
The page said the browser asks before any agent calls a tool. Prompt
granularity is browser-specific and unsettled during the origin trial, and
we have not observed it on the native path. Say what holds, that access is
gated, and name the part that is still moving.
1100 lines
38 KiB
JSON
1100 lines
38 KiB
JSON
{
|
|
"$schema": "https://mintlify.com/docs.json",
|
|
"name": "HyperFrames",
|
|
"theme": "aspen",
|
|
"colors": {
|
|
"primary": "#16785B",
|
|
"light": "#3CE6AC",
|
|
"dark": "#16785B"
|
|
},
|
|
"background": {
|
|
"color": {
|
|
"light": "#f6f5f1",
|
|
"dark": "#0a0a0a"
|
|
}
|
|
},
|
|
"fonts": {
|
|
"family": "Inter",
|
|
"heading": {
|
|
"family": "Inter"
|
|
}
|
|
},
|
|
"appearance": {
|
|
"default": "system"
|
|
},
|
|
"logo": {
|
|
"light": "/logo/light.svg",
|
|
"dark": "/logo/dark.svg",
|
|
"href": "https://hyperframes.heygen.com/introduction"
|
|
},
|
|
"favicon": "/favicon.svg",
|
|
"contextual": {
|
|
"options": [
|
|
"copy",
|
|
"claude",
|
|
"cursor",
|
|
"vscode",
|
|
"windsurf",
|
|
"mcp",
|
|
{
|
|
"title": "Open an issue",
|
|
"description": "Report a bug or request a feature",
|
|
"icon": "github",
|
|
"iconType": "brands",
|
|
"href": "https://github.com/heygen-com/hyperframes/issues/new"
|
|
}
|
|
]
|
|
},
|
|
"navigation": {
|
|
"tabs": [
|
|
{
|
|
"tab": "Guides",
|
|
"icon": "book-open",
|
|
"groups": [
|
|
{
|
|
"group": "Start here",
|
|
"pages": [
|
|
"introduction",
|
|
"quickstart",
|
|
"go-further",
|
|
"developers/index"
|
|
]
|
|
},
|
|
{
|
|
"group": "Explore",
|
|
"pages": [
|
|
"examples",
|
|
"thirty-days",
|
|
"product-updates",
|
|
"weekly-updates",
|
|
"changelog"
|
|
]
|
|
},
|
|
{
|
|
"group": "Choose where to create",
|
|
"pages": [
|
|
"guides/choose-creation-path",
|
|
"guides/mcp",
|
|
"guides/design-tools"
|
|
]
|
|
},
|
|
{
|
|
"group": "Prompt Guide",
|
|
"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"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"group": "Workflows",
|
|
"pages": [
|
|
"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/hyperframes-vs-remotion"
|
|
]
|
|
},
|
|
{
|
|
"group": "Build the project",
|
|
"pages": [
|
|
"concepts/index",
|
|
"guides/media",
|
|
"guides/video-components",
|
|
"guides/avatar-presenter",
|
|
"guides/voice-and-audio",
|
|
"guides/remove-background",
|
|
"guides/color-grading",
|
|
"guides/media-effects",
|
|
"guides/export-and-share"
|
|
]
|
|
},
|
|
{
|
|
"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": "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"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"tab": "Catalog",
|
|
"icon": "grid-2",
|
|
"groups": [
|
|
{
|
|
"group": "Overview",
|
|
"pages": [
|
|
"catalog/index"
|
|
]
|
|
},
|
|
{
|
|
"group": "Text & captions",
|
|
"pages": [
|
|
{
|
|
"group": "Captions",
|
|
"pages": [
|
|
"catalog/components/caption-camera-follow",
|
|
"catalog/components/caption-clip-wipe",
|
|
"catalog/components/caption-editorial-emphasis",
|
|
"catalog/components/caption-emoji-pop",
|
|
"catalog/components/caption-glitch-rgb",
|
|
"catalog/components/caption-gradient-fill",
|
|
"catalog/components/caption-highlight",
|
|
"catalog/components/caption-kinetic-slam",
|
|
"catalog/components/caption-matrix-decode",
|
|
"catalog/components/caption-neon-accent",
|
|
"catalog/components/caption-neon-glow",
|
|
"catalog/components/caption-parallax-layers",
|
|
"catalog/components/caption-particle-burst",
|
|
"catalog/components/caption-pill-karaoke",
|
|
"catalog/components/caption-texture",
|
|
"catalog/components/caption-weight-shift",
|
|
"catalog/blocks/mk-callout-highlight"
|
|
]
|
|
},
|
|
{
|
|
"group": "Typography & Text",
|
|
"pages": [
|
|
"catalog/components/blur-out-up",
|
|
"catalog/components/bottom-up-letters",
|
|
"catalog/components/caption-blend-difference",
|
|
"catalog/components/char-slam-explode",
|
|
"catalog/components/focus-blur-resolve",
|
|
"catalog/components/headline-slam",
|
|
"catalog/blocks/hw-path-text",
|
|
"catalog/blocks/hw-title",
|
|
"catalog/components/inline-highlight",
|
|
"catalog/components/kinetic-type-swap",
|
|
"catalog/components/line-by-line-slide",
|
|
"catalog/components/line-swap",
|
|
"catalog/components/logo-brand-close",
|
|
"catalog/components/marker-highlight",
|
|
"catalog/components/matrix-decode",
|
|
"catalog/components/mk-emphasis-type",
|
|
"catalog/components/morph-text",
|
|
"catalog/components/particle-text-dissolve",
|
|
"catalog/components/per-word-crossfade",
|
|
"catalog/components/per-word-rise",
|
|
"catalog/components/perspective-marquee",
|
|
"catalog/components/rgb-glitch-text",
|
|
"catalog/components/scan-band",
|
|
"catalog/components/scramble-reveal",
|
|
"catalog/components/shared-axis-y",
|
|
"catalog/components/shared-axis-z",
|
|
"catalog/components/shimmer-sweep",
|
|
"catalog/components/soft-blur-in",
|
|
"catalog/blocks/split-flap-board",
|
|
"catalog/components/strikethrough-replace",
|
|
"catalog/components/text-shimmer",
|
|
"catalog/components/ticker-takeover",
|
|
"catalog/components/titlecard-calm",
|
|
"catalog/components/titlecard-lockup",
|
|
"catalog/components/tracking-in",
|
|
"catalog/components/variable-axis-type",
|
|
"catalog/components/vox-annotate",
|
|
"catalog/blocks/weight-wave",
|
|
"catalog/components/wordmark-tiles",
|
|
"catalog/blocks/yt-prism-title"
|
|
]
|
|
},
|
|
{
|
|
"group": "Lower Thirds",
|
|
"pages": [
|
|
"catalog/blocks/lower-third-bild",
|
|
"catalog/blocks/lt-accent-underline",
|
|
"catalog/blocks/lt-bold-block",
|
|
"catalog/blocks/lt-clean-bar",
|
|
"catalog/blocks/lt-color-block",
|
|
"catalog/blocks/lt-dark-card",
|
|
"catalog/blocks/lt-kicker-name",
|
|
"catalog/blocks/lt-mask-reveal",
|
|
"catalog/blocks/lt-side-rule",
|
|
"catalog/blocks/lt-soft-pill",
|
|
"catalog/blocks/lt-stack-bars",
|
|
"catalog/blocks/news-ticker"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"group": "Code",
|
|
"pages": [
|
|
{
|
|
"group": "Code Animations",
|
|
"pages": [
|
|
"catalog/blocks/code-3d-extrude",
|
|
"catalog/blocks/code-diff",
|
|
"catalog/blocks/code-highlight",
|
|
"catalog/blocks/code-morph",
|
|
"catalog/blocks/code-particle-assemble",
|
|
"catalog/blocks/code-scroll",
|
|
"catalog/blocks/code-shader-dissolve",
|
|
"catalog/blocks/code-snippet-flight",
|
|
"catalog/blocks/code-typing",
|
|
"catalog/components/terminal-simulator"
|
|
]
|
|
},
|
|
{
|
|
"group": "Code Snippets",
|
|
"pages": [
|
|
"catalog/blocks/code-snippet-apple-terminal-basic",
|
|
"catalog/blocks/code-snippet-apple-terminal-clear-dark",
|
|
"catalog/blocks/code-snippet-apple-terminal-clear-light",
|
|
"catalog/blocks/code-snippet-apple-terminal-grass",
|
|
"catalog/blocks/code-snippet-apple-terminal-homebrew",
|
|
"catalog/blocks/code-snippet-apple-terminal-man-page",
|
|
"catalog/blocks/code-snippet-apple-terminal-novel",
|
|
"catalog/blocks/code-snippet-apple-terminal-ocean",
|
|
"catalog/blocks/code-snippet-apple-terminal-pro",
|
|
"catalog/blocks/code-snippet-apple-terminal-red-sands",
|
|
"catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
|
|
"catalog/blocks/code-snippet-apple-terminal-solid-colors",
|
|
"catalog/blocks/code-snippet-dark-2026",
|
|
"catalog/blocks/code-snippet-dark-modern",
|
|
"catalog/blocks/code-snippet-dark-plus",
|
|
"catalog/blocks/code-snippet-high-contrast",
|
|
"catalog/blocks/code-snippet-high-contrast-light",
|
|
"catalog/blocks/code-snippet-light-2026",
|
|
"catalog/blocks/code-snippet-light-modern",
|
|
"catalog/blocks/code-snippet-light-plus",
|
|
"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"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"group": "Transitions",
|
|
"pages": [
|
|
{
|
|
"group": "Shader Transitions",
|
|
"pages": [
|
|
"catalog/blocks/chromatic-radial-split",
|
|
"catalog/blocks/cinematic-zoom",
|
|
"catalog/blocks/cross-warp-morph",
|
|
"catalog/blocks/domain-warp-dissolve",
|
|
"catalog/blocks/flash-through-white",
|
|
"catalog/blocks/glitch",
|
|
"catalog/blocks/gravitational-lens",
|
|
"catalog/blocks/light-leak",
|
|
"catalog/blocks/ridged-burn",
|
|
"catalog/blocks/ripple-waves",
|
|
"catalog/blocks/sdf-iris",
|
|
"catalog/blocks/swirl-vortex",
|
|
"catalog/blocks/thermal-distortion",
|
|
"catalog/blocks/whip-pan"
|
|
]
|
|
},
|
|
{
|
|
"group": "CSS Transitions",
|
|
"pages": [
|
|
"catalog/blocks/beat-freeze-cut",
|
|
"catalog/blocks/hw-scribble-transition",
|
|
"catalog/blocks/mk-clone-wall-transition",
|
|
"catalog/blocks/organic-light-leak-overlay",
|
|
"catalog/blocks/transitions-3d",
|
|
"catalog/blocks/transitions-blur",
|
|
"catalog/blocks/transitions-cover",
|
|
"catalog/blocks/transitions-destruction",
|
|
"catalog/blocks/transitions-dissolve",
|
|
"catalog/blocks/transitions-distortion",
|
|
"catalog/blocks/transitions-grid",
|
|
"catalog/blocks/transitions-light",
|
|
"catalog/blocks/transitions-mechanical",
|
|
"catalog/blocks/transitions-other",
|
|
"catalog/blocks/transitions-push",
|
|
"catalog/blocks/transitions-radial",
|
|
"catalog/blocks/transitions-scale"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"group": "Data & charts",
|
|
"pages": [
|
|
{
|
|
"group": "Data",
|
|
"pages": [
|
|
"catalog/components/animated-bar-chart",
|
|
"catalog/components/ascii-render-pass",
|
|
"catalog/components/ascii-trail-reveal",
|
|
"catalog/blocks/bar-chart-race",
|
|
"catalog/components/chart-story",
|
|
"catalog/components/conic-progress-ring",
|
|
"catalog/blocks/data-chart",
|
|
"catalog/components/decline-chart",
|
|
"catalog/components/logo-wall",
|
|
"catalog/blocks/mk-line-graph",
|
|
"catalog/blocks/spain-map",
|
|
"catalog/components/star-rating-fill",
|
|
"catalog/blocks/us-map",
|
|
"catalog/blocks/us-map-bubble",
|
|
"catalog/blocks/us-map-flow",
|
|
"catalog/blocks/us-map-hex",
|
|
"catalog/blocks/world-map"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"group": "Scenes & demos",
|
|
"pages": [
|
|
{
|
|
"group": "Showcases",
|
|
"pages": [
|
|
"catalog/blocks/ai-chat-reveal",
|
|
"catalog/blocks/app-showcase",
|
|
"catalog/blocks/apple-money-count",
|
|
"catalog/blocks/blue-sweater-intro-video",
|
|
"catalog/blocks/camera-dolly-zoom",
|
|
"catalog/blocks/chatgpt-exchange",
|
|
"catalog/blocks/claude-exchange",
|
|
"catalog/blocks/cosmic-orb",
|
|
"catalog/blocks/gallery-tunnel",
|
|
"catalog/blocks/heygen-avatar-promo-card",
|
|
"catalog/blocks/message-thread-reveal",
|
|
"catalog/blocks/north-korea-locked-down",
|
|
"catalog/blocks/notes-reveal",
|
|
"catalog/blocks/notification-cascade",
|
|
"catalog/blocks/nyc-paris-flight",
|
|
"catalog/blocks/oscilloscope-trace",
|
|
"catalog/blocks/rack-focus",
|
|
"catalog/blocks/share-sheet-carousel",
|
|
"catalog/blocks/slack-notification-ad",
|
|
"catalog/blocks/ui-3d-reveal",
|
|
"catalog/blocks/vfx-anamorphic-flare",
|
|
"catalog/blocks/vpn-youtube-spot"
|
|
]
|
|
},
|
|
{
|
|
"group": "Product Demo",
|
|
"pages": [
|
|
"catalog/components/browser-device-stage",
|
|
"catalog/components/code-terminal-run",
|
|
"catalog/components/cursor-glyph-trail",
|
|
"catalog/components/echo-trail",
|
|
"catalog/components/focus-swap",
|
|
"catalog/components/icon-morph-beat",
|
|
"catalog/components/native-notification-pop",
|
|
"catalog/components/notification-stack",
|
|
"catalog/components/offset-path-traveler",
|
|
"catalog/components/press-ripple",
|
|
"catalog/components/pull-to-refresh",
|
|
"catalog/components/screen-flow-carousel",
|
|
"catalog/components/segmentation-flood",
|
|
"catalog/components/soft-blob-touch",
|
|
"catalog/components/spring-stack-shuffle",
|
|
"catalog/components/state-chip-rail",
|
|
"catalog/components/sticky-mock-swap",
|
|
"catalog/components/telemetry-hud",
|
|
"catalog/components/toggle-flip",
|
|
"catalog/components/tracing-beam",
|
|
"catalog/components/typed-prompt",
|
|
"catalog/components/vector-editor-rig"
|
|
]
|
|
},
|
|
{
|
|
"group": "Social Overlays",
|
|
"pages": [
|
|
"catalog/blocks/editorial-flash-overlay",
|
|
"catalog/blocks/freeze-frame-dressing",
|
|
"catalog/blocks/instagram-follow",
|
|
"catalog/blocks/macos-notification",
|
|
"catalog/blocks/reddit-post",
|
|
"catalog/blocks/spotify-card",
|
|
"catalog/blocks/thread-message-stack",
|
|
"catalog/blocks/tiktok-follow",
|
|
"catalog/blocks/x-post",
|
|
"catalog/blocks/yt-comment-card",
|
|
"catalog/blocks/yt-lower-third"
|
|
]
|
|
},
|
|
{
|
|
"group": "Motion Scenes",
|
|
"pages": [
|
|
"catalog/components/aurora-drift",
|
|
"catalog/components/beat-accent",
|
|
"catalog/components/beat-pulse-background",
|
|
"catalog/components/chat-thread",
|
|
"catalog/components/constellation-hub",
|
|
"catalog/components/count-up",
|
|
"catalog/components/cta-close",
|
|
"catalog/components/cta-lockup",
|
|
"catalog/components/facet-morph",
|
|
"catalog/components/gesture-tap",
|
|
"catalog/components/gloss-sweep",
|
|
"catalog/components/grade-split-reveal",
|
|
"catalog/components/grid-card-assemble",
|
|
"catalog/components/light-sweep-pass",
|
|
"catalog/components/locked-nucleus-orbit",
|
|
"catalog/components/logo-sting",
|
|
"catalog/components/marker-checklist-card",
|
|
"catalog/components/modal-morph",
|
|
"catalog/components/multi-device-splay",
|
|
"catalog/components/notes-typing",
|
|
"catalog/components/outline-draw",
|
|
"catalog/components/oversized-cursor",
|
|
"catalog/components/particle-image-reveal",
|
|
"catalog/components/physical-exit",
|
|
"catalog/components/radial-surround",
|
|
"catalog/components/scroll-feed",
|
|
"catalog/components/slit-scan-reveal",
|
|
"catalog/components/social-proof-card",
|
|
"catalog/components/split-tilt-cards",
|
|
"catalog/components/spring-pop",
|
|
"catalog/components/stitched-text-draw",
|
|
"catalog/components/stop-motion-cadence",
|
|
"catalog/components/svg-stroke-trace",
|
|
"catalog/components/swipe-rail",
|
|
"catalog/components/testimonial-proof-card",
|
|
"catalog/components/touch-indicator",
|
|
"catalog/components/trust-strip",
|
|
"catalog/components/variable-font-flex",
|
|
"catalog/components/velocity-throw-snap",
|
|
"catalog/components/whiteboard-ink"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"group": "Motion & effects",
|
|
"pages": [
|
|
{
|
|
"group": "Motion Primitives",
|
|
"pages": [
|
|
"catalog/components/arc-motion-path",
|
|
"catalog/components/avatar-group-hover",
|
|
"catalog/components/badge-pop",
|
|
"catalog/components/blur-in",
|
|
"catalog/components/card-resize",
|
|
"catalog/components/chat-message",
|
|
"catalog/components/chromatic-aberration-wipe",
|
|
"catalog/components/dynamic-grid",
|
|
"catalog/components/icon-swap",
|
|
"catalog/blocks/lt-neon-border",
|
|
"catalog/components/menu-morph",
|
|
"catalog/components/number-pop-in",
|
|
"catalog/components/number-wheel",
|
|
"catalog/components/page-slide",
|
|
"catalog/components/separator",
|
|
"catalog/components/sheet-spring-up",
|
|
"catalog/components/simulated-cursor",
|
|
"catalog/components/skeleton-reveal",
|
|
"catalog/components/slot-machine-roll",
|
|
"catalog/components/staggered-fade-up",
|
|
"catalog/components/streaming-text",
|
|
"catalog/components/success-check",
|
|
"catalog/components/svg-line-draw-loader",
|
|
"catalog/components/text-stagger",
|
|
"catalog/components/text-state-swap",
|
|
"catalog/components/three-orbiting-cards",
|
|
"catalog/components/tilt-card",
|
|
"catalog/components/top-down-letters",
|
|
"catalog/components/typewriter",
|
|
"catalog/components/typing-indicator"
|
|
]
|
|
},
|
|
{
|
|
"group": "Effects",
|
|
"pages": [
|
|
"catalog/components/avatar-cloud",
|
|
"catalog/components/beat-timeline",
|
|
"catalog/components/before-after-wipe",
|
|
"catalog/components/camera-rig-depth-stack",
|
|
"catalog/components/comparison-split",
|
|
"catalog/components/confetti",
|
|
"catalog/components/cut-the-curve",
|
|
"catalog/components/device-frame-stage",
|
|
"catalog/components/directional-wipe",
|
|
"catalog/components/fade-through",
|
|
"catalog/components/grid-pixelate-wipe",
|
|
"catalog/components/halftone-dissolve",
|
|
"catalog/components/hw-arrow",
|
|
"catalog/components/hw-boil",
|
|
"catalog/components/hw-box-label",
|
|
"catalog/components/hw-callout-circle",
|
|
"catalog/components/hw-underline",
|
|
"catalog/components/input-feedback",
|
|
"catalog/components/iris-reveal",
|
|
"catalog/components/keyframe-scrub-stack",
|
|
"catalog/components/match-cut",
|
|
"catalog/components/mesh-gradient-bg",
|
|
"catalog/components/micro-transitions",
|
|
"catalog/components/mk-usage-arc",
|
|
"catalog/components/morph-swap",
|
|
"catalog/components/motion-blur",
|
|
"catalog/components/multiplayer-cursors",
|
|
"catalog/components/notification-pileup",
|
|
"catalog/components/onboarding-stepper-flow",
|
|
"catalog/components/ordered-dither-pass",
|
|
"catalog/components/overwhelm-surround",
|
|
"catalog/components/panel-reveal",
|
|
"catalog/components/parallax-device-dive",
|
|
"catalog/components/parallax-unzoom",
|
|
"catalog/components/parallax-zoom",
|
|
"catalog/components/rubber-band-bumper",
|
|
"catalog/components/settings-toggle-flow",
|
|
"catalog/components/signup-flow",
|
|
"catalog/components/spotlight-card",
|
|
"catalog/components/stagger-cascade",
|
|
"catalog/components/stagger-lattice",
|
|
"catalog/components/store-badge-lockup",
|
|
"catalog/components/svg-mask-reveal",
|
|
"catalog/components/tabs-slide-indicator",
|
|
"catalog/components/testimonial-card",
|
|
"catalog/components/type-match-cut",
|
|
"catalog/components/vignette",
|
|
"catalog/components/whip-pan-cut",
|
|
"catalog/components/x-follow-card",
|
|
"catalog/components/yt-circle-pointer",
|
|
"catalog/components/yt-feather-highlight",
|
|
"catalog/components/zoom-through-transition"
|
|
]
|
|
},
|
|
{
|
|
"group": "Camera & 3D",
|
|
"pages": [
|
|
"catalog/blocks/camcorder-hud",
|
|
"catalog/components/camera-scan-gate",
|
|
"catalog/components/camera-shake",
|
|
"catalog/components/drift-hold",
|
|
"catalog/components/focus-rack",
|
|
"catalog/components/pan-stations",
|
|
"catalog/components/pull-back-reveal",
|
|
"catalog/components/push-in",
|
|
"catalog/components/scroll-camera-story",
|
|
"catalog/components/ui-focus-zoom",
|
|
"catalog/components/yt-camera-move"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"group": "Surfaces",
|
|
"pages": [
|
|
{
|
|
"group": "Texture",
|
|
"pages": [
|
|
"catalog/components/grain-field",
|
|
"catalog/components/grain-overlay",
|
|
"catalog/blocks/halftone-field",
|
|
"catalog/components/ink-bleed-reveal",
|
|
"catalog/components/texture-mask-text",
|
|
"catalog/blocks/yt-lcd-background",
|
|
"catalog/components/yt-screen-warp"
|
|
]
|
|
},
|
|
{
|
|
"group": "HTML-in-Canvas",
|
|
"pages": [
|
|
"catalog/blocks/ios26-liquid-glass",
|
|
"catalog/blocks/liquid-glass-context-menu",
|
|
"catalog/blocks/liquid-glass-media-controls",
|
|
"catalog/blocks/liquid-glass-notification",
|
|
"catalog/blocks/liquid-glass-widgets",
|
|
"catalog/blocks/macos-tahoe-liquid-glass",
|
|
"catalog/blocks/vfx-iphone-device",
|
|
"catalog/blocks/vfx-liquid-background",
|
|
"catalog/blocks/vfx-liquid-glass",
|
|
"catalog/blocks/vfx-magnetic",
|
|
"catalog/blocks/vfx-portal",
|
|
"catalog/blocks/vfx-shatter",
|
|
"catalog/blocks/vfx-text-cursor"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"group": "Blocks",
|
|
"pages": [
|
|
{
|
|
"group": "Blocks",
|
|
"pages": [
|
|
"catalog/blocks/flowchart",
|
|
"catalog/blocks/flowchart-vertical",
|
|
"catalog/blocks/hw-frame",
|
|
"catalog/blocks/hw-pipeline",
|
|
"catalog/blocks/hw-text-cloud",
|
|
"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/spiral-galaxy",
|
|
"catalog/blocks/yt-logo-intro",
|
|
"catalog/blocks/yt-vertical-fill"
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"tab": "Developers",
|
|
"icon": "code",
|
|
"groups": [
|
|
{
|
|
"group": "Start here",
|
|
"pages": [
|
|
"developers/overview"
|
|
]
|
|
},
|
|
{
|
|
"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",
|
|
"sdk/guides/persistence",
|
|
"sdk/guides/embedded-override-mode",
|
|
"sdk/guides/canvas-integration",
|
|
"sdk/guides/editing-affordances"
|
|
]
|
|
},
|
|
{
|
|
"group": "SDK reference",
|
|
"pages": [
|
|
"sdk/reference/open-composition",
|
|
"sdk/reference/composition",
|
|
"sdk/reference/edit-operations",
|
|
"sdk/reference/types",
|
|
"sdk/reference/adapters",
|
|
"sdk/reference/utilities"
|
|
]
|
|
},
|
|
{
|
|
"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/figma"
|
|
]
|
|
},
|
|
{
|
|
"group": "Composition reference",
|
|
"pages": [
|
|
"reference/html-schema",
|
|
"reference/color-grading",
|
|
"reference/audio-effects"
|
|
]
|
|
},
|
|
{
|
|
"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",
|
|
"guides/webmcp"
|
|
]
|
|
},
|
|
{
|
|
"group": "Contributing & community",
|
|
"pages": [
|
|
"contributing",
|
|
"contributing/catalog",
|
|
"contributing/release-channels",
|
|
"contributing/changelog-process",
|
|
"contributing/testing-local-changes",
|
|
"contributing/canary-rollouts",
|
|
"community/adopters"
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"footer": {
|
|
"socials": {
|
|
"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
|
|
}
|
|
]
|
|
}
|