diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index 0021f80a7..aec86703e 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -1,13 +1,13 @@
 ---
-title: "Apple Terminal Basic"
-description: "Apple Terminal Basic profile with white background and black text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Basic"
+description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Basic
+# Code Snippet - Apple Terminal Basic
 
-macOS Terminal.app window in the built-in Basic profile — clean white background with black monospace text and a solid black cursor. Per-character typing animation with output reveal.
+Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png" autoPlay muted loop playsInline />
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-basic
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -46,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-basic"
-  data-composition-src="compositions/code-snippet-apple-terminal-basic.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-basic" data-composition-src="compositions/code-snippet-apple-terminal-basic.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Basic profile — white background, black text, solid cursor
-- macOS window chrome with traffic light buttons (close, minimize, fullscreen) and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
index 98e7eaf68..d8172b3df 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -1,17 +1,16 @@
 ---
-title: "Apple Terminal Clear Dark"
-description: "Apple Terminal Clear Dark profile with semi-transparent dark background and white text, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Clear Dark
+# Code Snippet - Apple Terminal Clear Dark
 
-macOS Terminal.app window in the built-in Clear Dark profile — translucent black background with white text and a grey cursor. Per-character typing animation with output reveal.
+Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png" autoPlay muted loop playsInline />
 
-
 ## Install
 
 <CodeGroup>
@@ -22,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-clear-dark
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-clear-dark"
-  data-composition-src="compositions/code-snippet-apple-terminal-clear-dark.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-clear-dark" data-composition-src="compositions/code-snippet-apple-terminal-clear-dark.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Clear Dark profile — semi-transparent black background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
index 7654fe4e8..650748093 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -1,13 +1,13 @@
 ---
-title: "Apple Terminal Clear Light"
-description: "Apple Terminal Clear Light profile with semi-transparent white background and black text, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Clear Light
+# Code Snippet - Apple Terminal Clear Light
 
-macOS Terminal.app window in the built-in Clear Light profile — translucent white background with black text and a grey cursor. Per-character typing animation with output reveal.
+Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png" autoPlay muted loop playsInline />
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-clear-light
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -46,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-clear-light"
-  data-composition-src="compositions/code-snippet-apple-terminal-clear-light.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-clear-light" data-composition-src="compositions/code-snippet-apple-terminal-clear-light.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Clear Light profile — semi-transparent white background with black text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
index d64bb7e5b..eb034579f 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -1,13 +1,13 @@
 ---
-title: "Apple Terminal Grass"
-description: "Apple Terminal Grass profile with black background and bright green text, per-character typing animation."
+title: "Code Snippet - Apple Terminal Grass"
+description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
 ---
 
-# Apple Terminal Grass
+# Code Snippet - Apple Terminal Grass
 
-macOS Terminal.app window in the built-in Grass profile — pitch-black background with pure green text and a matching cursor. Classic terminal aesthetic with per-character typing animation.
+Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png" autoPlay muted loop playsInline />
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-grass
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -46,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-grass"
-  data-composition-src="compositions/code-snippet-apple-terminal-grass.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-grass" data-composition-src="compositions/code-snippet-apple-terminal-grass.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Grass profile — black background with #00C100 green text
-- macOS window chrome with green-accented title bar and traffic light buttons
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
index f9c3340a9..98ecb0f66 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -1,17 +1,16 @@
 ---
-title: "Apple Terminal Homebrew"
-description: "Apple Terminal Homebrew profile with black background, bright green text and lime cursor, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Homebrew
+# Code Snippet - Apple Terminal Homebrew
 
-macOS Terminal.app window in the built-in Homebrew profile — black background with vivid green text and a lime `#48F800` cursor. One of the most beloved classic terminal looks.
+Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png" autoPlay muted loop playsInline />
 
-
 ## Install
 
 <CodeGroup>
@@ -22,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-homebrew
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-homebrew"
-  data-composition-src="compositions/code-snippet-apple-terminal-homebrew.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-homebrew" data-composition-src="compositions/code-snippet-apple-terminal-homebrew.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Homebrew profile — black background with #00CF00 text and #48F800 cursor
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
index 11c96f415..48004aba9 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -1,13 +1,13 @@
 ---
-title: "Apple Terminal Man Page"
-description: "Apple Terminal Man Page profile with pale yellow background and black text, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Man Page
+# Code Snippet - Apple Terminal Man Page
 
-macOS Terminal.app window in the built-in Man Page profile — pale yellow `#FEF49C` background with black text. Evoking classic Unix manual pages, with per-character typing animation.
+Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png" autoPlay muted loop playsInline />
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-man-page
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -46,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-man-page"
-  data-composition-src="compositions/code-snippet-apple-terminal-man-page.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-man-page" data-composition-src="compositions/code-snippet-apple-terminal-man-page.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Man Page profile — pale yellow background with black text
-- Shows a realistic man page output structure with sections and indented content
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
index 9a7a0adba..5d95b0915 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -1,17 +1,16 @@
 ---
-title: "Apple Terminal Novel"
-description: "Apple Terminal Novel profile with warm parchment background and dark brown text, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Novel
+# Code Snippet - Apple Terminal Novel
 
-macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC18A` background with deep brown text. A distinctive earthy look, with per-character typing animation.
+Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png" autoPlay muted loop playsInline />
 
-
 ## Install
 
 <CodeGroup>
@@ -22,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-novel
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-novel"
-  data-composition-src="compositions/code-snippet-apple-terminal-novel.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-novel" data-composition-src="compositions/code-snippet-apple-terminal-novel.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Novel profile — warm parchment background with #3E2900 dark brown text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
index d519bd4c9..4ffa4396f 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -1,17 +1,16 @@
 ---
-title: "Apple Terminal Ocean"
-description: "Apple Terminal Ocean profile with deep blue background and white text, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Ocean
+# Code Snippet - Apple Terminal Ocean
 
-macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue background with crisp white text. Bold and distinctive, with per-character typing animation.
+Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png" autoPlay muted loop playsInline />
 
-
 ## Install
 
 <CodeGroup>
@@ -22,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-ocean
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-ocean"
-  data-composition-src="compositions/code-snippet-apple-terminal-ocean.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-ocean" data-composition-src="compositions/code-snippet-apple-terminal-ocean.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Ocean profile — #224FBE blue background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index e8441e6c5..dcacf83e7 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -1,17 +1,16 @@
 ---
-title: "Apple Terminal Pro"
-description: "Apple Terminal Pro profile with black background, grey text and lime green cursor, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Pro
+# Code Snippet - Apple Terminal Pro
 
-macOS Terminal.app window in the built-in Pro profile — pure black background with grey `#BBBBBB` text and a distinctive `#88FF67` lime cursor. Hacker aesthetic with per-character typing animation.
+Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png" autoPlay muted loop playsInline />
 
-
 ## Install
 
 <CodeGroup>
@@ -22,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-pro
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-pro"
-  data-composition-src="compositions/code-snippet-apple-terminal-pro.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-pro" data-composition-src="compositions/code-snippet-apple-terminal-pro.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Pro profile — black background, #BBBBBB grey text, #88FF67 lime cursor
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
index c740c6e29..971931abe 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -1,17 +1,16 @@
 ---
-title: "Apple Terminal Red Sands"
-description: "Apple Terminal Red Sands profile with deep red background and sandy text, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Red Sands
+# Code Snippet - Apple Terminal Red Sands
 
-macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7B140E` background with warm sandy `#FFE1B9` text. A bold, dramatic look with per-character typing animation.
+Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png" autoPlay muted loop playsInline />
 
-
 ## Install
 
 <CodeGroup>
@@ -22,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-red-sands
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-red-sands"
-  data-composition-src="compositions/code-snippet-apple-terminal-red-sands.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-red-sands" data-composition-src="compositions/code-snippet-apple-terminal-red-sands.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Red Sands profile — #7B140E red background with #FFE1B9 sandy text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
index 810f2f670..dbb0b1912 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -1,17 +1,16 @@
 ---
-title: "Apple Terminal Silver Aerogel"
-description: "Apple Terminal Silver Aerogel profile with dark grey background and white text, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Silver Aerogel
+# Code Snippet - Apple Terminal Silver Aerogel
 
-macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `#3D3D3D` background with clean white text. A professional neutral look with per-character typing animation.
+Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png" autoPlay muted loop playsInline />
 
-
 ## Install
 
 <CodeGroup>
@@ -22,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-silver-aerogel
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-silver-aerogel"
-  data-composition-src="compositions/code-snippet-apple-terminal-silver-aerogel.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-silver-aerogel" data-composition-src="compositions/code-snippet-apple-terminal-silver-aerogel.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Silver Aerogel profile — #3D3D3D dark grey background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
index 30b81485c..dbae00915 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -1,17 +1,16 @@
 ---
-title: "Apple Terminal Solid Colors"
-description: "Apple Terminal Solid Colors profile with deep purple background and white text, per-character typing animation."
+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."
 ---
 
-# Apple Terminal Solid Colors
+# Code Snippet - Apple Terminal Solid Colors
 
-macOS Terminal.app window in the built-in Solid Colors profile — vivid deep purple `#4C0099` background with white text. Eye-catching and vibrant, with per-character typing animation.
+Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.
 
-`code` `developer` `showcase` `terminal` `apple`
+`code` `developer` `showcase` `terminal` `apple` `apple-terminal`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png" autoPlay muted loop playsInline />
 
-
 ## Install
 
 <CodeGroup>
@@ -22,12 +21,6 @@ npx hyperframes add code-snippet-apple-terminal-solid-colors
 
 </CodeGroup>
 
-Install all Apple Terminal themes at once:
-
-```bash Terminal
-npx hyperframes add apple-terminal
-```
-
 ## Details
 
 | Property | Value |
@@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-apple-terminal-solid-colors"
-  data-composition-src="compositions/code-snippet-apple-terminal-solid-colors.html"
-  data-start="0"
-  data-duration="12"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-apple-terminal-solid-colors" data-composition-src="compositions/code-snippet-apple-terminal-solid-colors.html" data-start="0" data-duration="12" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Faithful recreation of macOS Terminal.app Solid Colors profile — #4C0099 deep purple background with white text
-- macOS window chrome with traffic light buttons and centered title bar
-- Per-character GSAP typing animation — command types out character by character
-- Output lines reveal sequentially after command executes
-- Cursor blinks three times at the end then holds steady
-- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index cd86c9756..f742c1c3b 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Dark 2026"
-description: "The newest VS Code dark theme with refined token scopes and updated palette."
+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."
 ---
 
-# Dark 2026
+# Code Snippet - Dark 2026
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-dark-2026
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-dark-2026"
-  data-composition-src="compositions/code-snippet-dark-2026.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-dark-2026" data-composition-src="compositions/code-snippet-dark-2026.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index 8cb547804..7ed4db905 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Dark Modern"
-description: "The default dark theme — clean and contemporary with comfortable contrast."
+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."
 ---
 
-# Dark Modern
+# Code Snippet - Dark Modern
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-dark-modern
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-dark-modern"
-  data-composition-src="compositions/code-snippet-dark-modern.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-dark-modern" data-composition-src="compositions/code-snippet-dark-modern.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-dark-plus.mdx b/docs/catalog/blocks/code-snippet-dark-plus.mdx
index defe289c1..e49334724 100644
--- a/docs/catalog/blocks/code-snippet-dark-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-plus.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Dark+"
-description: "Classic dark theme with enhanced syntax highlighting for popular languages."
+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."
 ---
 
-# Dark+
+# Code Snippet - Dark+
 
 VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-dark-plus
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-dark-plus"
-  data-composition-src="compositions/code-snippet-dark-plus.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-dark-plus" data-composition-src="compositions/code-snippet-dark-plus.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
index 43bfada32..e1ebecfae 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
@@ -1,9 +1,9 @@
 ---
-title: "High Contrast Light"
-description: "Maximum contrast light theme for accessibility."
+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."
 ---
 
-# High Contrast Light
+# Code Snippet - High Contrast Light
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-high-contrast-light
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-high-contrast-light"
-  data-composition-src="compositions/code-snippet-high-contrast-light.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-high-contrast-light" data-composition-src="compositions/code-snippet-high-contrast-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-high-contrast.mdx b/docs/catalog/blocks/code-snippet-high-contrast.mdx
index 9daa00450..5ba75157c 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast.mdx
@@ -1,9 +1,9 @@
 ---
-title: "High Contrast"
-description: "Maximum contrast dark theme for accessibility."
+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."
 ---
 
-# High Contrast
+# Code Snippet - High Contrast
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-high-contrast
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-high-contrast"
-  data-composition-src="compositions/code-snippet-high-contrast.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-high-contrast" data-composition-src="compositions/code-snippet-high-contrast.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-light-2026.mdx b/docs/catalog/blocks/code-snippet-light-2026.mdx
index 62265a255..10d9d23ea 100644
--- a/docs/catalog/blocks/code-snippet-light-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-light-2026.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Light 2026"
-description: "The newest VS Code light theme with refined token scopes and updated palette."
+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."
 ---
 
-# Light 2026
+# Code Snippet - Light 2026
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-light-2026
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-light-2026"
-  data-composition-src="compositions/code-snippet-light-2026.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-light-2026" data-composition-src="compositions/code-snippet-light-2026.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-light-modern.mdx b/docs/catalog/blocks/code-snippet-light-modern.mdx
index 65a53d6e6..90deef346 100644
--- a/docs/catalog/blocks/code-snippet-light-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-light-modern.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Light Modern"
-description: "The default light theme — a fresh, modern take on the classic VS light experience."
+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."
 ---
 
-# Light Modern
+# Code Snippet - Light Modern
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-light-modern
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-light-modern"
-  data-composition-src="compositions/code-snippet-light-modern.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-light-modern" data-composition-src="compositions/code-snippet-light-modern.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-light-plus.mdx b/docs/catalog/blocks/code-snippet-light-plus.mdx
index f351c45a9..ecdb44405 100644
--- a/docs/catalog/blocks/code-snippet-light-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-light-plus.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Light+"
-description: "Classic light theme with enhanced syntax highlighting for popular languages."
+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."
 ---
 
-# Light+
+# Code Snippet - Light+
 
 VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-light-plus
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-light-plus"
-  data-composition-src="compositions/code-snippet-light-plus.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-light-plus" data-composition-src="compositions/code-snippet-light-plus.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-monokai.mdx b/docs/catalog/blocks/code-snippet-monokai.mdx
index a1511f0f3..402250689 100644
--- a/docs/catalog/blocks/code-snippet-monokai.mdx
+++ b/docs/catalog/blocks/code-snippet-monokai.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Monokai"
-description: "The iconic warm-toned dark theme beloved by developers worldwide."
+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."
 ---
 
-# Monokai
+# Code Snippet - Monokai
 
 VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-monokai
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-monokai"
-  data-composition-src="compositions/code-snippet-monokai.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-monokai" data-composition-src="compositions/code-snippet-monokai.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-solarized-light.mdx b/docs/catalog/blocks/code-snippet-solarized-light.mdx
index 914b784b6..051c020ed 100644
--- a/docs/catalog/blocks/code-snippet-solarized-light.mdx
+++ b/docs/catalog/blocks/code-snippet-solarized-light.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Solarized Light"
-description: "Ethan Schoonover's precision-engineered light color scheme."
+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."
 ---
 
-# Solarized Light
+# Code Snippet - Solarized Light
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-solarized-light
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-solarized-light"
-  data-composition-src="compositions/code-snippet-solarized-light.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-solarized-light" data-composition-src="compositions/code-snippet-solarized-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
index 494c2f853..fd5902c76 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Visual Studio Dark"
-description: "The traditional Visual Studio dark color scheme."
+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."
 ---
 
-# Visual Studio Dark
+# Code Snippet - Visual Studio Dark
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-visual-studio-dark
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-visual-studio-dark"
-  data-composition-src="compositions/code-snippet-visual-studio-dark.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-visual-studio-dark" data-composition-src="compositions/code-snippet-visual-studio-dark.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
index 7f9060917..2572facc7 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
@@ -1,9 +1,9 @@
 ---
-title: "Visual Studio Light"
-description: "The traditional Visual Studio light color scheme."
+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."
 ---
 
-# Visual Studio Light
+# Code Snippet - Visual Studio Light
 
 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.
 
@@ -21,12 +21,6 @@ npx hyperframes add code-snippet-visual-studio-light
 
 </CodeGroup>
 
-Install all code snippet themes at once:
-
-```bash Terminal
-npx hyperframes add code
-```
-
 ## Details
 
 | Property | Value |
@@ -47,21 +41,5 @@ npx hyperframes add code
 After installing, add the block to your host composition:
 
 ```html
-<div
-  data-composition-id="code-snippet-visual-studio-light"
-  data-composition-src="compositions/code-snippet-visual-studio-light.html"
-  data-start="0"
-  data-duration="11"
-  data-track-index="1"
-  data-width="1920"
-  data-height="1080"
-></div>
+<div data-composition-id="code-snippet-visual-studio-light" data-composition-src="compositions/code-snippet-visual-studio-light.html" data-start="0" data-duration="11" data-track-index="1" data-width="1920" data-height="1080"></div>
 ```
-
-## Features
-
-- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
-- Per-character typing animation with cursor tracking and active line highlight
-- Colors sourced from official `microsoft/vscode` built-in theme JSON
-- 3D perspective tilt at the end of the typing sequence
-- Terminal panel with mock test output
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
new file mode 100644
index 000000000..b6102cca9
--- /dev/null
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -0,0 +1,44 @@
+---
+title: "Flowchart Vertical"
+description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
+---
+
+# Flowchart Vertical
+
+Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction
+
+`diagram` `flowchart` `interactive` `portrait`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add flowchart-vertical
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1440×2560 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `flowchart-vertical.html` | `compositions/flowchart-vertical.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="flowchart-vertical" data-composition-src="compositions/flowchart-vertical.html" data-start="0" data-duration="12" data-track-index="1" data-width="1440" data-height="2560"></div>
+```
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index 56a5979e7..469e910b3 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -40,6 +40,32 @@ npx hyperframes add ios26-liquid-glass
 | `ios26-liquid-glass.html` | `compositions/ios26-liquid-glass.html` | hyperframes:composition |
 | `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
 | `lib/liquid-glass.iife.js` | `lib/liquid-glass.iife.js` | hyperframes:asset |
+| `assets/icons/weather.jpg` | `assets/icons/weather.jpg` | hyperframes:asset |
+| `assets/icons/stocks.jpg` | `assets/icons/stocks.jpg` | hyperframes:asset |
+| `assets/icons/find-my.jpg` | `assets/icons/find-my.jpg` | hyperframes:asset |
+| `assets/icons/home.jpg` | `assets/icons/home.jpg` | hyperframes:asset |
+| `assets/icons/books.jpg` | `assets/icons/books.jpg` | hyperframes:asset |
+| `assets/icons/itunes-store.jpg` | `assets/icons/itunes-store.jpg` | hyperframes:asset |
+| `assets/icons/fitness.jpg` | `assets/icons/fitness.jpg` | hyperframes:asset |
+| `assets/icons/watch.jpg` | `assets/icons/watch.jpg` | hyperframes:asset |
+| `assets/icons/contacts.jpg` | `assets/icons/contacts.jpg` | hyperframes:asset |
+| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
+| `assets/icons/translate.jpg` | `assets/icons/translate.jpg` | hyperframes:asset |
+| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
+| `assets/icons/chatgpt.jpg` | `assets/icons/chatgpt.jpg` | hyperframes:asset |
+| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
+| `assets/icons/instagram.jpg` | `assets/icons/instagram.jpg` | hyperframes:asset |
+| `assets/icons/x.jpg` | `assets/icons/x.jpg` | hyperframes:asset |
+| `assets/icons/proton-mail.jpg` | `assets/icons/proton-mail.jpg` | hyperframes:asset |
+| `assets/icons/gmail.jpg` | `assets/icons/gmail.jpg` | hyperframes:asset |
+| `assets/icons/revolut.jpg` | `assets/icons/revolut.jpg` | hyperframes:asset |
+| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
+| `assets/icons/phone.jpg` | `assets/icons/phone.jpg` | hyperframes:asset |
+| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
+| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
+| `assets/icons/whatsapp.jpg` | `assets/icons/whatsapp.jpg` | hyperframes:asset |
+| `assets/icons/notify-messages.jpg` | `assets/icons/notify-messages.jpg` | hyperframes:asset |
+| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
 
 ## Usage
 
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index d29109501..39c4ba938 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -38,6 +38,7 @@ npx hyperframes add liquid-glass-notification
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
+| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
 
 ## Usage
 
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index 19d7ccc10..3b2558a05 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -38,6 +38,7 @@ npx hyperframes add liquid-glass-widgets
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-widgets.html` | `compositions/liquid-glass-widgets.html` | hyperframes:composition |
+| `assets/hyperframes-logo-dark.svg` | `compositions/assets/hyperframes-logo-dark.svg` | registry:asset |
 
 ## Usage
 
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
new file mode 100644
index 000000000..2bc53c104
--- /dev/null
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -0,0 +1,46 @@
+---
+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."
+---
+
+# Lower Third — BILD Style
+
+News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.
+
+`broadcast` `lower-third` `news` `overlay`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add lower-third-bild
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `index.html` | `compositions/lower-third-bild.html` | hyperframes:composition |
+| `assets/fonts/BarlowCondensed-Bold.woff2` | `compositions/assets/fonts/BarlowCondensed-Bold.woff2` | hyperframes:asset |
+| `assets/fonts/BarlowCondensed-ExtraBold.woff2` | `compositions/assets/fonts/BarlowCondensed-ExtraBold.woff2` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="lower-third-bild" data-composition-src="compositions/lower-third-bild.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index e878221c2..b1b715f2b 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -39,7 +39,23 @@ npx hyperframes add macos-tahoe-liquid-glass
 | --- | --- | --- |
 | `macos-tahoe-liquid-glass.html` | `compositions/macos-tahoe-liquid-glass.html` | hyperframes:composition |
 | `models/macbook.glb` | `models/macbook.glb` | hyperframes:asset |
-| `models/iphone.glb` | `models/iphone.glb` | hyperframes:asset |
+| `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | `assets/wallpapers/golden-gate-bridge-san-francisco-5k-0g.jpg` | hyperframes:asset |
+| `assets/icons/finder.png` | `assets/icons/finder.png` | hyperframes:asset |
+| `assets/icons/safari.jpg` | `assets/icons/safari.jpg` | hyperframes:asset |
+| `assets/icons/mail.jpg` | `assets/icons/mail.jpg` | hyperframes:asset |
+| `assets/icons/calendar.jpg` | `assets/icons/calendar.jpg` | hyperframes:asset |
+| `assets/icons/photos.jpg` | `assets/icons/photos.jpg` | hyperframes:asset |
+| `assets/icons/messages.jpg` | `assets/icons/messages.jpg` | hyperframes:asset |
+| `assets/icons/toast-messages.jpg` | `assets/icons/toast-messages.jpg` | hyperframes:asset |
+| `assets/icons/music.jpg` | `assets/icons/music.jpg` | hyperframes:asset |
+| `assets/icons/brave.jpg` | `assets/icons/brave.jpg` | hyperframes:asset |
+| `assets/icons/slack.jpg` | `assets/icons/slack.jpg` | hyperframes:asset |
+| `assets/icons/files.jpg` | `assets/icons/files.jpg` | hyperframes:asset |
+| `assets/icons/dock-finder.png` | `assets/icons/dock-finder.png` | hyperframes:asset |
+| `assets/icons/dock-safari.jpg` | `assets/icons/dock-safari.jpg` | hyperframes:asset |
+| `assets/icons/dock-mail.jpg` | `assets/icons/dock-mail.jpg` | hyperframes:asset |
+| `assets/icons/dock-photos.jpg` | `assets/icons/dock-photos.jpg` | hyperframes:asset |
+| `assets/icons/dock-music.jpg` | `assets/icons/dock-music.jpg` | hyperframes:asset |
 
 ## Usage
 
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
new file mode 100644
index 000000000..76b667086
--- /dev/null
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -0,0 +1,48 @@
+---
+title: "Liquid Glass"
+description: "VFX composition block"
+---
+
+# Liquid Glass
+
+VFX composition block
+
+`html-in-canvas` `webgl`
+
+<Warning>
+**Requires Chrome flag.** Enable `chrome://flags/#canvas-draw-element` for live preview. Rendering via CLI enables the flag automatically. [Learn more](/guides/html-in-canvas).
+</Warning>
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add vfx-liquid-glass
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 20s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `vfx-liquid-glass.html` | `compositions/vfx-liquid-glass.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="vfx-liquid-glass" data-composition-src="compositions/vfx-liquid-glass.html" data-start="0" data-duration="20" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/components/caption-blend-difference.mdx b/docs/catalog/components/caption-blend-difference.mdx
index e53931737..d972997ce 100644
--- a/docs/catalog/components/caption-blend-difference.mdx
+++ b/docs/catalog/components/caption-blend-difference.mdx
@@ -7,7 +7,7 @@ description: "Auto-inverting text using mix-blend-mode: difference — flips bet
 
 Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background
 
-`text` `effect` `blend-mode` `contrast` `inversion`
+`text` `text-effect` `effect` `blend-mode` `contrast` `inversion`
 
 <video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline />
 
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 660a3bb89..d52a2e7f1 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -9,7 +9,7 @@ Gooey text morph — cycles through an editable word list using SVG threshold +
 
 `text` `text-effect` `typography` `morph` `gooey` `kinetic` `animation`
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4" autoPlay muted loop playsInline />
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.png" autoPlay muted loop playsInline />
 
 ## Install
 
@@ -35,6 +35,4 @@ npx hyperframes add morph-text
 
 ## Usage
 
-Open `compositions/components/morph-text.html` and paste its contents into your composition.
-
-Edit the `<ol id="morph-words">` list to change the statements that cycle through. Each `<li>` accepts `data-font` (CSS font-family) and `data-color` (hex) attributes. Adjust `data-morph-speed` (seconds per transition) and `data-morph-pause` (hold time) on the root element.
+Open `compositions/components/morph-text.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index 3257f64b6..0f4ce44c2 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -1,11 +1,11 @@
 ---
 title: "Motion Blur"
-description: "Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed"
+description: "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed"
 ---
 
 # Motion Blur
 
-Velocity-driven directional motion blur — samples element position each frame and applies a one-sided ghost trail proportional to speed.
+Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed
 
 `effect` `motion-blur` `velocity` `animation` `physics`
 
@@ -35,36 +35,4 @@ npx hyperframes add motion-blur
 
 ## Usage
 
-Paste the snippet into your composition, then call `attachMotionBlur()` after your GSAP tweens and before registering `window.__timelines`.
-
-```html
-<!-- Extend the timeline to data-duration before calling attachMotionBlur -->
-tl.set(document.body, {}, DATA_DURATION);
-
-attachMotionBlur("#my-box", tl, {
-  axis: "x",      // "x" | "y" | "both"
-  blurMax: 40,    // max blur radius in px (default 20)
-});
-
-window.__timelines = window.__timelines || {};
-window.__timelines["my-composition"] = tl;
-```
-
-## How it works
-
-Each target element gets its own SVG filter. On every timeline seek, `attachMotionBlur` samples the element's GSAP `x`/`y` position, computes velocity, and drives three SVG filter primitives:
-
-1. **Ghost copies** — three faded, blurred copies of the element placed behind it at increasing offsets proportional to speed. Inherently one-sided: no forward blur.
-2. **Top blur** — a small symmetric Gaussian at the current position so the element looks in-motion rather than crisp on top of the trail.
-
-Blur scales linearly with velocity up to `blurMax`. Both the ghost trail and top blur clear automatically when the element decelerates to rest.
-
-## Options
-
-| Option | Default | Description |
-| --- | --- | --- |
-| `axis` | `"both"` | Motion axis — `"x"`, `"y"`, or `"both"` |
-| `blurScale` | `0.008` | Blur per px/s of velocity |
-| `blurMax` | `20` | Max blur radius on the motion axis (px) |
-| `stretchScale` | `0.0002` | scaleX/Y added per px/s (requires `stretchMax > 0`) |
-| `stretchMax` | `0` | Max stretch above 1.0 — disabled by default |
+Open `compositions/components/motion-blur.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/texture-mask-text.mdx b/docs/catalog/components/texture-mask-text.mdx
index 7f0309097..6267016ce 100644
--- a/docs/catalog/components/texture-mask-text.mdx
+++ b/docs/catalog/components/texture-mask-text.mdx
@@ -2,7 +2,7 @@
 title: "Texture Mask Text"
 ---
 
-`text` `texture` `mask` `effect`
+`text` `text-effect` `effect` `texture` `mask`
 
 <div className="hf-texture-preview-panel">
   <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/brick.png')" }}>
diff --git a/docs/docs.json b/docs/docs.json
index 6f6b382c3..2dadd9dce 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -142,6 +142,7 @@
               "catalog/blocks/macos-tahoe-liquid-glass",
               "catalog/blocks/vfx-iphone-device",
               "catalog/blocks/vfx-liquid-background",
+              "catalog/blocks/vfx-liquid-glass",
               "catalog/blocks/vfx-magnetic",
               "catalog/blocks/vfx-portal",
               "catalog/blocks/vfx-shatter",
@@ -203,6 +204,30 @@
               "catalog/blocks/app-showcase",
               "catalog/blocks/apple-money-count",
               "catalog/blocks/blue-sweater-intro-video",
+              "catalog/blocks/code-snippet-apple-terminal-basic",
+              "catalog/blocks/code-snippet-apple-terminal-clear-dark",
+              "catalog/blocks/code-snippet-apple-terminal-clear-light",
+              "catalog/blocks/code-snippet-apple-terminal-grass",
+              "catalog/blocks/code-snippet-apple-terminal-homebrew",
+              "catalog/blocks/code-snippet-apple-terminal-man-page",
+              "catalog/blocks/code-snippet-apple-terminal-novel",
+              "catalog/blocks/code-snippet-apple-terminal-ocean",
+              "catalog/blocks/code-snippet-apple-terminal-pro",
+              "catalog/blocks/code-snippet-apple-terminal-red-sands",
+              "catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
+              "catalog/blocks/code-snippet-apple-terminal-solid-colors",
+              "catalog/blocks/code-snippet-dark-2026",
+              "catalog/blocks/code-snippet-dark-modern",
+              "catalog/blocks/code-snippet-dark-plus",
+              "catalog/blocks/code-snippet-high-contrast",
+              "catalog/blocks/code-snippet-high-contrast-light",
+              "catalog/blocks/code-snippet-light-2026",
+              "catalog/blocks/code-snippet-light-modern",
+              "catalog/blocks/code-snippet-light-plus",
+              "catalog/blocks/code-snippet-monokai",
+              "catalog/blocks/code-snippet-solarized-light",
+              "catalog/blocks/code-snippet-visual-studio-dark",
+              "catalog/blocks/code-snippet-visual-studio-light",
               "catalog/blocks/north-korea-locked-down",
               "catalog/blocks/nyc-paris-flight",
               "catalog/blocks/ui-3d-reveal",
@@ -224,57 +249,25 @@
           {
             "group": "Effects",
             "pages": [
+              "catalog/components/caption-blend-difference",
               "catalog/components/grain-overlay",
               "catalog/components/grid-pixelate-wipe",
+              "catalog/components/morph-text",
               "catalog/components/motion-blur",
               "catalog/components/parallax-unzoom",
               "catalog/components/parallax-zoom",
               "catalog/components/shimmer-sweep",
+              "catalog/components/texture-mask-text",
               "catalog/components/vignette"
             ]
           },
-          {
-            "group": "Text Effects",
-            "pages": [
-              "catalog/components/caption-blend-difference",
-              "catalog/components/morph-text",
-              "catalog/components/texture-mask-text"
-            ]
-          },
           {
             "group": "Blocks",
             "pages": [
               "catalog/blocks/flowchart",
-              "catalog/blocks/logo-outro"
-            ]
-          },
-          {
-            "group": "Code Snippets",
-            "pages": [
-              "catalog/blocks/code-snippet-apple-terminal-basic",
-              "catalog/blocks/code-snippet-apple-terminal-clear-dark",
-              "catalog/blocks/code-snippet-apple-terminal-clear-light",
-              "catalog/blocks/code-snippet-apple-terminal-grass",
-              "catalog/blocks/code-snippet-apple-terminal-homebrew",
-              "catalog/blocks/code-snippet-apple-terminal-man-page",
-              "catalog/blocks/code-snippet-apple-terminal-novel",
-              "catalog/blocks/code-snippet-apple-terminal-ocean",
-              "catalog/blocks/code-snippet-apple-terminal-pro",
-              "catalog/blocks/code-snippet-apple-terminal-red-sands",
-              "catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
-              "catalog/blocks/code-snippet-apple-terminal-solid-colors",
-              "catalog/blocks/code-snippet-dark-2026",
-              "catalog/blocks/code-snippet-dark-modern",
-              "catalog/blocks/code-snippet-dark-plus",
-              "catalog/blocks/code-snippet-high-contrast",
-              "catalog/blocks/code-snippet-high-contrast-light",
-              "catalog/blocks/code-snippet-light-2026",
-              "catalog/blocks/code-snippet-light-modern",
-              "catalog/blocks/code-snippet-light-plus",
-              "catalog/blocks/code-snippet-monokai",
-              "catalog/blocks/code-snippet-solarized-light",
-              "catalog/blocks/code-snippet-visual-studio-dark",
-              "catalog/blocks/code-snippet-visual-studio-light"
+              "catalog/blocks/flowchart-vertical",
+              "catalog/blocks/logo-outro",
+              "catalog/blocks/lower-third-bild"
             ]
           }
         ]
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 9262a03b4..1e71dcb71 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -1,1168 +1,1587 @@
 [
-    {
-        "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": "caption-blend-difference",
-        "type": "component",
-        "title": "Blend Difference",
-        "description": "Auto-inverting text using mix-blend-mode: difference \u2014 flips between white and black per-pixel against the background",
-        "tags": [
-            "text",
-            "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 \u2014 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": "cross-warp-morph",
-        "type": "block",
-        "title": "Cross Warp Morph",
-        "description": "Shader transition with cross-warped morphing",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/cross-warp-morph",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
-    },
-    {
-        "name": "data-chart",
-        "type": "block",
-        "title": "Data Chart",
-        "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
-        "tags": [
-            "data",
-            "chart",
-            "statistics"
-        ],
-        "href": "/catalog/blocks/data-chart",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
-    },
-    {
-        "name": "domain-warp-dissolve",
-        "type": "block",
-        "title": "Domain Warp Dissolve",
-        "description": "Shader transition with fractal noise domain warping",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/domain-warp-dissolve",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
-    },
-    {
-        "name": "flash-through-white",
-        "type": "block",
-        "title": "Flash Through White",
-        "description": "Shader transition with white flash crossfade",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/flash-through-white",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
-    },
-    {
-        "name": "flowchart",
-        "type": "block",
-        "title": "Flowchart",
-        "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
-        "tags": [
-            "diagram",
-            "flowchart",
-            "interactive"
-        ],
-        "href": "/catalog/blocks/flowchart",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
-    },
-    {
-        "name": "glitch",
-        "type": "block",
-        "title": "Glitch",
-        "description": "Shader transition with digital glitch artifacts",
-        "tags": [
-            "transition",
-            "shader"
-        ],
-        "href": "/catalog/blocks/glitch",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
-    },
-    {
-        "name": "grain-overlay",
-        "type": "component",
-        "title": "Grain Overlay",
-        "description": "Animated film grain texture overlay using CSS keyframes \u2014 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 \u2014 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": "motion-blur",
-        "type": "component",
-        "title": "Motion Blur",
-        "description": "Velocity-driven motion blur \u2014 samples element position each frame and scales CSS blur + horizontal stretch proportionally 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": "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": "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": "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": "parallax-unzoom",
-        "type": "component",
-        "title": "Parallax Unzoom",
-        "description": "Reveal transition \u2014 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 \u2014 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 \u2014 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 \u2014 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",
-            "texture",
-            "mask",
-            "effect"
-        ],
-        "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 \u2014 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 \u2014 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 \u2014 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 \u2014 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\u00b0 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-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 \u2014 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 \u2014 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"
-    }
+  {
+    "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": "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-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-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": "cross-warp-morph",
+    "type": "block",
+    "title": "Cross Warp Morph",
+    "description": "Shader transition with cross-warped morphing",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/cross-warp-morph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
+  },
+  {
+    "name": "data-chart",
+    "type": "block",
+    "title": "Data Chart",
+    "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
+    "tags": [
+      "data",
+      "chart",
+      "statistics"
+    ],
+    "href": "/catalog/blocks/data-chart",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
+  },
+  {
+    "name": "domain-warp-dissolve",
+    "type": "block",
+    "title": "Domain Warp Dissolve",
+    "description": "Shader transition with fractal noise domain warping",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/domain-warp-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
+  },
+  {
+    "name": "flash-through-white",
+    "type": "block",
+    "title": "Flash Through White",
+    "description": "Shader transition with white flash crossfade",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/flash-through-white",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
+  },
+  {
+    "name": "flowchart",
+    "type": "block",
+    "title": "Flowchart",
+    "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+    "tags": [
+      "diagram",
+      "flowchart",
+      "interactive"
+    ],
+    "href": "/catalog/blocks/flowchart",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
+  },
+  {
+    "name": "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": "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": "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": "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": "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"
+  }
 ]
diff --git a/registry/blocks/lower-third-bild/assets/fonts/BarlowCondensed-Bold.woff2 b/registry/blocks/lower-third-bild/assets/fonts/BarlowCondensed-Bold.woff2
new file mode 100644
index 000000000..10ee1a872
Binary files /dev/null and b/registry/blocks/lower-third-bild/assets/fonts/BarlowCondensed-Bold.woff2 differ
diff --git a/registry/blocks/lower-third-bild/assets/fonts/BarlowCondensed-ExtraBold.woff2 b/registry/blocks/lower-third-bild/assets/fonts/BarlowCondensed-ExtraBold.woff2
new file mode 100644
index 000000000..488958143
Binary files /dev/null and b/registry/blocks/lower-third-bild/assets/fonts/BarlowCondensed-ExtraBold.woff2 differ
diff --git a/registry/blocks/lower-third-bild/index.html b/registry/blocks/lower-third-bild/index.html
new file mode 100644
index 000000000..9548e47ef
--- /dev/null
+++ b/registry/blocks/lower-third-bild/index.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <style>
+      @font-face {
+        font-family: "Barlow Condensed";
+        font-style: normal;
+        font-weight: 700;
+        font-display: block;
+        src: url("assets/fonts/BarlowCondensed-Bold.woff2") format("woff2");
+      }
+      @font-face {
+        font-family: "Barlow Condensed";
+        font-style: normal;
+        font-weight: 800;
+        font-display: block;
+        src: url("assets/fonts/BarlowCondensed-ExtraBold.woff2") format("woff2");
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+      }
+
+      #lb-root {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: transparent;
+      }
+
+      #lb-main-outer {
+        position: absolute;
+        bottom: 215px;
+        left: 80px;
+        padding-right: 14px;
+        padding-bottom: 14px;
+      }
+
+      #lb-main-text {
+        font-family: "Barlow Condensed", sans-serif;
+        font-size: 88px;
+        font-weight: 800;
+        line-height: 1.05;
+        color: #212529;
+        background: #ffffff;
+        padding: 10px 22px 8px;
+        white-space: nowrap;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        box-shadow: 12px 12px 0 0 #dd0000;
+      }
+
+      #lb-sub-outer {
+        position: absolute;
+        bottom: 135px;
+        left: 80px;
+        padding-right: 10px;
+        padding-bottom: 10px;
+      }
+
+      #lb-sub-text {
+        font-family: "Barlow Condensed", sans-serif;
+        font-size: 48px;
+        font-weight: 700;
+        line-height: 1.1;
+        color: #ffffff;
+        background: #dd0000;
+        padding: 6px 18px 5px;
+        white-space: nowrap;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        box-shadow: 8px 8px 0 0 #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="lb-root"
+      data-composition-id="lower-third-bild"
+      data-composition-variables='{"TXT_MAIN_1_Line":{"type":"string","default":"BILD EXKLUSIV"},"TXT_SUB":{"type":"string","default":"Sonderbericht"}}'
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="lb-drv"
+        class="clip"
+        data-start="0"
+        data-duration="8"
+        data-track-index="0"
+        style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none"
+      ></div>
+
+      <div id="lb-main-outer">
+        <div id="lb-main-text"></div>
+      </div>
+
+      <div id="lb-sub-outer">
+        <div id="lb-sub-text"></div>
+      </div>
+
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+
+          var vars =
+            window.__hyperframes && window.__hyperframes.getVariables
+              ? window.__hyperframes.getVariables()
+              : {};
+
+          var mainText = (vars.TXT_MAIN_1_Line || "BILD EXKLUSIV").trim();
+          var subText = (vars.TXT_SUB || "Sonderbericht").trim();
+
+          var dur = parseFloat(document.getElementById("lb-drv").dataset.duration) || 8;
+
+          document.getElementById("lb-main-text").textContent = mainText;
+          document.getElementById("lb-sub-text").textContent = subText || " ";
+
+          var mainOuter = document.getElementById("lb-main-outer");
+          var subOuter = document.getElementById("lb-sub-outer");
+
+          var tl = gsap.timeline({ paused: true });
+
+          gsap.set([mainOuter, subOuter], { opacity: 1 });
+
+          tl.set([mainOuter, subOuter], { opacity: 0, visibility: "hidden" }, dur);
+
+          window.__timelines["lower-third-bild"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/lower-third-bild/registry-item.json b/registry/blocks/lower-third-bild/registry-item.json
new file mode 100644
index 000000000..913c025ac
--- /dev/null
+++ b/registry/blocks/lower-third-bild/registry-item.json
@@ -0,0 +1,30 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "lower-third-bild",
+  "type": "hyperframes: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.",
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 8,
+  "tags": ["broadcast", "lower-third", "news", "overlay"],
+  "files": [
+    {
+      "path": "index.html",
+      "target": "compositions/lower-third-bild.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/fonts/BarlowCondensed-Bold.woff2",
+      "target": "compositions/assets/fonts/BarlowCondensed-Bold.woff2",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/fonts/BarlowCondensed-ExtraBold.woff2",
+      "target": "compositions/assets/fonts/BarlowCondensed-ExtraBold.woff2",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 2a7d5c1e5..b66540d6e 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -486,6 +486,10 @@
     {
       "name": "parallax-unzoom",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "lower-third-bild",
+      "type": "hyperframes:block"
     }
   ]
 }