mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-14 13:27:13 +00:00
Thirteen manifests declare `preview: { video }` with no `poster` key, and that
omission is deliberate — no .png was ever produced for them. main reads it in one
line: `if (manifest.preview) return manifest.preview.poster`.
I deleted that line as "config nobody varies", having checked whether any poster
DIFFERED from the generated URL (none did, 100 of 100) and never having checked
whether any was ABSENT (thirteen were). Then I replaced it with a filesystem
check against docs/images, which is gitignored, so it was false everywhere and
would have stripped all 168. Then I removed the poster entirely. Three wrong
answers to a question the repo had already answered.
Restored, and the page's video tag now asks the same function rather than a
second source of truth. 155 of 168 carry a poster, matching main exactly: 154
video pages plus texture-mask-text, which renders mask images instead of a video.
The 13 remaining dead URLs are in catalog-index.json only, which no code in
docs/ or packages/ reads, and no rendered page requests them.
The complexity cuts to the encode pass stand: hasAudio deleted (ffmpeg ignores
-c:a with no audio stream), and the spawn+Promise wrapper is execFileSync.
2341 lines
76 KiB
JSON
2341 lines
76 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": "beat-freeze-cut",
|
|
"type": "block",
|
|
"title": "Beat Freeze Cut",
|
|
"description": "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages.",
|
|
"tags": [
|
|
"transition",
|
|
"music",
|
|
"beat-driven",
|
|
"freeze-frame"
|
|
],
|
|
"href": "/catalog/blocks/beat-freeze-cut",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.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": "camcorder-hud",
|
|
"type": "block",
|
|
"title": "Camcorder HUD",
|
|
"description": "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments",
|
|
"tags": [
|
|
"camcorder",
|
|
"camera",
|
|
"recording",
|
|
"hud",
|
|
"overlay",
|
|
"creator",
|
|
"media-treatment-overlay"
|
|
],
|
|
"href": "/catalog/blocks/camcorder-hud",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png"
|
|
},
|
|
{
|
|
"name": "caption-blend-difference",
|
|
"type": "component",
|
|
"title": "Blend Difference",
|
|
"description": "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background",
|
|
"tags": [
|
|
"text",
|
|
"text-effect",
|
|
"effect",
|
|
"blend-mode",
|
|
"contrast",
|
|
"inversion"
|
|
],
|
|
"href": "/catalog/components/caption-blend-difference",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png"
|
|
},
|
|
{
|
|
"name": "caption-clip-wipe",
|
|
"type": "component",
|
|
"title": "Clip Wipe",
|
|
"description": "Left-to-right clip-path wipe reveal per word",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"wipe",
|
|
"clip-path",
|
|
"reveal"
|
|
],
|
|
"href": "/catalog/components/caption-clip-wipe",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png"
|
|
},
|
|
{
|
|
"name": "caption-editorial-emphasis",
|
|
"type": "component",
|
|
"title": "Editorial Emphasis",
|
|
"description": "Dual-font system with dramatic size contrast for emphasis words",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"editorial",
|
|
"typography",
|
|
"emphasis"
|
|
],
|
|
"href": "/catalog/components/caption-editorial-emphasis",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png"
|
|
},
|
|
{
|
|
"name": "caption-emoji-pop",
|
|
"type": "component",
|
|
"title": "Emoji Pop",
|
|
"description": "Emoji integration with stroked text and horizontal squeeze entrance",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"emoji",
|
|
"social"
|
|
],
|
|
"href": "/catalog/components/caption-emoji-pop",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png"
|
|
},
|
|
{
|
|
"name": "caption-glitch-rgb",
|
|
"type": "component",
|
|
"title": "Glitch RGB",
|
|
"description": "RGB chromatic aberration with CRT scanline overlay",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"glitch",
|
|
"cyber",
|
|
"tech"
|
|
],
|
|
"href": "/catalog/components/caption-glitch-rgb",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png"
|
|
},
|
|
{
|
|
"name": "caption-gradient-fill",
|
|
"type": "component",
|
|
"title": "Gradient Fill",
|
|
"description": "Gradient-clipped text with elastic bounce entrance",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"gradient",
|
|
"colorful"
|
|
],
|
|
"href": "/catalog/components/caption-gradient-fill",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
|
|
},
|
|
{
|
|
"name": "caption-highlight",
|
|
"type": "component",
|
|
"title": "Highlight",
|
|
"description": "Red background sweep behind each active word, TikTok-style",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"highlight",
|
|
"social",
|
|
"tiktok"
|
|
],
|
|
"href": "/catalog/components/caption-highlight",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png"
|
|
},
|
|
{
|
|
"name": "caption-kinetic-slam",
|
|
"type": "component",
|
|
"title": "Kinetic Slam",
|
|
"description": "Full-screen single-word display with alternating entrance directions",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"kinetic",
|
|
"typography",
|
|
"slam"
|
|
],
|
|
"href": "/catalog/components/caption-kinetic-slam",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png"
|
|
},
|
|
{
|
|
"name": "caption-matrix-decode",
|
|
"type": "component",
|
|
"title": "Matrix Decode",
|
|
"description": "Character scramble animation before text reveal",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"matrix",
|
|
"scramble",
|
|
"decode"
|
|
],
|
|
"href": "/catalog/components/caption-matrix-decode",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png"
|
|
},
|
|
{
|
|
"name": "caption-neon-accent",
|
|
"type": "component",
|
|
"title": "Neon Accent",
|
|
"description": "Multi-color neon glow accents with wiggle drift animation",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"neon",
|
|
"glow",
|
|
"accent"
|
|
],
|
|
"href": "/catalog/components/caption-neon-accent",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png"
|
|
},
|
|
{
|
|
"name": "caption-neon-glow",
|
|
"type": "component",
|
|
"title": "Neon Glow",
|
|
"description": "Cyan and magenta neon glow with keyword accent colors",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"neon",
|
|
"glow",
|
|
"gaming"
|
|
],
|
|
"href": "/catalog/components/caption-neon-glow",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png"
|
|
},
|
|
{
|
|
"name": "caption-parallax-layers",
|
|
"type": "component",
|
|
"title": "Parallax Layers",
|
|
"description": "Behind-subject 3D text layering with vertical stretch effect",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"parallax",
|
|
"3d",
|
|
"depth"
|
|
],
|
|
"href": "/catalog/components/caption-parallax-layers",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png"
|
|
},
|
|
{
|
|
"name": "caption-particle-burst",
|
|
"type": "component",
|
|
"title": "Particle Burst",
|
|
"description": "Keyword words trigger colored particle explosions",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"particles",
|
|
"burst",
|
|
"effects"
|
|
],
|
|
"href": "/catalog/components/caption-particle-burst",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png"
|
|
},
|
|
{
|
|
"name": "caption-pill-karaoke",
|
|
"type": "component",
|
|
"title": "Pill Karaoke",
|
|
"description": "Pill-shaped container with per-word karaoke color highlight",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"karaoke",
|
|
"pill"
|
|
],
|
|
"href": "/catalog/components/caption-pill-karaoke",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
|
|
},
|
|
{
|
|
"name": "caption-texture",
|
|
"type": "component",
|
|
"title": "Texture",
|
|
"description": "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"texture",
|
|
"mask"
|
|
],
|
|
"href": "/catalog/components/caption-texture",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png"
|
|
},
|
|
{
|
|
"name": "caption-weight-shift",
|
|
"type": "component",
|
|
"title": "Weight Shift",
|
|
"description": "Elegant font-weight transition between caption lines",
|
|
"tags": [
|
|
"captions",
|
|
"caption-style",
|
|
"minimal",
|
|
"typography"
|
|
],
|
|
"href": "/catalog/components/caption-weight-shift",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.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": "code-3d-extrude",
|
|
"type": "block",
|
|
"title": "Code 3D Extrude",
|
|
"description": "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"3d",
|
|
"webgl",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-3d-extrude",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png"
|
|
},
|
|
{
|
|
"name": "code-diff",
|
|
"type": "block",
|
|
"title": "Code Diff",
|
|
"description": "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"diff",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-diff",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png"
|
|
},
|
|
{
|
|
"name": "code-highlight",
|
|
"type": "block",
|
|
"title": "Code Highlight Sweep",
|
|
"description": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based).",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"highlight",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-highlight",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png"
|
|
},
|
|
{
|
|
"name": "code-morph",
|
|
"type": "block",
|
|
"title": "Code Morph",
|
|
"description": "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"morph",
|
|
"refactor",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-morph",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png"
|
|
},
|
|
{
|
|
"name": "code-particle-assemble",
|
|
"type": "block",
|
|
"title": "Code Particle Assemble",
|
|
"description": "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"particles",
|
|
"gpu",
|
|
"webgl",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-particle-assemble",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png"
|
|
},
|
|
{
|
|
"name": "code-scroll",
|
|
"type": "block",
|
|
"title": "Code Scroll To Line",
|
|
"description": "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"scroll",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-scroll",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png"
|
|
},
|
|
{
|
|
"name": "code-shader-dissolve",
|
|
"type": "block",
|
|
"title": "Code Shader Dissolve",
|
|
"description": "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"shader",
|
|
"webgl",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-shader-dissolve",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-basic",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Basic",
|
|
"description": "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-basic"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-clear-dark",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Clear Dark",
|
|
"description": "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-clear-dark"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-clear-light",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Clear Light",
|
|
"description": "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-clear-light"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-grass",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Grass",
|
|
"description": "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-grass"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-homebrew",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Homebrew",
|
|
"description": "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-homebrew"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-man-page",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Man Page",
|
|
"description": "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-man-page"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-novel",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Novel",
|
|
"description": "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-novel"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-ocean",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Ocean",
|
|
"description": "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-ocean"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-pro",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Pro",
|
|
"description": "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-pro"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-red-sands",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Red Sands",
|
|
"description": "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-red-sands"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-silver-aerogel",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Silver Aerogel",
|
|
"description": "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-silver-aerogel"
|
|
},
|
|
{
|
|
"name": "code-snippet-apple-terminal-solid-colors",
|
|
"type": "block",
|
|
"title": "Code Snippet - Apple Terminal Solid Colors",
|
|
"description": "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"terminal",
|
|
"apple",
|
|
"apple-terminal"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-apple-terminal-solid-colors"
|
|
},
|
|
{
|
|
"name": "code-snippet-dark-2026",
|
|
"type": "block",
|
|
"title": "Code Snippet - Dark 2026",
|
|
"description": "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-dark-2026",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-dark-modern",
|
|
"type": "block",
|
|
"title": "Code Snippet - Dark Modern",
|
|
"description": "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-dark-modern",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-dark-plus",
|
|
"type": "block",
|
|
"title": "Code Snippet - Dark+",
|
|
"description": "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-dark-plus",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-flight",
|
|
"type": "block",
|
|
"title": "Code Snippet Flight",
|
|
"description": "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"flight",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-flight",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-high-contrast",
|
|
"type": "block",
|
|
"title": "Code Snippet - High Contrast",
|
|
"description": "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-high-contrast",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-high-contrast-light",
|
|
"type": "block",
|
|
"title": "Code Snippet - High Contrast Light",
|
|
"description": "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-high-contrast-light",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-light-2026",
|
|
"type": "block",
|
|
"title": "Code Snippet - Light 2026",
|
|
"description": "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-light-2026",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-light-modern",
|
|
"type": "block",
|
|
"title": "Code Snippet - Light Modern",
|
|
"description": "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-light-modern",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-light-plus",
|
|
"type": "block",
|
|
"title": "Code Snippet - Light+",
|
|
"description": "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-light-plus",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-monokai",
|
|
"type": "block",
|
|
"title": "Code Snippet - Monokai",
|
|
"description": "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-monokai",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-solarized-light",
|
|
"type": "block",
|
|
"title": "Code Snippet - Solarized Light",
|
|
"description": "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-solarized-light",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-visual-studio-dark",
|
|
"type": "block",
|
|
"title": "Code Snippet - Visual Studio Dark",
|
|
"description": "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-visual-studio-dark",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png"
|
|
},
|
|
{
|
|
"name": "code-snippet-visual-studio-light",
|
|
"type": "block",
|
|
"title": "Code Snippet - Visual Studio Light",
|
|
"description": "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
|
|
"tags": [
|
|
"code",
|
|
"developer",
|
|
"showcase",
|
|
"vscode"
|
|
],
|
|
"href": "/catalog/blocks/code-snippet-visual-studio-light",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png"
|
|
},
|
|
{
|
|
"name": "code-typing",
|
|
"type": "block",
|
|
"title": "Code Typing",
|
|
"description": "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.",
|
|
"tags": [
|
|
"code",
|
|
"code-animation",
|
|
"typing",
|
|
"developer"
|
|
],
|
|
"href": "/catalog/blocks/code-typing",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.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": "editorial-flash-overlay",
|
|
"type": "block",
|
|
"title": "Editorial Flash Overlay",
|
|
"description": "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal",
|
|
"tags": [
|
|
"flash",
|
|
"editorial",
|
|
"social",
|
|
"light",
|
|
"transition",
|
|
"overlay",
|
|
"media-treatment-overlay"
|
|
],
|
|
"href": "/catalog/blocks/editorial-flash-overlay",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.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": "flowchart-vertical",
|
|
"type": "block",
|
|
"title": "Flowchart Vertical",
|
|
"description": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
|
|
"tags": [
|
|
"diagram",
|
|
"flowchart",
|
|
"interactive",
|
|
"portrait"
|
|
],
|
|
"href": "/catalog/blocks/flowchart-vertical",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png"
|
|
},
|
|
{
|
|
"name": "freeze-frame-dressing",
|
|
"type": "block",
|
|
"title": "Freeze-Frame Dressing",
|
|
"description": "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject",
|
|
"tags": [
|
|
"freeze-frame",
|
|
"cutout",
|
|
"scrapbook",
|
|
"paper",
|
|
"social",
|
|
"overlay",
|
|
"media-treatment-overlay"
|
|
],
|
|
"href": "/catalog/blocks/freeze-frame-dressing",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.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": "hw-arrow",
|
|
"type": "component",
|
|
"title": "Hand-Drawn Arrow",
|
|
"description": "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen",
|
|
"tags": [
|
|
"handwritten",
|
|
"annotation",
|
|
"arrow",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/components/hw-arrow",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.png"
|
|
},
|
|
{
|
|
"name": "hw-boil",
|
|
"type": "component",
|
|
"title": "Hand-Drawn Boil",
|
|
"description": "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator",
|
|
"tags": [
|
|
"handwritten",
|
|
"effect",
|
|
"annotation"
|
|
],
|
|
"href": "/catalog/components/hw-boil",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.png"
|
|
},
|
|
{
|
|
"name": "hw-box-label",
|
|
"type": "component",
|
|
"title": "Hand-Drawn Box Label",
|
|
"description": "Wobbled rounded rectangle draws around a region with a handwritten label above or centered",
|
|
"tags": [
|
|
"handwritten",
|
|
"annotation",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/components/hw-box-label",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.png"
|
|
},
|
|
{
|
|
"name": "hw-callout-circle",
|
|
"type": "component",
|
|
"title": "Scribble Callout Circle",
|
|
"description": "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label",
|
|
"tags": [
|
|
"handwritten",
|
|
"annotation",
|
|
"callout",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/components/hw-callout-circle",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.png"
|
|
},
|
|
{
|
|
"name": "hw-frame",
|
|
"type": "block",
|
|
"title": "Sketched Frame",
|
|
"description": "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)",
|
|
"tags": [
|
|
"handwritten",
|
|
"frame",
|
|
"media"
|
|
],
|
|
"href": "/catalog/blocks/hw-frame",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png"
|
|
},
|
|
{
|
|
"name": "hw-path-text",
|
|
"type": "block",
|
|
"title": "Text Along a Path",
|
|
"description": "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input",
|
|
"tags": [
|
|
"handwritten",
|
|
"typography",
|
|
"path",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/blocks/hw-path-text",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png"
|
|
},
|
|
{
|
|
"name": "hw-pipeline",
|
|
"type": "block",
|
|
"title": "Hand-Drawn Flowchart",
|
|
"description": "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list",
|
|
"tags": [
|
|
"handwritten",
|
|
"diagram",
|
|
"data-viz",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/blocks/hw-pipeline",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png"
|
|
},
|
|
{
|
|
"name": "hw-scribble-transition",
|
|
"type": "block",
|
|
"title": "Scribble Transition",
|
|
"description": "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears",
|
|
"tags": [
|
|
"handwritten",
|
|
"transition",
|
|
"wipe"
|
|
],
|
|
"href": "/catalog/blocks/hw-scribble-transition",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png"
|
|
},
|
|
{
|
|
"name": "hw-text-cloud",
|
|
"type": "block",
|
|
"title": "Speech Bubble",
|
|
"description": "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils",
|
|
"tags": [
|
|
"handwritten",
|
|
"speech-bubble",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/blocks/hw-text-cloud",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png"
|
|
},
|
|
{
|
|
"name": "hw-title",
|
|
"type": "block",
|
|
"title": "Handwritten Title",
|
|
"description": "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils",
|
|
"tags": [
|
|
"handwritten",
|
|
"typography",
|
|
"title-card",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/blocks/hw-title",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png"
|
|
},
|
|
{
|
|
"name": "hw-underline",
|
|
"type": "component",
|
|
"title": "Squiggle Marks",
|
|
"description": "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on",
|
|
"tags": [
|
|
"handwritten",
|
|
"annotation",
|
|
"text-treatment"
|
|
],
|
|
"href": "/catalog/components/hw-underline",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.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": "ios26-liquid-glass",
|
|
"type": "block",
|
|
"title": "iOS 26 Liquid Glass Home Screen",
|
|
"description": "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.",
|
|
"tags": [
|
|
"liquid-glass-html-in-canvas",
|
|
"webgpu",
|
|
"3d",
|
|
"iphone",
|
|
"ios26",
|
|
"notifications",
|
|
"gltf",
|
|
"html-in-canvas"
|
|
],
|
|
"href": "/catalog/blocks/ios26-liquid-glass",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.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": "liquid-glass-context-menu",
|
|
"type": "block",
|
|
"title": "Liquid Glass Context Menu",
|
|
"description": "Frosted glass context menu panel drifting over an aurora shader background",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"liquid-glass-html-in-canvas",
|
|
"webgpu"
|
|
],
|
|
"href": "/catalog/blocks/liquid-glass-context-menu",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png"
|
|
},
|
|
{
|
|
"name": "liquid-glass-media-controls",
|
|
"type": "block",
|
|
"title": "Liquid Glass Media Controls",
|
|
"description": "Frosted glass media control panels spreading over an aurora shader background",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"liquid-glass-html-in-canvas",
|
|
"webgpu"
|
|
],
|
|
"href": "/catalog/blocks/liquid-glass-media-controls",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png"
|
|
},
|
|
{
|
|
"name": "liquid-glass-notification",
|
|
"type": "block",
|
|
"title": "Liquid Glass Notification",
|
|
"description": "Frosted glass notification cards floating over an aurora shader background",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"liquid-glass-html-in-canvas",
|
|
"webgpu"
|
|
],
|
|
"href": "/catalog/blocks/liquid-glass-notification",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png"
|
|
},
|
|
{
|
|
"name": "liquid-glass-widgets",
|
|
"type": "block",
|
|
"title": "Liquid Glass Widgets",
|
|
"description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"liquid-glass-html-in-canvas",
|
|
"webgpu"
|
|
],
|
|
"href": "/catalog/blocks/liquid-glass-widgets",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.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": "lower-third-bild",
|
|
"type": "block",
|
|
"title": "Lower Third — BILD Style",
|
|
"description": "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.",
|
|
"tags": [
|
|
"broadcast",
|
|
"lower-third",
|
|
"news",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/blocks/lower-third-bild",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png"
|
|
},
|
|
{
|
|
"name": "lt-accent-underline",
|
|
"type": "block",
|
|
"title": "Lower Third — Accent Underline",
|
|
"description": "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/blocks/lt-accent-underline",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png"
|
|
},
|
|
{
|
|
"name": "lt-bold-block",
|
|
"type": "block",
|
|
"title": "Lower Third — Bold Block",
|
|
"description": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"bold"
|
|
],
|
|
"href": "/catalog/blocks/lt-bold-block",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png"
|
|
},
|
|
{
|
|
"name": "lt-clean-bar",
|
|
"type": "block",
|
|
"title": "Lower Third — Clean Bar",
|
|
"description": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview"
|
|
],
|
|
"href": "/catalog/blocks/lt-clean-bar",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png"
|
|
},
|
|
{
|
|
"name": "lt-color-block",
|
|
"type": "block",
|
|
"title": "Lower Third — Color Block",
|
|
"description": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"bold"
|
|
],
|
|
"href": "/catalog/blocks/lt-color-block",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png"
|
|
},
|
|
{
|
|
"name": "lt-dark-card",
|
|
"type": "block",
|
|
"title": "Lower Third — Dark Card",
|
|
"description": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"dark"
|
|
],
|
|
"href": "/catalog/blocks/lt-dark-card",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png"
|
|
},
|
|
{
|
|
"name": "lt-kicker-name",
|
|
"type": "block",
|
|
"title": "Lower Third — Kicker Name",
|
|
"description": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"bold"
|
|
],
|
|
"href": "/catalog/blocks/lt-kicker-name",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png"
|
|
},
|
|
{
|
|
"name": "lt-mask-reveal",
|
|
"type": "block",
|
|
"title": "Lower Third — Mask Reveal",
|
|
"description": "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"bold"
|
|
],
|
|
"href": "/catalog/blocks/lt-mask-reveal",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png"
|
|
},
|
|
{
|
|
"name": "lt-side-rule",
|
|
"type": "block",
|
|
"title": "Lower Third — Side Rule",
|
|
"description": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/blocks/lt-side-rule",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png"
|
|
},
|
|
{
|
|
"name": "lt-soft-pill",
|
|
"type": "block",
|
|
"title": "Lower Third — Soft Pill",
|
|
"description": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/blocks/lt-soft-pill",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png"
|
|
},
|
|
{
|
|
"name": "lt-stack-bars",
|
|
"type": "block",
|
|
"title": "Lower Third — Stack Bars",
|
|
"description": "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"podcast",
|
|
"interview",
|
|
"bold"
|
|
],
|
|
"href": "/catalog/blocks/lt-stack-bars",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.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": "macos-tahoe-liquid-glass",
|
|
"type": "block",
|
|
"title": "macOS Tahoe Liquid Glass Desktop",
|
|
"description": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"3d",
|
|
"macos",
|
|
"tahoe",
|
|
"gltf"
|
|
],
|
|
"href": "/catalog/blocks/macos-tahoe-liquid-glass",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
|
|
},
|
|
{
|
|
"name": "mk-background",
|
|
"type": "block",
|
|
"title": "Minimal Gradient Background",
|
|
"description": "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode",
|
|
"tags": [
|
|
"background",
|
|
"gradient",
|
|
"minimal",
|
|
"professional",
|
|
"presentation"
|
|
],
|
|
"href": "/catalog/blocks/mk-background",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png"
|
|
},
|
|
{
|
|
"name": "mk-callout-highlight",
|
|
"type": "block",
|
|
"title": "Word-Sweep Highlight",
|
|
"description": "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover",
|
|
"tags": [
|
|
"typography",
|
|
"karaoke",
|
|
"captions",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/blocks/mk-callout-highlight",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png"
|
|
},
|
|
{
|
|
"name": "mk-clone-wall-transition",
|
|
"type": "block",
|
|
"title": "Text Clone Wall Transition",
|
|
"description": "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered",
|
|
"tags": [
|
|
"transition",
|
|
"typography",
|
|
"wipe"
|
|
],
|
|
"href": "/catalog/blocks/mk-clone-wall-transition",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png"
|
|
},
|
|
{
|
|
"name": "mk-emphasis-type",
|
|
"type": "component",
|
|
"title": "Background Emphasis Type",
|
|
"description": "Oversized low-contrast background word drifting slowly behind the subject — typography as texture",
|
|
"tags": [
|
|
"typography",
|
|
"text-treatment",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/components/mk-emphasis-type",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.png"
|
|
},
|
|
{
|
|
"name": "mk-line-graph",
|
|
"type": "block",
|
|
"title": "Minimal Line Graph",
|
|
"description": "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend",
|
|
"tags": [
|
|
"data-viz",
|
|
"chart",
|
|
"graph",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/blocks/mk-line-graph",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png"
|
|
},
|
|
{
|
|
"name": "mk-placeholder-grid",
|
|
"type": "block",
|
|
"title": "Rounded Media Grid",
|
|
"description": "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle",
|
|
"tags": [
|
|
"placeholder",
|
|
"media",
|
|
"grid",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/blocks/mk-placeholder-grid",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png"
|
|
},
|
|
{
|
|
"name": "mk-progress-stat",
|
|
"type": "block",
|
|
"title": "Count-Up Stat Card",
|
|
"description": "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes",
|
|
"tags": [
|
|
"data-viz",
|
|
"stat",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/blocks/mk-progress-stat",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png"
|
|
},
|
|
{
|
|
"name": "mk-specs-list",
|
|
"type": "block",
|
|
"title": "Specs Checklist",
|
|
"description": "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes",
|
|
"tags": [
|
|
"data-viz",
|
|
"list",
|
|
"minimal",
|
|
"professional"
|
|
],
|
|
"href": "/catalog/blocks/mk-specs-list",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png"
|
|
},
|
|
{
|
|
"name": "mk-usage-arc",
|
|
"type": "component",
|
|
"title": "Hairline Arc Gauge",
|
|
"description": "Thin circular gauge that draws on while its percentage counts up; one helper call drives both",
|
|
"tags": [
|
|
"data-viz",
|
|
"gauge",
|
|
"minimal"
|
|
],
|
|
"href": "/catalog/components/mk-usage-arc",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png"
|
|
},
|
|
{
|
|
"name": "morph-text",
|
|
"type": "component",
|
|
"title": "Morph Text",
|
|
"description": "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect",
|
|
"tags": [
|
|
"text",
|
|
"text-effect",
|
|
"typography",
|
|
"morph",
|
|
"gooey",
|
|
"kinetic",
|
|
"animation"
|
|
],
|
|
"href": "/catalog/components/morph-text"
|
|
},
|
|
{
|
|
"name": "motion-blur",
|
|
"type": "component",
|
|
"title": "Motion Blur",
|
|
"description": "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed",
|
|
"tags": [
|
|
"effect",
|
|
"motion-blur",
|
|
"velocity",
|
|
"animation",
|
|
"physics"
|
|
],
|
|
"href": "/catalog/components/motion-blur",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png"
|
|
},
|
|
{
|
|
"name": "news-ticker",
|
|
"type": "block",
|
|
"title": "News Ticker",
|
|
"description": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
|
|
"tags": [
|
|
"lower-third",
|
|
"overlay",
|
|
"news",
|
|
"ticker"
|
|
],
|
|
"href": "/catalog/blocks/news-ticker",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.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": "organic-light-leak-overlay",
|
|
"type": "block",
|
|
"title": "Organic Light Leak Overlay",
|
|
"description": "Finite CSS light-leak overlay for memory beats and motivated transitions",
|
|
"tags": [
|
|
"light-leak",
|
|
"film",
|
|
"memory",
|
|
"transition",
|
|
"overlay",
|
|
"media-treatment-overlay"
|
|
],
|
|
"href": "/catalog/blocks/organic-light-leak-overlay",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png"
|
|
},
|
|
{
|
|
"name": "parallax-unzoom",
|
|
"type": "component",
|
|
"title": "Parallax Unzoom",
|
|
"description": "Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)",
|
|
"tags": [
|
|
"transition",
|
|
"reveal",
|
|
"unzoom",
|
|
"parallax",
|
|
"grid",
|
|
"hero"
|
|
],
|
|
"href": "/catalog/components/parallax-unzoom",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png"
|
|
},
|
|
{
|
|
"name": "parallax-zoom",
|
|
"type": "component",
|
|
"title": "Parallax Zoom",
|
|
"description": "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition",
|
|
"tags": [
|
|
"transition",
|
|
"zoom",
|
|
"parallax",
|
|
"grid",
|
|
"hero"
|
|
],
|
|
"href": "/catalog/components/parallax-zoom",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.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": "spain-map",
|
|
"type": "block",
|
|
"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"
|
|
],
|
|
"href": "/catalog/blocks/spain-map",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.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": "texture-mask-text",
|
|
"type": "component",
|
|
"title": "Texture Mask Text",
|
|
"description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
|
|
"tags": [
|
|
"text",
|
|
"text-effect",
|
|
"effect",
|
|
"texture",
|
|
"mask"
|
|
],
|
|
"href": "/catalog/components/texture-mask-text",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.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": "us-map",
|
|
"type": "block",
|
|
"title": "US Map",
|
|
"description": "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP",
|
|
"tags": [
|
|
"data",
|
|
"map",
|
|
"geography",
|
|
"usa",
|
|
"choropleth"
|
|
],
|
|
"href": "/catalog/blocks/us-map",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png"
|
|
},
|
|
{
|
|
"name": "us-map-bubble",
|
|
"type": "block",
|
|
"title": "US Bubble Map",
|
|
"description": "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map",
|
|
"tags": [
|
|
"data",
|
|
"map",
|
|
"geography",
|
|
"usa",
|
|
"bubble",
|
|
"cities"
|
|
],
|
|
"href": "/catalog/blocks/us-map-bubble",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png"
|
|
},
|
|
{
|
|
"name": "us-map-flow",
|
|
"type": "block",
|
|
"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"
|
|
],
|
|
"href": "/catalog/blocks/us-map-flow",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png"
|
|
},
|
|
{
|
|
"name": "us-map-hex",
|
|
"type": "block",
|
|
"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"
|
|
],
|
|
"href": "/catalog/blocks/us-map-hex",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png"
|
|
},
|
|
{
|
|
"name": "vfx-iphone-device",
|
|
"type": "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° turntable.",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"3d",
|
|
"device",
|
|
"iphone",
|
|
"macbook",
|
|
"gltf"
|
|
],
|
|
"href": "/catalog/blocks/vfx-iphone-device",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png"
|
|
},
|
|
{
|
|
"name": "vfx-liquid-background",
|
|
"type": "block",
|
|
"title": "Liquid Background",
|
|
"description": "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"liquid",
|
|
"webgl",
|
|
"displacement",
|
|
"background"
|
|
],
|
|
"href": "/catalog/blocks/vfx-liquid-background",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
|
|
},
|
|
{
|
|
"name": "vfx-liquid-glass",
|
|
"type": "block",
|
|
"title": "Liquid Glass",
|
|
"description": "VFX composition block",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"webgl"
|
|
],
|
|
"href": "/catalog/blocks/vfx-liquid-glass",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png"
|
|
},
|
|
{
|
|
"name": "vfx-magnetic",
|
|
"type": "block",
|
|
"title": "Magnetic",
|
|
"description": "VFX composition block",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"webgl"
|
|
],
|
|
"href": "/catalog/blocks/vfx-magnetic",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png"
|
|
},
|
|
{
|
|
"name": "vfx-portal",
|
|
"type": "block",
|
|
"title": "Portal",
|
|
"description": "VFX composition block",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"webgl"
|
|
],
|
|
"href": "/catalog/blocks/vfx-portal",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png"
|
|
},
|
|
{
|
|
"name": "vfx-shatter",
|
|
"type": "block",
|
|
"title": "Shatter",
|
|
"description": "VFX composition block",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"webgl"
|
|
],
|
|
"href": "/catalog/blocks/vfx-shatter",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png"
|
|
},
|
|
{
|
|
"name": "vfx-text-cursor",
|
|
"type": "block",
|
|
"title": "VFX Text Cursor",
|
|
"description": "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.",
|
|
"tags": [
|
|
"html-in-canvas",
|
|
"text",
|
|
"shader",
|
|
"cursor",
|
|
"chromatic"
|
|
],
|
|
"href": "/catalog/blocks/vfx-text-cursor",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
|
|
},
|
|
{
|
|
"name": "vignette",
|
|
"type": "component",
|
|
"title": "Vignette",
|
|
"description": "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center",
|
|
"tags": [
|
|
"vignette",
|
|
"overlay",
|
|
"cinematic",
|
|
"effect"
|
|
],
|
|
"href": "/catalog/components/vignette",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.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": "world-map",
|
|
"type": "block",
|
|
"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"
|
|
],
|
|
"href": "/catalog/blocks/world-map",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.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-camera-move",
|
|
"type": "component",
|
|
"title": "Camera Punch-In",
|
|
"description": "Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay",
|
|
"tags": [
|
|
"camera",
|
|
"zoom",
|
|
"effect",
|
|
"creator"
|
|
],
|
|
"href": "/catalog/components/yt-camera-move",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.png"
|
|
},
|
|
{
|
|
"name": "yt-circle-pointer",
|
|
"type": "component",
|
|
"title": "Pointer Circle + Countdown",
|
|
"description": "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick",
|
|
"tags": [
|
|
"annotation",
|
|
"countdown",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/components/yt-circle-pointer",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.png"
|
|
},
|
|
{
|
|
"name": "yt-comment-card",
|
|
"type": "block",
|
|
"title": "Comment Cards",
|
|
"description": "Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips",
|
|
"tags": [
|
|
"social",
|
|
"comments",
|
|
"creator",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/blocks/yt-comment-card",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.png"
|
|
},
|
|
{
|
|
"name": "yt-feather-highlight",
|
|
"type": "component",
|
|
"title": "Feathered Spotlight",
|
|
"description": "Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets",
|
|
"tags": [
|
|
"highlight",
|
|
"spotlight",
|
|
"effect",
|
|
"overlay"
|
|
],
|
|
"href": "/catalog/components/yt-feather-highlight",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.png"
|
|
},
|
|
{
|
|
"name": "yt-lcd-background",
|
|
"type": "block",
|
|
"title": "Scanline Board Background",
|
|
"description": "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title",
|
|
"tags": [
|
|
"background",
|
|
"texture",
|
|
"creator"
|
|
],
|
|
"href": "/catalog/blocks/yt-lcd-background",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png"
|
|
},
|
|
{
|
|
"name": "yt-logo-intro",
|
|
"type": "block",
|
|
"title": "Logo Intro Sequence",
|
|
"description": "Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion",
|
|
"tags": [
|
|
"logo",
|
|
"intro",
|
|
"creator"
|
|
],
|
|
"href": "/catalog/blocks/yt-logo-intro",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.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"
|
|
},
|
|
{
|
|
"name": "yt-prism-title",
|
|
"type": "block",
|
|
"title": "Chromatic Fringe Title",
|
|
"description": "Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift",
|
|
"tags": [
|
|
"typography",
|
|
"title-card",
|
|
"creator"
|
|
],
|
|
"href": "/catalog/blocks/yt-prism-title",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.png"
|
|
},
|
|
{
|
|
"name": "yt-screen-warp",
|
|
"type": "component",
|
|
"title": "On-Screen Display Effect",
|
|
"description": "Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display",
|
|
"tags": [
|
|
"effect",
|
|
"overlay",
|
|
"texture"
|
|
],
|
|
"href": "/catalog/components/yt-screen-warp",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.png"
|
|
},
|
|
{
|
|
"name": "yt-vertical-fill",
|
|
"type": "block",
|
|
"title": "Vertical Media Filler",
|
|
"description": "Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)",
|
|
"tags": [
|
|
"placeholder",
|
|
"vertical",
|
|
"media"
|
|
],
|
|
"href": "/catalog/blocks/yt-vertical-fill",
|
|
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png"
|
|
}
|
|
]
|