mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
miga-heygen
3a7fcd10e0
* feat(registry): add 25 image carousel blocks (5 families × 5 variants) Five carousel families, each with 5 style variants: - Orbit (1–5): image cards on a spinning 3D Fibonacci sphere - Path (1–5): cards following animated CSS motion paths - Circle (1–5): circular carousel layouts - Vision (1–5): Apple Vision-style spatial presentations - Text Circle (1–5): circular carousels with text overlays All blocks are 1920×1080 at 6s, with 12–24 configurable image slots. Includes catalog preview thumbnails for each block. Co-Authored-By: Jake Moran <jake.moran@heygen.com> * refactor(registry): host carousel block images on the CDN The registry is served straight out of this repository (DEFAULT_REGISTRY_URL points at raw.githubusercontent.com), so every byte a block ships is permanent history. The 25 carousel blocks added 421 JPEGs, 27.7 MiB in a checkout, and made the diff 472 files. Only 23 of those images were distinct: the same 12-24 placeholders were copied into every block. files[] entries gain an optional `url`. When set, the installer fetches the bytes from there instead of joining the registry base. `path` does not change and still says where the file lands relative to the item, so composition HTML, target mirroring and `hyperframes add` behave exactly as before. Keys are content-addressed, so the 396 manifest entries resolve to 23 objects, and a changed image gets a new URL rather than a stale one cached behind `immutable, max-age=31536000`. The catalog preview renderer copies an item's directory and renders it, so it needs the same materialisation step. Without it the preview draws every card blank and reports success, which is worse than failing. Also drops registry/catalog/, 25 hand-made thumbnails referenced by nothing; catalog previews are rendered by CI and served from docs/images/catalog. Verified: all 23 objects return 200 from the CDN with hashes matching their keys; `hyperframes add carousel-orbit-1` against a local registry installs 24 real JPEGs; the preview render produces the album art, and produces blank cards when the fetch step is removed. * style(registry): format the carousel composition HTML `oxfmt --check .` covers the whole tree, and these 25 files were never run through it. The pre-commit hook only formats staged files, so nothing local caught it. * feat(catalog): publish the carousel blocks without republishing their images These 25 blocks had no Catalog page. Every other item in the registry has one, so they shipped invisible: installable by name, unfindable by browsing. Generating them naively undid the change they were added by. The Catalog payload copies an item's assets into docs/public/, which is tracked, so the 396 images this PR just removed came back as 43 MB one directory over — worse than the 3 MB they started as, because each block got its own copy. The copy exists because these compositions assemble `img.src` at run time out of a variable value, so there is no `src="..."` in the markup for the payload's asset scan to resolve. An unpredictable path can only be satisfied by serving every file beside it, which is what `needsOwnDirectory` asks for. An absolute URL needs no directory: the scan already skips any `https:` reference. So for the payload path only, hosted files are left undownloaded and the composition's variable defaults are rewritten to their URLs. The preview renderer still downloads them, because it paints real frames and a missing file is a blank card. The explorer posts every value to the preview frame on mount, including untouched ones, so the page's variable list carries the URLs too. Left as local paths they would have overridden the payload's own defaults and asked the frame for a file that was deliberately never published. Result: 25 pages, 25 payloads, zero bytes of image added. Verified: a spike item declaring no assets at all rendered its 24 covers from the CDN, proving the variable-default path; payload generation for a carousel block now writes no item directory and no shared asset; the preview render still produces the album art. mint validate and mint broken-links pass on the new pages. test:scripts is green. * refactor(catalog): split the hosted-asset step out of prepareProjectDir Two functions rather than one: finding the composition and rewriting its variable defaults are separate jobs, and inlining the mode branch pushed prepareProjectDir past the complexity gate it was already sitting on. Behaviour is unchanged. Re-verified both paths after the split: the payload for a carousel block still writes no item directory and no shared asset, and the preview render still produces the album art. * feat(catalog): give the carousels their own shelf 25 image carousels landed in Showcases and were 53% of it, so the scenes that shelf exists for disappeared underneath them. That is the same shape the 24 editor themes made, and it gets the same fix they got. Keyed on the first tag, which is this file's stated grouping rule, rather than on the name. `screen-flow-carousel` leads with `product-demo` and stays on the shelf that says what it is for; a future carousel that is not named `carousel-*` still lands here. Showcases 47 -> 22, Carousels 25, and no existing item changed shelf. * fix(registry): centre the circle-5 carousel path in its composition Its ring was centred at x=3832.6 in a 3840-wide composition, so it sat on the right edge and most of it fell outside the frame. Only a few cards were ever visible, cropped, with two thirds of the composition empty. The exported path carried absolute coordinates from a layout that was never recentred. Shifting the four vertices by (-1912.597, -4.340) puts the ring on the composition centre. Handles are relative, so only the anchor points move and the shape is unchanged. carousel-text-circle-5 shares the identical path and had the identical fault. The other three circle variants sit within 12% of centre, which reads as authored placement rather than the same bug, so they are left alone. * fix(catalog): rebuild the circle-5 payloads after recentring the path The Catalog preview plays the payload, not the composition on disk, so recentring the source changed nothing a reader sees. The payload still carried the old vertices and the ring still hung off the right edge of the frame. Verified the consumer this time, not just the producer: both payloads now resolve to a path centre of x=1920. The other 23 rebuild byte-identical, so the formatting pass did not reach them. * feat(catalog): promote Carousels to its own section It was a shelf inside Scenes & demos, which is where a scene type belongs by kind but not by weight. At 25 items it is larger than Data & charts (17) and Blocks (13), each of which is already a section holding a single shelf, so the catalog's own precedent puts it one level up. Pulling it out also takes the largest section in the catalog from 120 items to 95, which is the reason the shelf was added in the first place. The two circle-5 pages change because their embedded source block carries the recentred path; nothing else in them moved. --------- Co-authored-by: Jake Moran <jake.moran@heygen.com> Co-authored-by: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
1137 lines
40 KiB
JSON
1137 lines
40 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/blocks/hw-write-title",
|
|
"catalog/components/inline-highlight",
|
|
"catalog/components/kinetic-center-build",
|
|
"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": "Carousels",
|
|
"pages": [
|
|
{
|
|
"group": "Carousels",
|
|
"pages": [
|
|
"catalog/blocks/carousel-circle-1",
|
|
"catalog/blocks/carousel-circle-2",
|
|
"catalog/blocks/carousel-circle-3",
|
|
"catalog/blocks/carousel-circle-4",
|
|
"catalog/blocks/carousel-circle-5",
|
|
"catalog/blocks/carousel-orbit-1",
|
|
"catalog/blocks/carousel-orbit-2",
|
|
"catalog/blocks/carousel-orbit-3",
|
|
"catalog/blocks/carousel-orbit-4",
|
|
"catalog/blocks/carousel-orbit-5",
|
|
"catalog/blocks/carousel-path-1",
|
|
"catalog/blocks/carousel-path-2",
|
|
"catalog/blocks/carousel-path-3",
|
|
"catalog/blocks/carousel-path-4",
|
|
"catalog/blocks/carousel-path-5",
|
|
"catalog/blocks/carousel-text-circle-1",
|
|
"catalog/blocks/carousel-text-circle-2",
|
|
"catalog/blocks/carousel-text-circle-3",
|
|
"catalog/blocks/carousel-text-circle-4",
|
|
"catalog/blocks/carousel-text-circle-5",
|
|
"catalog/blocks/carousel-vision-1",
|
|
"catalog/blocks/carousel-vision-2",
|
|
"catalog/blocks/carousel-vision-3",
|
|
"catalog/blocks/carousel-vision-4",
|
|
"catalog/blocks/carousel-vision-5"
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"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
|
|
}
|
|
]
|
|
}
|