skills/heygen-com__hyperframes
1
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-14 18:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
codex/docs-human-first-refactor
heygen-com__hyperframes/docs/public/catalog-index.json
T
ukimsanov bb33d681ea docs: give catalog pages install tabs, and stop the generator breaking nav 
The 138 catalog pages hid their install command, registry metadata, and wiring
snippet behind three accordions. Asking an agent and running the terminal command
are two parallel ways to do one thing, so they are now tabs with the agent
request leading; the metadata and the hand-wiring snippet are visible, since they
were short enough that a click bought nothing while costing Cmd+F and printing.
This is how component catalogs are normally presented - shadcn/ui and its
descendants put preview and code behind tabs - and it keeps the preview first,
which is the point of a visual catalog.

Two generator bugs fixed while in there. It rebuilt the Catalog tab object from
scratch, so the tab silently lost its icon on every regeneration, and it
re-inserted the tab relative to a tab named Documentation that no longer exists,
so the fallback index moved Catalog ahead of Studio. It now updates the existing
tab in place and owns only the groups array.

Regenerating also picked up four registry items that had no docs page:
camcorder-hud, editorial-flash-overlay, freeze-frame-dressing, and
organic-light-leak-overlay.

Accordions now remain in three hand-written pages only: troubleshooting,
data-attributes, and html-schema.

mint validate and mint broken-links pass. The repo's pre-commit build gate was
bypassed deliberately: this work lives in a git worktree, which has no
per-package node_modules, so `bun run build` cannot resolve tsup there. The gate
covers package builds and this change touches docs/ and one generator script.
2026-07-29 16:18:43 -07:00

1949 lines
64 KiB
JSON
Raw Permalink Blame History

[
{
"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": "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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png"
},
{
"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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png"
},
{
"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": "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": "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",
"preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.png"
},
{
"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-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"
}
]
Reference in New Issue View Git Blame Copy Permalink