mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
Miguel Ángel
cd277ca312
## Problem The Blue Sweater intro HyperFrames project was only available as a standalone exported project zip. It was not installable from the public registry or visible in the Catalog Showcases group. ## What this fixes Adds `blue-sweater-intro-video` as a registry block with its composition, avatar image, and sound mix asset. The block is exposed through the generated catalog page, `docs/public/catalog-index.json`, and the Showcases navigation. The manifest and generated catalog page credit the creator as [Joe Sai](https://x.com/_blue_sweater_). ## Root cause Catalog-visible blocks are driven by `registry/registry.json`, each block's `registry-item.json`, generated docs/catalog files, and CDN-hosted preview media. The exported project had a valid standalone composition, but it had not been converted into that registry/catalog contract or uploaded to the docs preview CDN. ## Verification ### Local checks - `bun install` - `bun run build` - `bunx tsx scripts/generate-catalog-pages.ts` - `bun run generate:catalog-previews -- --only blue-sweater-intro-video` - `bun packages/cli/src/cli.ts add blue-sweater-intro-video --dir /tmp/hf-blue-sweater-install-test --no-clipboard --json` against a locally served registry - `bun packages/cli/src/cli.ts lint /tmp/hf-blue-sweater-install-test` returned 0 errors and 3 static GSAP overlap warnings from the supplied timeline/parser path - `bun packages/cli/src/cli.ts validate /tmp/hf-blue-sweater-install-test --timeout 5000` returned 0 runtime errors and 0 warnings, with contrast audit warnings only - `bun packages/cli/src/cli.ts inspect /tmp/hf-blue-sweater-install-test --at 0.5,2.5,5.5,9.8,11.2 --json` returned 0 layout issues - `bun packages/cli/src/cli.ts render /tmp/hf-blue-sweater-install-test --output /tmp/hf-blue-sweater-install-test/blue-sweater-intro-video-render.mp4 --fps 24 --quality draft --workers 3` - `ffprobe` reported the installed render duration as `12.000000` - `bunx oxfmt --check registry/registry.json registry/blocks/blue-sweater-intro-video/registry-item.json registry/blocks/blue-sweater-intro-video/blue-sweater-intro-video.html docs/docs.json docs/public/catalog-index.json docs/catalog/blocks/blue-sweater-intro-video.mdx` - `git diff --check` - `bunx vitest run packages/cli/src/commands/add.test.ts packages/core/src/registry/types.test.ts` ### Browser verification - Started a real local HyperFrames preview for the installed test project. - Used `agent-browser` to open `http://localhost:5198/api/projects/hf-blue-sweater-install-test/preview` at 1920x1080. - Verified the runtime registered `install-test` and `blue-sweater-intro-video` timelines. - Sought the block to the final card and verified `@_blue_sweater_` and the following state were visible. - Recorded an `agent-browser`-driven full animation pass; `ffprobe` confirmed a 1920x1080 WebM with 110 video frames. - Checked the fresh `agent-browser` session for page errors after the direct preview flow: `errors: []`. - Used `agent-browser` to load an HTML page with the exact generated CDN `video`/`poster` URLs; the browser reported `readyState: 4`, `videoWidth: 1920`, `videoHeight: 1080`, and `paused: false`. ### CDN upload Uploaded the generated preview media with AWS CLI to the existing docs image bucket path: - `s3://heygen-public/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4` - `s3://heygen-public/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png` Verified both public CDN URLs return `HTTP 200` with correct content type and immutable cache headers: - `https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4` (`video/mp4`) - `https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png` (`image/png`) ## Notes - Local-only browser proof artifacts: - `/tmp/hf-blue-sweater-browser-proof/fresh-final-card.png` - `/tmp/hf-blue-sweater-browser-proof/fresh-browser-flow.webm` - `/tmp/hf-blue-sweater-cdn-check.png` - Local-only installed render artifact: - `/tmp/hf-blue-sweater-install-test/blue-sweater-intro-video-render.mp4`
598 lines
18 KiB
JSON
598 lines
18 KiB
JSON
[
|
|
{
|
|
"name": "app-showcase",
|
|
"type": "block",
|
|
"title": "App Showcase",
|
|
"description": "Fitness app product showcase with three floating smartphone screens",
|
|
"tags": [
|
|
"showcase",
|
|
"app",
|
|
"3d"
|
|
],
|
|
"href": "/catalog/blocks/app-showcase",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png"
|
|
},
|
|
{
|
|
"name": "apple-money-count",
|
|
"type": "block",
|
|
"title": "Apple Money Count",
|
|
"description": "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound.",
|
|
"tags": [
|
|
"showcase",
|
|
"finance",
|
|
"kinetic",
|
|
"youtube",
|
|
"sfx"
|
|
],
|
|
"href": "/catalog/blocks/apple-money-count",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png"
|
|
},
|
|
{
|
|
"name": "blue-sweater-intro-video",
|
|
"type": "block",
|
|
"title": "Blue Sweater Intro Video",
|
|
"description": "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_.",
|
|
"tags": [
|
|
"showcase",
|
|
"ai",
|
|
"creator",
|
|
"sfx"
|
|
],
|
|
"href": "/catalog/blocks/blue-sweater-intro-video",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
|
|
},
|
|
{
|
|
"name": "chromatic-radial-split",
|
|
"type": "block",
|
|
"title": "Chromatic Radial Split",
|
|
"description": "Shader transition with chromatic aberration radial split",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/chromatic-radial-split",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
|
|
},
|
|
{
|
|
"name": "cinematic-zoom",
|
|
"type": "block",
|
|
"title": "Cinematic Zoom",
|
|
"description": "Shader transition with dramatic zoom blur",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/cinematic-zoom",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
|
|
},
|
|
{
|
|
"name": "cross-warp-morph",
|
|
"type": "block",
|
|
"title": "Cross Warp Morph",
|
|
"description": "Shader transition with cross-warped morphing",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/cross-warp-morph",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
|
|
},
|
|
{
|
|
"name": "data-chart",
|
|
"type": "block",
|
|
"title": "Data Chart",
|
|
"description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
|
|
"tags": [
|
|
"data",
|
|
"chart",
|
|
"statistics"
|
|
],
|
|
"href": "/catalog/blocks/data-chart",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
|
|
},
|
|
{
|
|
"name": "domain-warp-dissolve",
|
|
"type": "block",
|
|
"title": "Domain Warp Dissolve",
|
|
"description": "Shader transition with fractal noise domain warping",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/domain-warp-dissolve",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
|
|
},
|
|
{
|
|
"name": "flash-through-white",
|
|
"type": "block",
|
|
"title": "Flash Through White",
|
|
"description": "Shader transition with white flash crossfade",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/flash-through-white",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
|
|
},
|
|
{
|
|
"name": "flowchart",
|
|
"type": "block",
|
|
"title": "Flowchart",
|
|
"description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
|
|
"tags": [
|
|
"diagram",
|
|
"flowchart",
|
|
"interactive"
|
|
],
|
|
"href": "/catalog/blocks/flowchart",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
|
|
},
|
|
{
|
|
"name": "glitch",
|
|
"type": "block",
|
|
"title": "Glitch",
|
|
"description": "Shader transition with digital glitch artifacts",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/glitch",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
|
|
},
|
|
{
|
|
"name": "grain-overlay",
|
|
"type": "component",
|
|
"title": "Grain Overlay",
|
|
"description": "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition",
|
|
"tags": [
|
|
"texture",
|
|
"grain",
|
|
"overlay",
|
|
"film"
|
|
],
|
|
"href": "/catalog/components/grain-overlay",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png"
|
|
},
|
|
{
|
|
"name": "gravitational-lens",
|
|
"type": "block",
|
|
"title": "Gravitational Lens",
|
|
"description": "Shader transition with gravitational lensing distortion",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/gravitational-lens",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
|
|
},
|
|
{
|
|
"name": "grid-pixelate-wipe",
|
|
"type": "component",
|
|
"title": "Grid Pixelate Wipe",
|
|
"description": "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes",
|
|
"tags": [
|
|
"transition",
|
|
"wipe",
|
|
"grid",
|
|
"pixelate"
|
|
],
|
|
"href": "/catalog/components/grid-pixelate-wipe",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
|
|
},
|
|
{
|
|
"name": "instagram-follow",
|
|
"type": "block",
|
|
"title": "Instagram Follow",
|
|
"description": "Animated Instagram follow overlay with profile card and follow button",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"instagram"
|
|
],
|
|
"href": "/catalog/blocks/instagram-follow",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
|
|
},
|
|
{
|
|
"name": "light-leak",
|
|
"type": "block",
|
|
"title": "Light Leak",
|
|
"description": "Shader transition with cinematic light leak overlay",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/light-leak",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
|
|
},
|
|
{
|
|
"name": "logo-outro",
|
|
"type": "block",
|
|
"title": "Logo Outro",
|
|
"description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
|
|
"tags": [
|
|
"branding",
|
|
"outro",
|
|
"logo"
|
|
],
|
|
"href": "/catalog/blocks/logo-outro",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
|
|
},
|
|
{
|
|
"name": "macos-notification",
|
|
"type": "block",
|
|
"title": "macOS Notification",
|
|
"description": "Animated macOS-style notification banner with app icon and message",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"notification"
|
|
],
|
|
"href": "/catalog/blocks/macos-notification",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
|
|
},
|
|
{
|
|
"name": "north-korea-locked-down",
|
|
"type": "block",
|
|
"title": "North Korea Locked Down",
|
|
"description": "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.",
|
|
"tags": [
|
|
"showcase",
|
|
"map",
|
|
"annotation",
|
|
"youtube",
|
|
"kinetic"
|
|
],
|
|
"href": "/catalog/blocks/north-korea-locked-down",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
|
|
},
|
|
{
|
|
"name": "nyc-paris-flight",
|
|
"type": "block",
|
|
"title": "NYC Paris Flight",
|
|
"description": "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.",
|
|
"tags": [
|
|
"showcase",
|
|
"travel",
|
|
"map",
|
|
"youtube",
|
|
"sfx"
|
|
],
|
|
"href": "/catalog/blocks/nyc-paris-flight",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
|
|
},
|
|
{
|
|
"name": "reddit-post",
|
|
"type": "block",
|
|
"title": "Reddit Post Card",
|
|
"description": "Animated Reddit post card overlay with upvotes and comments",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"reddit"
|
|
],
|
|
"href": "/catalog/blocks/reddit-post",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
|
|
},
|
|
{
|
|
"name": "ridged-burn",
|
|
"type": "block",
|
|
"title": "Ridged Burn",
|
|
"description": "Shader transition with ridged turbulence burn effect",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/ridged-burn",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
|
|
},
|
|
{
|
|
"name": "ripple-waves",
|
|
"type": "block",
|
|
"title": "Ripple Waves",
|
|
"description": "Shader transition with concentric ripple wave distortion",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/ripple-waves",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
|
|
},
|
|
{
|
|
"name": "sdf-iris",
|
|
"type": "block",
|
|
"title": "SDF Iris",
|
|
"description": "Shader transition with signed distance field iris reveal",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/sdf-iris",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
|
|
},
|
|
{
|
|
"name": "shimmer-sweep",
|
|
"type": "component",
|
|
"title": "Shimmer Sweep",
|
|
"description": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
|
|
"tags": [
|
|
"text",
|
|
"shimmer",
|
|
"highlight",
|
|
"effect"
|
|
],
|
|
"href": "/catalog/components/shimmer-sweep",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
|
|
},
|
|
{
|
|
"name": "spotify-card",
|
|
"type": "block",
|
|
"title": "Spotify Now Playing",
|
|
"description": "Animated Spotify now-playing card with album art and progress bar",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"spotify"
|
|
],
|
|
"href": "/catalog/blocks/spotify-card",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
|
|
},
|
|
{
|
|
"name": "swirl-vortex",
|
|
"type": "block",
|
|
"title": "Swirl Vortex",
|
|
"description": "Shader transition with swirling vortex distortion",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/swirl-vortex",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
|
|
},
|
|
{
|
|
"name": "thermal-distortion",
|
|
"type": "block",
|
|
"title": "Thermal Distortion",
|
|
"description": "Shader transition with heat haze thermal distortion",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/thermal-distortion",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
|
|
},
|
|
{
|
|
"name": "tiktok-follow",
|
|
"type": "block",
|
|
"title": "TikTok Follow",
|
|
"description": "Animated TikTok follow overlay with profile card and follow button",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"tiktok"
|
|
],
|
|
"href": "/catalog/blocks/tiktok-follow",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
|
|
},
|
|
{
|
|
"name": "transitions-3d",
|
|
"type": "block",
|
|
"title": "3D Transitions",
|
|
"description": "Showcase of 3D perspective flip and rotate transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-3d",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
|
|
},
|
|
{
|
|
"name": "transitions-blur",
|
|
"type": "block",
|
|
"title": "Blur Transitions",
|
|
"description": "Showcase of blur-based transitions between scenes",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-blur",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
|
|
},
|
|
{
|
|
"name": "transitions-cover",
|
|
"type": "block",
|
|
"title": "Cover Transitions",
|
|
"description": "Showcase of cover/uncover slide transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-cover",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
|
|
},
|
|
{
|
|
"name": "transitions-destruction",
|
|
"type": "block",
|
|
"title": "Destruction Transitions",
|
|
"description": "Showcase of destructive break-apart transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-destruction",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
|
|
},
|
|
{
|
|
"name": "transitions-dissolve",
|
|
"type": "block",
|
|
"title": "Dissolve Transitions",
|
|
"description": "Showcase of dissolve and fade transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-dissolve",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
|
|
},
|
|
{
|
|
"name": "transitions-distortion",
|
|
"type": "block",
|
|
"title": "Distortion Transitions",
|
|
"description": "Showcase of warp and distortion transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-distortion",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
|
|
},
|
|
{
|
|
"name": "transitions-grid",
|
|
"type": "block",
|
|
"title": "Grid Transitions",
|
|
"description": "Showcase of grid-based tile transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-grid",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
|
|
},
|
|
{
|
|
"name": "transitions-light",
|
|
"type": "block",
|
|
"title": "Light Transitions",
|
|
"description": "Showcase of light-based glow and flash transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-light",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
|
|
},
|
|
{
|
|
"name": "transitions-mechanical",
|
|
"type": "block",
|
|
"title": "Mechanical Transitions",
|
|
"description": "Showcase of mechanical shutter and iris transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-mechanical",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
|
|
},
|
|
{
|
|
"name": "transitions-other",
|
|
"type": "block",
|
|
"title": "Other Transitions",
|
|
"description": "Showcase of miscellaneous creative transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-other",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
|
|
},
|
|
{
|
|
"name": "transitions-push",
|
|
"type": "block",
|
|
"title": "Push Transitions",
|
|
"description": "Showcase of push and slide transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-push",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
|
|
},
|
|
{
|
|
"name": "transitions-radial",
|
|
"type": "block",
|
|
"title": "Radial Transitions",
|
|
"description": "Showcase of radial wipe and reveal transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-radial",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
|
|
},
|
|
{
|
|
"name": "transitions-scale",
|
|
"type": "block",
|
|
"title": "Scale Transitions",
|
|
"description": "Showcase of scale and zoom transitions",
|
|
"tags": [
|
|
"transition",
|
|
"showcase"
|
|
],
|
|
"href": "/catalog/blocks/transitions-scale",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
|
|
},
|
|
{
|
|
"name": "ui-3d-reveal",
|
|
"type": "block",
|
|
"title": "3D UI Reveal",
|
|
"description": "Perspective 3D reveal animation for UI elements",
|
|
"tags": [
|
|
"showcase",
|
|
"3d",
|
|
"reveal"
|
|
],
|
|
"href": "/catalog/blocks/ui-3d-reveal",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
|
|
},
|
|
{
|
|
"name": "vpn-youtube-spot",
|
|
"type": "block",
|
|
"title": "VPN YouTube Spot",
|
|
"description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
|
|
"tags": [
|
|
"app",
|
|
"showcase",
|
|
"youtube",
|
|
"sfx"
|
|
],
|
|
"href": "/catalog/blocks/vpn-youtube-spot",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
|
|
},
|
|
{
|
|
"name": "whip-pan",
|
|
"type": "block",
|
|
"title": "Whip Pan",
|
|
"description": "Shader transition simulating a fast camera whip pan",
|
|
"tags": [
|
|
"transition",
|
|
"shader"
|
|
],
|
|
"href": "/catalog/blocks/whip-pan",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
|
|
},
|
|
{
|
|
"name": "x-post",
|
|
"type": "block",
|
|
"title": "X Post Card",
|
|
"description": "Animated X/Twitter post card overlay with engagement metrics",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"twitter"
|
|
],
|
|
"href": "/catalog/blocks/x-post",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
|
|
},
|
|
{
|
|
"name": "yt-lower-third",
|
|
"type": "block",
|
|
"title": "YouTube Lower Third",
|
|
"description": "Animated YouTube subscribe lower third with avatar and channel info",
|
|
"tags": [
|
|
"social",
|
|
"overlay",
|
|
"youtube"
|
|
],
|
|
"href": "/catalog/blocks/yt-lower-third",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
|
|
}
|
|
]
|