ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-04 07:19:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(studio): full Blocks panel — browse, search, add, drag-and-drop registry items

Browse Source 
Adds a Blocks tab to the Studio left sidebar with the full 78-item registry
catalog (58 blocks + 20 components). Users can browse by category, search by
title/description, preview CDN-hosted poster thumbnails with video-on-hover,
and install items on-demand with one click or drag-to-timeline.

Core changes:
- BlockCategory type + resolveBlockCategory() for 7 categories (Captions, VFX,
  Transitions, Effects, Social, Data, Scenes)
- Registry API routes: GET /api/registry/blocks (catalog) + POST install
- StudioApiAdapter extended with listRegistryCatalog + installRegistryBlock
- Vite adapter reads from disk; CLI adapter fetches from GitHub (24h cache)
- BlockParam interface + params on 6 blocks for future parameter controls

Studio UI:
- 4th sidebar tab "Blocks" with responsive grid, category pills, search bar
- BlockCard: CDN poster thumbnail, video autoplay on hover, duration + WebGL badges
- On-demand install: blocks append as sub-compositions on timeline; components
  overlay at start=0 spanning full duration with transparent background patching
- TIMELINE_BLOCK_MIME drag-and-drop to timeline
- BlockParamsPanel (Phase 3 scaffold) auto-opens for parameterized blocks

Registry manifests:
- All 58 blocks backfilled with preview: { video, poster } CDN URLs
- All 20 components normalized to object format + poster URLs added
- 6 blocks annotated with params (Liquid Glass/Background, Portal, Chart,
  Logo Outro, Magnetic)
- flowchart-vertical preview generated and uploaded to CDN
This commit is contained in:
Miguel Ángel
2026-05-18 21:15:15 -04:00
parent d9183ba27d
commit ffbc18ad31
111 changed files with 1800 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/blocks/app-showcase/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/app-showcase.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
}
}
registry/blocks/apple-money-count/registry-item.json
+6 -2
View File
@@ -7,7 +7,7 @@
"tags": ["showcase", "finance", "kinetic", "youtube", "sfx"],
"author": "Stronkter",
"authorUrl": "https://x.com/Stronkter",
"sourcePrompt": "\ud83d\udcf7HyperFrames by HeyGen Make me a five-second video of, on a white background, of a Apple-style bold font counting from $0 to $10,000. Once it counts to $10,000, it changes to a green color and the screen also flashes green for a second, and then money icons come out of the $10,000 amount all over the screen and then disappear.",
"sourcePrompt": "📷HyperFrames by HeyGen Make me a five-second video of, on a white background, of a Apple-style bold font counting from $0 to $10,000. Once it counts to $10,000, it changes to a green color and the screen also flashes green for a second, and then money icons come out of the $10,000 amount all over the screen and then disappear.",
"dimensions": {
"width": 1920,
"height": 1080
@@ -24,5 +24,9 @@
"target": "assets/sfx-production.wav",
"type": "hyperframes:asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
}
}
registry/blocks/blue-sweater-intro-video/registry-item.json
+5 -1
View File
@@ -28,5 +28,9 @@
"target": "assets/sfx/integrated-melodic-tech-mix.wav",
"type": "hyperframes:asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
}
}
registry/blocks/chromatic-radial-split/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/chromatic-radial-split.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
}
}
registry/blocks/cinematic-zoom/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/cinematic-zoom.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
}
}
registry/blocks/cross-warp-morph/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/cross-warp-morph.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
}
}
registry/blocks/data-chart/registry-item.json
+18
View File
@@ -16,5 +16,23 @@
"target": "compositions/data-chart.html",
"type": "hyperframes:composition"
}
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
},
"params": [
{
"key": "--bg-color",
"label": "Background",
"type": "color",
"default": "#faf9f6"
},
{
"key": "--text-color",
"label": "Text color",
"type": "color",
"default": "#333333"
}
]
}
registry/blocks/domain-warp-dissolve/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/domain-warp-dissolve.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
}
}
registry/blocks/flash-through-white/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/flash-through-white.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
}
}
registry/blocks/flowchart-vertical/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/flowchart-vertical.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png"
}
}
registry/blocks/flowchart/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/flowchart.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
}
}
registry/blocks/glitch/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/glitch.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
}
}
registry/blocks/gravitational-lens/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/gravitational-lens.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
}
}
registry/blocks/instagram-follow/registry-item.json
+5 -1
View File
@@ -21,5 +21,9 @@
"target": "assets/avatar.jpg",
"type": "hyperframes:asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
}
}
registry/blocks/light-leak/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/light-leak.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
}
}
registry/blocks/logo-outro/registry-item.json
+18
View File
@@ -16,5 +16,23 @@
"target": "compositions/logo-outro.html",
"type": "hyperframes:composition"
}
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
},
"params": [
{
"key": "--bg-color",
"label": "Background",
"type": "color",
"default": "#0a0a0f"
},
{
"key": "--accent-color",
"label": "Accent",
"type": "color",
"default": "#1a1a1f"
}
]
}
registry/blocks/macos-notification/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/macos-notification.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
}
}
registry/blocks/north-korea-locked-down/registry-item.json
+6 -2
View File
@@ -7,7 +7,7 @@
"tags": ["showcase", "map", "annotation", "youtube", "kinetic"],
"author": "Stronkter",
"authorUrl": "https://x.com/Stronkter",
"sourcePrompt": "use \ud83d\udcf7HyperFrames by HeyGen and Image Gen if you need it for assets or like png images of assets without backround to make a youtube style camera moving in out and other things that are in youtube videos, to make a video of a map zooms in on north korea and a scribble style circle circles the country and a text pops up above it saying locked down when the text apears the video turns a bit redish make the video 7 seconds long id like the map to look realistic and accurate to real lfe",
"sourcePrompt": "use 📷HyperFrames by HeyGen and Image Gen if you need it for assets or like png images of assets without backround to make a youtube style camera moving in out and other things that are in youtube videos, to make a video of a map zooms in on north korea and a scribble style circle circles the country and a text pops up above it saying locked down when the text apears the video turns a bit redish make the video 7 seconds long id like the map to look realistic and accurate to real lfe",
"dimensions": {
"width": 1920,
"height": 1080
@@ -24,5 +24,9 @@
"target": "assets/korea-map.png",
"type": "hyperframes:asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
}
}
registry/blocks/nyc-paris-flight/registry-item.json
+6 -2
View File
@@ -7,7 +7,7 @@
"tags": ["showcase", "travel", "map", "youtube", "sfx"],
"author": "Stronkter",
"authorUrl": "https://x.com/Stronkter",
"sourcePrompt": "\ud83d\udcf7HyperFrames by HeyGen Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.",
"sourcePrompt": "📷HyperFrames by HeyGen Make a six-second Apple-style font bold video of a plane going from New York to Paris. A map animation, and then it shows the plane going from New York to Paris. Make the fonts Apple-style bold and make the map actual realistic, actually realistic. Before it lands in Paris, do a doodle circle in red around Paris, and then it lands in the doodle circle, and the video basically cuts to a white screen at the end. Also add sound effects for everything as well. Every nice motion, every the plane for pop-ups, bubble, pop-up effect, everything you want.",
"dimensions": {
"width": 1920,
"height": 1080
@@ -29,5 +29,9 @@
"target": "assets/sfx-mix.wav",
"type": "hyperframes:asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
}
}
registry/blocks/reddit-post/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/reddit-post.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
}
}
registry/blocks/ridged-burn/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/ridged-burn.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
}
}
registry/blocks/ripple-waves/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/ripple-waves.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
}
}
registry/blocks/sdf-iris/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/sdf-iris.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
}
}
registry/blocks/spain-map/registry-item.json
+9 -2
View File
@@ -5,7 +5,10 @@
"title": "Spain Map",
"description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection",
"tags": ["data", "map", "geography", "spain", "europe", "choropleth"],
"dimensions": { "width": 1920, "height": 1080 },
"dimensions": {
"width": 1920,
"height": 1080
},
"duration": 12,
"files": [
{
@@ -13,5 +16,9 @@
"target": "compositions/spain-map.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png"
}
}
registry/blocks/spotify-card/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/spotify-card.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
}
}
registry/blocks/swirl-vortex/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/swirl-vortex.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
}
}
registry/blocks/thermal-distortion/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/thermal-distortion.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
}
}
registry/blocks/tiktok-follow/registry-item.json
+5 -1
View File
@@ -21,5 +21,9 @@
"target": "assets/avatar.jpg",
"type": "hyperframes:asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
}
}
registry/blocks/transitions-3d/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-3d.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
}
}
registry/blocks/transitions-blur/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-blur.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
}
}
registry/blocks/transitions-cover/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-cover.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
}
}
registry/blocks/transitions-destruction/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-destruction.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
}
}
registry/blocks/transitions-dissolve/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-dissolve.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
}
}
registry/blocks/transitions-distortion/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-distortion.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
}
}
registry/blocks/transitions-grid/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-grid.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
}
}
registry/blocks/transitions-light/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-light.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
}
}
registry/blocks/transitions-mechanical/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-mechanical.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
}
}
registry/blocks/transitions-other/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-other.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
}
}
registry/blocks/transitions-push/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-push.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
}
}
registry/blocks/transitions-radial/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-radial.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
}
}
registry/blocks/transitions-scale/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/transitions-scale.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
}
}
registry/blocks/ui-3d-reveal/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/ui-3d-reveal.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
}
}
registry/blocks/us-map-bubble/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/us-map-bubble.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png"
}
}
registry/blocks/us-map-flow/registry-item.json
+9 -2
View File
@@ -5,7 +5,10 @@
"title": "US Flow Map",
"description": "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization",
"tags": ["data", "map", "geography", "usa", "flow", "connections", "arcs"],
"dimensions": { "width": 1920, "height": 1080 },
"dimensions": {
"width": 1920,
"height": 1080
},
"duration": 12,
"files": [
{
@@ -13,5 +16,9 @@
"target": "compositions/us-map-flow.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png"
}
}
registry/blocks/us-map-hex/registry-item.json
+9 -2
View File
@@ -5,7 +5,10 @@
"title": "US Hex Grid Map",
"description": "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label",
"tags": ["data", "map", "geography", "usa", "hexgrid", "tilegrid"],
"dimensions": { "width": 1920, "height": 1080 },
"dimensions": {
"width": 1920,
"height": 1080
},
"duration": 10,
"files": [
{
@@ -13,5 +16,9 @@
"target": "compositions/us-map-hex.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png"
}
}
registry/blocks/us-map/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/us-map.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png"
}
}
registry/blocks/vfx-iphone-device/registry-item.json
+6 -2
View File
@@ -3,7 +3,7 @@
"name": "vfx-iphone-device",
"type": "hyperframes:block",
"title": "iPhone & MacBook 3D Showcase",
"description": "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360\u00b0 turntable.",
"description": "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.",
"stability": "experimental",
"dimensions": {
"width": 1920,
@@ -37,5 +37,9 @@
"target": "models/hyperframes-desktop.png",
"type": "asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png"
}
}
registry/blocks/vfx-liquid-background/registry-item.json
+18
View File
@@ -17,5 +17,23 @@
"target": "compositions/vfx-liquid-background.html",
"type": "hyperframes:composition"
}
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
},
"params": [
{
"key": "--bg-color",
"label": "Background",
"type": "color",
"default": "#0a0e17"
},
{
"key": "--text-color",
"label": "Text color",
"type": "color",
"default": "#e2e8f0"
}
]
}
registry/blocks/vfx-liquid-glass/registry-item.json
+18
View File
@@ -17,5 +17,23 @@
"target": "compositions/vfx-liquid-glass.html",
"type": "hyperframes:composition"
}
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png"
},
"params": [
{
"key": "--bg-color",
"label": "Background",
"type": "color",
"default": "#030407"
},
{
"key": "--accent-color",
"label": "Accent",
"type": "color",
"default": "#00d4ff"
}
]
}
registry/blocks/vfx-magnetic/registry-item.json
+18
View File
@@ -17,5 +17,23 @@
"target": "compositions/vfx-magnetic.html",
"type": "hyperframes:composition"
}
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png"
},
"params": [
{
"key": "--bg-color",
"label": "Background",
"type": "color",
"default": "#0c0c0c"
},
{
"key": "--text-color",
"label": "Text color",
"type": "color",
"default": "#e8e8e8"
}
]
}
registry/blocks/vfx-portal/registry-item.json
+18
View File
@@ -17,5 +17,23 @@
"target": "compositions/vfx-portal.html",
"type": "hyperframes:composition"
}
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png"
},
"params": [
{
"key": "--bg-color",
"label": "Background",
"type": "color",
"default": "#000000"
},
{
"key": "--portal-color",
"label": "Portal color",
"type": "color",
"default": "#fafafa"
}
]
}
registry/blocks/vfx-shatter/registry-item.json
+5 -1
View File
@@ -17,5 +17,9 @@
"target": "compositions/vfx-shatter.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png"
}
}
registry/blocks/vfx-text-cursor/registry-item.json
+5 -1
View File
@@ -17,5 +17,9 @@
"target": "compositions/vfx-text-cursor.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
}
}
registry/blocks/vpn-youtube-spot/registry-item.json
+5 -1
View File
@@ -24,5 +24,9 @@
"target": "assets/vpn-sfx.wav",
"type": "hyperframes:asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
}
}
registry/blocks/whip-pan/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/whip-pan.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
}
}
registry/blocks/world-map/registry-item.json
+9 -2
View File
@@ -5,7 +5,10 @@
"title": "World Map",
"description": "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection",
"tags": ["data", "map", "geography", "world", "choropleth"],
"dimensions": { "width": 1920, "height": 1080 },
"dimensions": {
"width": 1920,
"height": 1080
},
"duration": 14,
"files": [
{
@@ -13,5 +16,9 @@
"target": "compositions/world-map.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png"
}
}
registry/blocks/x-post/registry-item.json
+5 -1
View File
@@ -16,5 +16,9 @@
"target": "compositions/x-post.html",
"type": "hyperframes:composition"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
}
}
registry/blocks/yt-lower-third/registry-item.json
+5 -1
View File
@@ -21,5 +21,9 @@
"target": "assets/avatar.jpg",
"type": "hyperframes:asset"
}
]
],
"preview": {
"video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.mp4",
"poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
}
}