From 779645f3907e6b30839e33d9d2824a88746838ae Mon Sep 17 00:00:00 2001
From: 10-mahmoud <mahmoud@10real.co>
Date: Fri, 31 Jul 2026 20:49:36 -0700
Subject: [PATCH] feat(registry): count-up

Deterministic count-up component: proxy-driven counter with explicit
thousands grouping (locale-independent), tabular-nums, optional non-zero
start, and a synchronized scale grow.

Catalog pages regenerated via scripts/generate-catalog-pages.ts (picks up
pre-existing generator drift for other items).
---
 docs/catalog/blocks/camcorder-hud.mdx         |   44 +
 .../code-snippet-apple-terminal-basic.mdx     |   35 +-
 ...code-snippet-apple-terminal-clear-dark.mdx |   36 +-
 ...ode-snippet-apple-terminal-clear-light.mdx |   35 +-
 .../code-snippet-apple-terminal-grass.mdx     |   35 +-
 .../code-snippet-apple-terminal-homebrew.mdx  |   36 +-
 .../code-snippet-apple-terminal-man-page.mdx  |   35 +-
 .../code-snippet-apple-terminal-novel.mdx     |   36 +-
 .../code-snippet-apple-terminal-ocean.mdx     |   36 +-
 .../code-snippet-apple-terminal-pro.mdx       |   36 +-
 .../code-snippet-apple-terminal-red-sands.mdx |   36 +-
 ...-snippet-apple-terminal-silver-aerogel.mdx |   36 +-
 ...de-snippet-apple-terminal-solid-colors.mdx |   36 +-
 .../catalog/blocks/code-snippet-dark-2026.mdx |   30 +-
 .../blocks/code-snippet-dark-modern.mdx       |   30 +-
 .../catalog/blocks/code-snippet-dark-plus.mdx |   30 +-
 .../code-snippet-high-contrast-light.mdx      |   30 +-
 .../blocks/code-snippet-high-contrast.mdx     |   30 +-
 .../blocks/code-snippet-light-2026.mdx        |   30 +-
 .../blocks/code-snippet-light-modern.mdx      |   30 +-
 .../blocks/code-snippet-light-plus.mdx        |   30 +-
 docs/catalog/blocks/code-snippet-monokai.mdx  |   30 +-
 .../blocks/code-snippet-solarized-light.mdx   |   30 +-
 .../code-snippet-visual-studio-dark.mdx       |   30 +-
 .../code-snippet-visual-studio-light.mdx      |   30 +-
 .../blocks/editorial-flash-overlay.mdx        |   44 +
 docs/catalog/blocks/freeze-frame-dressing.mdx |   44 +
 docs/catalog/blocks/ios26-liquid-glass.mdx    |   26 +
 .../blocks/liquid-glass-context-menu.mdx      |    1 +
 .../blocks/liquid-glass-media-controls.mdx    |    1 +
 .../blocks/liquid-glass-notification.mdx      |    2 +
 docs/catalog/blocks/liquid-glass-widgets.mdx  |    2 +
 .../blocks/macos-tahoe-liquid-glass.mdx       |   18 +-
 .../blocks/organic-light-leak-overlay.mdx     |   44 +
 .../components/caption-blend-difference.mdx   |    2 +-
 docs/catalog/components/count-up.mdx          |   38 +
 docs/catalog/components/morph-text.mdx        |    6 +-
 docs/catalog/components/motion-blur.mdx       |   38 +-
 docs/catalog/components/texture-mask-text.mdx |    2 +-
 docs/docs.json                                |   82 +-
 docs/public/catalog-index.json                | 3329 ++++++++++-------
 registry/components/count-up/count-up.html    |   84 +
 registry/components/count-up/demo.html        |  153 +
 .../components/count-up/registry-item.json    |   15 +
 registry/registry.json                        |    4 +
 45 files changed, 2645 insertions(+), 2122 deletions(-)
 create mode 100644 docs/catalog/blocks/camcorder-hud.mdx
 create mode 100644 docs/catalog/blocks/editorial-flash-overlay.mdx
 create mode 100644 docs/catalog/blocks/freeze-frame-dressing.mdx
 create mode 100644 docs/catalog/blocks/organic-light-leak-overlay.mdx
 create mode 100644 docs/catalog/components/count-up.mdx
 create mode 100644 registry/components/count-up/count-up.html
 create mode 100644 registry/components/count-up/demo.html
 create mode 100644 registry/components/count-up/registry-item.json

diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
new file mode 100644
index 0000000000..27231e816e
--- /dev/null
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -0,0 +1,44 @@
+---
+title: "Camcorder HUD"
+description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
+---
+
+# Camcorder HUD
+
+Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments
+
+`camcorder` `camera` `recording` `hud` `overlay` `creator` `media-treatment-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/camcorder-hud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add camcorder-hud
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `camcorder-hud.html` | `compositions/camcorder-hud.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="camcorder-hud" data-composition-src="compositions/camcorder-hud.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index 0021f80a79..aec86703e6 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 98e7eaf68f..d8172b3df6 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 7654fe4e88..6507480933 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 d64bb7e5bd..eb034579fc 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 f9c3340a94..98ecb0f666 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 11c96f415f..48004aba99 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 9a7a0adba0..5d95b0915e 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 d519bd4c96..4ffa4396fb 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 e8441e6c50..dcacf83e79 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 c740c6e298..971931abe4 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 810f2f6701..dbb0b19122 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 30b81485c5..dbae009152 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 cd86c9756c..f742c1c3b1 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 8cb547804a..7ed4db905d 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 defe289c1c..e49334724e 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 43bfada32f..e1ebecfae3 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 9daa004500..5ba75157cd 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 62265a255c..10d9d23ea9 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 65a53d6e63..90deef346d 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 f351c45a99..ecdb444051 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 a1511f0f30..4022506890 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 914b784b67..051c020ed5 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 494c2f853b..fd5902c76d 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 7f9060917d..2572facc79 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/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
new file mode 100644
index 0000000000..3626f1083a
--- /dev/null
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -0,0 +1,44 @@
+---
+title: "Editorial Flash Overlay"
+description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
+---
+
+# Editorial Flash Overlay
+
+Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal
+
+`flash` `editorial` `social` `light` `transition` `overlay` `media-treatment-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/editorial-flash-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add editorial-flash-overlay
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `editorial-flash-overlay.html` | `compositions/editorial-flash-overlay.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="editorial-flash-overlay" data-composition-src="compositions/editorial-flash-overlay.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
new file mode 100644
index 0000000000..2dc72e4722
--- /dev/null
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -0,0 +1,44 @@
+---
+title: "Freeze-Frame Dressing"
+description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
+---
+
+# Freeze-Frame Dressing
+
+Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject
+
+`freeze-frame` `cutout` `scrapbook` `paper` `social` `overlay` `media-treatment-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/freeze-frame-dressing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add freeze-frame-dressing
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `freeze-frame-dressing.html` | `compositions/freeze-frame-dressing.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="freeze-frame-dressing" data-composition-src="compositions/freeze-frame-dressing.html" data-start="0" data-duration="4" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index 56a5979e70..469e910b3c 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-context-menu.mdx b/docs/catalog/blocks/liquid-glass-context-menu.mdx
index 1258b58f64..b3711cfdd4 100644
--- a/docs/catalog/blocks/liquid-glass-context-menu.mdx
+++ b/docs/catalog/blocks/liquid-glass-context-menu.mdx
@@ -38,6 +38,7 @@ npx hyperframes add liquid-glass-context-menu
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-context-menu.html` | `compositions/liquid-glass-context-menu.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
 
 ## Usage
 
diff --git a/docs/catalog/blocks/liquid-glass-media-controls.mdx b/docs/catalog/blocks/liquid-glass-media-controls.mdx
index fd1c1b532a..d0eff2efdc 100644
--- a/docs/catalog/blocks/liquid-glass-media-controls.mdx
+++ b/docs/catalog/blocks/liquid-glass-media-controls.mdx
@@ -38,6 +38,7 @@ npx hyperframes add liquid-glass-media-controls
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-media-controls.html` | `compositions/liquid-glass-media-controls.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
 
 ## Usage
 
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index d291095018..810c50437c 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -38,6 +38,8 @@ npx hyperframes add liquid-glass-notification
 | File | Target | Type |
 | --- | --- | --- |
 | `liquid-glass-notification.html` | `compositions/liquid-glass-notification.html` | hyperframes:composition |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
+| `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 19d7ccc103..f86e087839 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -38,6 +38,8 @@ 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 |
+| `lib/liquid-glass.iife.js` | `compositions/lib/liquid-glass.iife.js` | registry:asset |
 
 ## Usage
 
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index e878221c22..b1b715f2b6 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/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
new file mode 100644
index 0000000000..2613b2296b
--- /dev/null
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -0,0 +1,44 @@
+---
+title: "Organic Light Leak Overlay"
+description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
+---
+
+# Organic Light Leak Overlay
+
+Finite CSS light-leak overlay for memory beats and motivated transitions
+
+`light-leak` `film` `memory` `transition` `overlay` `media-treatment-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/organic-light-leak-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add organic-light-leak-overlay
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `organic-light-leak-overlay.html` | `compositions/organic-light-leak-overlay.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="organic-light-leak-overlay" data-composition-src="compositions/organic-light-leak-overlay.html" data-start="0" data-duration="4" 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 e53931737d..d972997ce1 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/count-up.mdx b/docs/catalog/components/count-up.mdx
new file mode 100644
index 0000000000..68df790bcd
--- /dev/null
+++ b/docs/catalog/components/count-up.mdx
@@ -0,0 +1,38 @@
+---
+title: "Count Up"
+description: "Deterministic count-up number — proxy-driven counter with explicit thousands grouping (locale-independent), tabular-nums, optional non-zero start so the number reads as live, and a synchronized scale grow"
+---
+
+# Count Up
+
+Deterministic count-up number — proxy-driven counter with explicit thousands grouping (locale-independent), tabular-nums, optional non-zero start so the number reads as live, and a synchronized scale grow
+
+`counter` `count-up` `number` `statistic`
+
+<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/count-up.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/count-up.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add count-up
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `count-up.html` | `compositions/components/count-up.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/count-up.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 660a3bb89d..d52a2e7f15 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 3257f64b64..0f4ce44c2b 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 7f03090976..6267016ce6 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 585f85826b..9e96a21934 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -200,14 +200,14 @@
             "group": "Code Animations",
             "pages": [
               "catalog/blocks/code-3d-extrude",
-              "catalog/blocks/code-shader-dissolve",
-              "catalog/blocks/code-particle-assemble",
-              "catalog/blocks/code-morph",
-              "catalog/blocks/code-snippet-flight",
-              "catalog/blocks/code-typing",
               "catalog/blocks/code-diff",
               "catalog/blocks/code-highlight",
-              "catalog/blocks/code-scroll"
+              "catalog/blocks/code-morph",
+              "catalog/blocks/code-particle-assemble",
+              "catalog/blocks/code-scroll",
+              "catalog/blocks/code-shader-dissolve",
+              "catalog/blocks/code-snippet-flight",
+              "catalog/blocks/code-typing"
             ]
           },
           {
@@ -251,6 +251,8 @@
           {
             "group": "Social Overlays",
             "pages": [
+              "catalog/blocks/editorial-flash-overlay",
+              "catalog/blocks/freeze-frame-dressing",
               "catalog/blocks/instagram-follow",
               "catalog/blocks/macos-notification",
               "catalog/blocks/reddit-post",
@@ -299,6 +301,7 @@
           {
             "group": "CSS Transitions",
             "pages": [
+              "catalog/blocks/organic-light-leak-overlay",
               "catalog/blocks/transitions-3d",
               "catalog/blocks/transitions-blur",
               "catalog/blocks/transitions-cover",
@@ -320,6 +323,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",
@@ -341,58 +368,27 @@
           {
             "group": "Effects",
             "pages": [
+              "catalog/components/caption-blend-difference",
+              "catalog/components/count-up",
               "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/camcorder-hud",
               "catalog/blocks/flowchart",
               "catalog/blocks/flowchart-vertical",
               "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"
-            ]
           }
         ]
       },
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 7541bf9ead..72c9a48b6e 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -1,1371 +1,1962 @@
 [
-    {
-        "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": "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 \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": "lower-third-bild",
-        "type": "block",
-        "title": "Lower Third — BILD Style",
-        "description": "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.",
-        "tags": [
-            "broadcast",
-            "lower-third",
-            "news",
-            "overlay"
-        ],
-        "href": "/catalog/blocks/lower-third-bild",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png"
-    },
-    {
-        "name": "lt-accent-underline",
-        "type": "block",
-        "title": "Lower Third — Accent Underline",
-        "description": "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "minimal"
-        ],
-        "href": "/catalog/blocks/lt-accent-underline",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png"
-    },
-    {
-        "name": "lt-bold-block",
-        "type": "block",
-        "title": "Lower Third — Bold Block",
-        "description": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-bold-block",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png"
-    },
-    {
-        "name": "lt-clean-bar",
-        "type": "block",
-        "title": "Lower Third — Clean Bar",
-        "description": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview"
-        ],
-        "href": "/catalog/blocks/lt-clean-bar",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png"
-    },
-    {
-        "name": "lt-color-block",
-        "type": "block",
-        "title": "Lower Third — Color Block",
-        "description": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-color-block",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png"
-    },
-    {
-        "name": "lt-dark-card",
-        "type": "block",
-        "title": "Lower Third — Dark Card",
-        "description": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "dark"
-        ],
-        "href": "/catalog/blocks/lt-dark-card",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png"
-    },
-    {
-        "name": "lt-kicker-name",
-        "type": "block",
-        "title": "Lower Third — Kicker Name",
-        "description": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-kicker-name",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png"
-    },
-    {
-        "name": "lt-mask-reveal",
-        "type": "block",
-        "title": "Lower Third — Mask Reveal",
-        "description": "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-mask-reveal",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png"
-    },
-    {
-        "name": "lt-side-rule",
-        "type": "block",
-        "title": "Lower Third — Side Rule",
-        "description": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "minimal"
-        ],
-        "href": "/catalog/blocks/lt-side-rule",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png"
-    },
-    {
-        "name": "lt-soft-pill",
-        "type": "block",
-        "title": "Lower Third — Soft Pill",
-        "description": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "minimal"
-        ],
-        "href": "/catalog/blocks/lt-soft-pill",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png"
-    },
-    {
-        "name": "lt-stack-bars",
-        "type": "block",
-        "title": "Lower Third — Stack Bars",
-        "description": "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "podcast",
-            "interview",
-            "bold"
-        ],
-        "href": "/catalog/blocks/lt-stack-bars",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png"
-    },
-    {
-        "name": "macos-notification",
-        "type": "block",
-        "title": "macOS Notification",
-        "description": "Animated macOS-style notification banner with app icon and message",
-        "tags": [
-            "social",
-            "overlay",
-            "notification"
-        ],
-        "href": "/catalog/blocks/macos-notification",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
-    },
-    {
-        "name": "macos-tahoe-liquid-glass",
-        "type": "block",
-        "title": "macOS Tahoe Liquid Glass Desktop",
-        "description": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
-        "tags": [
-            "html-in-canvas",
-            "3d",
-            "macos",
-            "tahoe",
-            "gltf"
-        ],
-        "href": "/catalog/blocks/macos-tahoe-liquid-glass",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
-    },
-    {
-        "name": "news-ticker",
-        "type": "block",
-        "title": "News Ticker",
-        "description": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
-        "tags": [
-            "lower-third",
-            "overlay",
-            "news",
-            "ticker"
-        ],
-        "href": "/catalog/blocks/news-ticker",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png"
-    },
-    {
-        "name": "north-korea-locked-down",
-        "type": "block",
-        "title": "North Korea Locked Down",
-        "description": "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.",
-        "tags": [
-            "showcase",
-            "map",
-            "annotation",
-            "youtube",
-            "kinetic"
-        ],
-        "href": "/catalog/blocks/north-korea-locked-down",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
-    },
-    {
-        "name": "nyc-paris-flight",
-        "type": "block",
-        "title": "NYC Paris Flight",
-        "description": "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.",
-        "tags": [
-            "showcase",
-            "travel",
-            "map",
-            "youtube",
-            "sfx"
-        ],
-        "href": "/catalog/blocks/nyc-paris-flight",
-        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
-    },
-    {
-        "name": "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-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 \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": "camcorder-hud",
+    "type": "block",
+    "title": "Camcorder HUD",
+    "description": "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments",
+    "tags": [
+      "camcorder",
+      "camera",
+      "recording",
+      "hud",
+      "overlay",
+      "creator",
+      "media-treatment-overlay"
+    ],
+    "href": "/catalog/blocks/camcorder-hud",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png"
+  },
+  {
+    "name": "caption-blend-difference",
+    "type": "component",
+    "title": "Blend Difference",
+    "description": "Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background",
+    "tags": [
+      "text",
+      "text-effect",
+      "effect",
+      "blend-mode",
+      "contrast",
+      "inversion"
+    ],
+    "href": "/catalog/components/caption-blend-difference",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png"
+  },
+  {
+    "name": "caption-clip-wipe",
+    "type": "component",
+    "title": "Clip Wipe",
+    "description": "Left-to-right clip-path wipe reveal per word",
+    "tags": [
+      "captions",
+      "caption-style",
+      "wipe",
+      "clip-path",
+      "reveal"
+    ],
+    "href": "/catalog/components/caption-clip-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png"
+  },
+  {
+    "name": "caption-editorial-emphasis",
+    "type": "component",
+    "title": "Editorial Emphasis",
+    "description": "Dual-font system with dramatic size contrast for emphasis words",
+    "tags": [
+      "captions",
+      "caption-style",
+      "editorial",
+      "typography",
+      "emphasis"
+    ],
+    "href": "/catalog/components/caption-editorial-emphasis",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png"
+  },
+  {
+    "name": "caption-emoji-pop",
+    "type": "component",
+    "title": "Emoji Pop",
+    "description": "Emoji integration with stroked text and horizontal squeeze entrance",
+    "tags": [
+      "captions",
+      "caption-style",
+      "emoji",
+      "social"
+    ],
+    "href": "/catalog/components/caption-emoji-pop",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png"
+  },
+  {
+    "name": "caption-glitch-rgb",
+    "type": "component",
+    "title": "Glitch RGB",
+    "description": "RGB chromatic aberration with CRT scanline overlay",
+    "tags": [
+      "captions",
+      "caption-style",
+      "glitch",
+      "cyber",
+      "tech"
+    ],
+    "href": "/catalog/components/caption-glitch-rgb",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png"
+  },
+  {
+    "name": "caption-gradient-fill",
+    "type": "component",
+    "title": "Gradient Fill",
+    "description": "Gradient-clipped text with elastic bounce entrance",
+    "tags": [
+      "captions",
+      "caption-style",
+      "gradient",
+      "colorful"
+    ],
+    "href": "/catalog/components/caption-gradient-fill",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png"
+  },
+  {
+    "name": "caption-highlight",
+    "type": "component",
+    "title": "Highlight",
+    "description": "Red background sweep behind each active word, TikTok-style",
+    "tags": [
+      "captions",
+      "caption-style",
+      "highlight",
+      "social",
+      "tiktok"
+    ],
+    "href": "/catalog/components/caption-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png"
+  },
+  {
+    "name": "caption-kinetic-slam",
+    "type": "component",
+    "title": "Kinetic Slam",
+    "description": "Full-screen single-word display with alternating entrance directions",
+    "tags": [
+      "captions",
+      "caption-style",
+      "kinetic",
+      "typography",
+      "slam"
+    ],
+    "href": "/catalog/components/caption-kinetic-slam",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png"
+  },
+  {
+    "name": "caption-matrix-decode",
+    "type": "component",
+    "title": "Matrix Decode",
+    "description": "Character scramble animation before text reveal",
+    "tags": [
+      "captions",
+      "caption-style",
+      "matrix",
+      "scramble",
+      "decode"
+    ],
+    "href": "/catalog/components/caption-matrix-decode",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png"
+  },
+  {
+    "name": "caption-neon-accent",
+    "type": "component",
+    "title": "Neon Accent",
+    "description": "Multi-color neon glow accents with wiggle drift animation",
+    "tags": [
+      "captions",
+      "caption-style",
+      "neon",
+      "glow",
+      "accent"
+    ],
+    "href": "/catalog/components/caption-neon-accent",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png"
+  },
+  {
+    "name": "caption-neon-glow",
+    "type": "component",
+    "title": "Neon Glow",
+    "description": "Cyan and magenta neon glow with keyword accent colors",
+    "tags": [
+      "captions",
+      "caption-style",
+      "neon",
+      "glow",
+      "gaming"
+    ],
+    "href": "/catalog/components/caption-neon-glow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png"
+  },
+  {
+    "name": "caption-parallax-layers",
+    "type": "component",
+    "title": "Parallax Layers",
+    "description": "Behind-subject 3D text layering with vertical stretch effect",
+    "tags": [
+      "captions",
+      "caption-style",
+      "parallax",
+      "3d",
+      "depth"
+    ],
+    "href": "/catalog/components/caption-parallax-layers",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png"
+  },
+  {
+    "name": "caption-particle-burst",
+    "type": "component",
+    "title": "Particle Burst",
+    "description": "Keyword words trigger colored particle explosions",
+    "tags": [
+      "captions",
+      "caption-style",
+      "particles",
+      "burst",
+      "effects"
+    ],
+    "href": "/catalog/components/caption-particle-burst",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png"
+  },
+  {
+    "name": "caption-pill-karaoke",
+    "type": "component",
+    "title": "Pill Karaoke",
+    "description": "Pill-shaped container with per-word karaoke color highlight",
+    "tags": [
+      "captions",
+      "caption-style",
+      "karaoke",
+      "pill"
+    ],
+    "href": "/catalog/components/caption-pill-karaoke",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png"
+  },
+  {
+    "name": "caption-texture",
+    "type": "component",
+    "title": "Texture",
+    "description": "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable",
+    "tags": [
+      "captions",
+      "caption-style",
+      "texture",
+      "mask"
+    ],
+    "href": "/catalog/components/caption-texture",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png"
+  },
+  {
+    "name": "caption-weight-shift",
+    "type": "component",
+    "title": "Weight Shift",
+    "description": "Elegant font-weight transition between caption lines",
+    "tags": [
+      "captions",
+      "caption-style",
+      "minimal",
+      "typography"
+    ],
+    "href": "/catalog/components/caption-weight-shift",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png"
+  },
+  {
+    "name": "chromatic-radial-split",
+    "type": "block",
+    "title": "Chromatic Radial Split",
+    "description": "Shader transition with chromatic aberration radial split",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/chromatic-radial-split",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png"
+  },
+  {
+    "name": "cinematic-zoom",
+    "type": "block",
+    "title": "Cinematic Zoom",
+    "description": "Shader transition with dramatic zoom blur",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/cinematic-zoom",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png"
+  },
+  {
+    "name": "code-3d-extrude",
+    "type": "block",
+    "title": "Code 3D Extrude",
+    "description": "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.",
+    "tags": [
+      "code",
+      "code-animation",
+      "3d",
+      "webgl",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-3d-extrude",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png"
+  },
+  {
+    "name": "code-diff",
+    "type": "block",
+    "title": "Code Diff",
+    "description": "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.",
+    "tags": [
+      "code",
+      "code-animation",
+      "diff",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-diff",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png"
+  },
+  {
+    "name": "code-highlight",
+    "type": "block",
+    "title": "Code Highlight Sweep",
+    "description": "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based).",
+    "tags": [
+      "code",
+      "code-animation",
+      "highlight",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-highlight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png"
+  },
+  {
+    "name": "code-morph",
+    "type": "block",
+    "title": "Code Morph",
+    "description": "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.",
+    "tags": [
+      "code",
+      "code-animation",
+      "morph",
+      "refactor",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-morph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png"
+  },
+  {
+    "name": "code-particle-assemble",
+    "type": "block",
+    "title": "Code Particle Assemble",
+    "description": "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.",
+    "tags": [
+      "code",
+      "code-animation",
+      "particles",
+      "gpu",
+      "webgl",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-particle-assemble",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png"
+  },
+  {
+    "name": "code-scroll",
+    "type": "block",
+    "title": "Code Scroll To Line",
+    "description": "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.",
+    "tags": [
+      "code",
+      "code-animation",
+      "scroll",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-scroll",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png"
+  },
+  {
+    "name": "code-shader-dissolve",
+    "type": "block",
+    "title": "Code Shader Dissolve",
+    "description": "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.",
+    "tags": [
+      "code",
+      "code-animation",
+      "shader",
+      "webgl",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-shader-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-basic",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Basic",
+    "description": "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-basic",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-clear-dark",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Clear Dark",
+    "description": "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-dark",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-clear-light",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Clear Light",
+    "description": "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-clear-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-grass",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Grass",
+    "description": "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-grass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-homebrew",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Homebrew",
+    "description": "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-homebrew",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-man-page",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Man Page",
+    "description": "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-man-page",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-novel",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Novel",
+    "description": "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-novel",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-ocean",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Ocean",
+    "description": "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-ocean",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-pro",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Pro",
+    "description": "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-pro",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-red-sands",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Red Sands",
+    "description": "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-red-sands",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-silver-aerogel",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Silver Aerogel",
+    "description": "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png"
+  },
+  {
+    "name": "code-snippet-apple-terminal-solid-colors",
+    "type": "block",
+    "title": "Code Snippet - Apple Terminal Solid Colors",
+    "description": "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "terminal",
+      "apple",
+      "apple-terminal"
+    ],
+    "href": "/catalog/blocks/code-snippet-apple-terminal-solid-colors",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png"
+  },
+  {
+    "name": "code-snippet-dark-2026",
+    "type": "block",
+    "title": "Code Snippet - Dark 2026",
+    "description": "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-dark-2026",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png"
+  },
+  {
+    "name": "code-snippet-dark-modern",
+    "type": "block",
+    "title": "Code Snippet - Dark Modern",
+    "description": "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-dark-modern",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png"
+  },
+  {
+    "name": "code-snippet-dark-plus",
+    "type": "block",
+    "title": "Code Snippet - Dark+",
+    "description": "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-dark-plus",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png"
+  },
+  {
+    "name": "code-snippet-flight",
+    "type": "block",
+    "title": "Code Snippet Flight",
+    "description": "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.",
+    "tags": [
+      "code",
+      "code-animation",
+      "flight",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-snippet-flight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png"
+  },
+  {
+    "name": "code-snippet-high-contrast",
+    "type": "block",
+    "title": "Code Snippet - High Contrast",
+    "description": "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-high-contrast",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png"
+  },
+  {
+    "name": "code-snippet-high-contrast-light",
+    "type": "block",
+    "title": "Code Snippet - High Contrast Light",
+    "description": "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-high-contrast-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png"
+  },
+  {
+    "name": "code-snippet-light-2026",
+    "type": "block",
+    "title": "Code Snippet - Light 2026",
+    "description": "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-light-2026",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png"
+  },
+  {
+    "name": "code-snippet-light-modern",
+    "type": "block",
+    "title": "Code Snippet - Light Modern",
+    "description": "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-light-modern",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png"
+  },
+  {
+    "name": "code-snippet-light-plus",
+    "type": "block",
+    "title": "Code Snippet - Light+",
+    "description": "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-light-plus",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png"
+  },
+  {
+    "name": "code-snippet-monokai",
+    "type": "block",
+    "title": "Code Snippet - Monokai",
+    "description": "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-monokai",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png"
+  },
+  {
+    "name": "code-snippet-solarized-light",
+    "type": "block",
+    "title": "Code Snippet - Solarized Light",
+    "description": "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-solarized-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png"
+  },
+  {
+    "name": "code-snippet-visual-studio-dark",
+    "type": "block",
+    "title": "Code Snippet - Visual Studio Dark",
+    "description": "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-visual-studio-dark",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png"
+  },
+  {
+    "name": "code-snippet-visual-studio-light",
+    "type": "block",
+    "title": "Code Snippet - Visual Studio Light",
+    "description": "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+    "tags": [
+      "code",
+      "developer",
+      "showcase",
+      "vscode"
+    ],
+    "href": "/catalog/blocks/code-snippet-visual-studio-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png"
+  },
+  {
+    "name": "code-typing",
+    "type": "block",
+    "title": "Code Typing",
+    "description": "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.",
+    "tags": [
+      "code",
+      "code-animation",
+      "typing",
+      "developer"
+    ],
+    "href": "/catalog/blocks/code-typing",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png"
+  },
+  {
+    "name": "count-up",
+    "type": "component",
+    "title": "Count Up",
+    "description": "Deterministic count-up number — proxy-driven counter with explicit thousands grouping (locale-independent), tabular-nums, optional non-zero start so the number reads as live, and a synchronized scale grow",
+    "tags": [
+      "counter",
+      "count-up",
+      "number",
+      "statistic"
+    ],
+    "href": "/catalog/components/count-up",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/count-up.png"
+  },
+  {
+    "name": "cross-warp-morph",
+    "type": "block",
+    "title": "Cross Warp Morph",
+    "description": "Shader transition with cross-warped morphing",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/cross-warp-morph",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png"
+  },
+  {
+    "name": "data-chart",
+    "type": "block",
+    "title": "Data Chart",
+    "description": "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels",
+    "tags": [
+      "data",
+      "chart",
+      "statistics"
+    ],
+    "href": "/catalog/blocks/data-chart",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png"
+  },
+  {
+    "name": "domain-warp-dissolve",
+    "type": "block",
+    "title": "Domain Warp Dissolve",
+    "description": "Shader transition with fractal noise domain warping",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/domain-warp-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
+  },
+  {
+    "name": "editorial-flash-overlay",
+    "type": "block",
+    "title": "Editorial Flash Overlay",
+    "description": "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal",
+    "tags": [
+      "flash",
+      "editorial",
+      "social",
+      "light",
+      "transition",
+      "overlay",
+      "media-treatment-overlay"
+    ],
+    "href": "/catalog/blocks/editorial-flash-overlay",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png"
+  },
+  {
+    "name": "flash-through-white",
+    "type": "block",
+    "title": "Flash Through White",
+    "description": "Shader transition with white flash crossfade",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/flash-through-white",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png"
+  },
+  {
+    "name": "flowchart",
+    "type": "block",
+    "title": "Flowchart",
+    "description": "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+    "tags": [
+      "diagram",
+      "flowchart",
+      "interactive"
+    ],
+    "href": "/catalog/blocks/flowchart",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png"
+  },
+  {
+    "name": "flowchart-vertical",
+    "type": "block",
+    "title": "Flowchart Vertical",
+    "description": "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction",
+    "tags": [
+      "diagram",
+      "flowchart",
+      "interactive",
+      "portrait"
+    ],
+    "href": "/catalog/blocks/flowchart-vertical",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png"
+  },
+  {
+    "name": "freeze-frame-dressing",
+    "type": "block",
+    "title": "Freeze-Frame Dressing",
+    "description": "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject",
+    "tags": [
+      "freeze-frame",
+      "cutout",
+      "scrapbook",
+      "paper",
+      "social",
+      "overlay",
+      "media-treatment-overlay"
+    ],
+    "href": "/catalog/blocks/freeze-frame-dressing",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png"
+  },
+  {
+    "name": "glitch",
+    "type": "block",
+    "title": "Glitch",
+    "description": "Shader transition with digital glitch artifacts",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/glitch",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png"
+  },
+  {
+    "name": "grain-overlay",
+    "type": "component",
+    "title": "Grain Overlay",
+    "description": "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition",
+    "tags": [
+      "texture",
+      "grain",
+      "overlay",
+      "film"
+    ],
+    "href": "/catalog/components/grain-overlay",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png"
+  },
+  {
+    "name": "gravitational-lens",
+    "type": "block",
+    "title": "Gravitational Lens",
+    "description": "Shader transition with gravitational lensing distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/gravitational-lens",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png"
+  },
+  {
+    "name": "grid-pixelate-wipe",
+    "type": "component",
+    "title": "Grid Pixelate Wipe",
+    "description": "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes",
+    "tags": [
+      "transition",
+      "wipe",
+      "grid",
+      "pixelate"
+    ],
+    "href": "/catalog/components/grid-pixelate-wipe",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
+  },
+  {
+    "name": "instagram-follow",
+    "type": "block",
+    "title": "Instagram Follow",
+    "description": "Animated Instagram follow overlay with profile card and follow button",
+    "tags": [
+      "social",
+      "overlay",
+      "instagram"
+    ],
+    "href": "/catalog/blocks/instagram-follow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png"
+  },
+  {
+    "name": "ios26-liquid-glass",
+    "type": "block",
+    "title": "iOS 26 Liquid Glass Home Screen",
+    "description": "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model.",
+    "tags": [
+      "liquid-glass-html-in-canvas",
+      "webgpu",
+      "3d",
+      "iphone",
+      "ios26",
+      "notifications",
+      "gltf",
+      "html-in-canvas"
+    ],
+    "href": "/catalog/blocks/ios26-liquid-glass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png"
+  },
+  {
+    "name": "light-leak",
+    "type": "block",
+    "title": "Light Leak",
+    "description": "Shader transition with cinematic light leak overlay",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/light-leak",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png"
+  },
+  {
+    "name": "liquid-glass-context-menu",
+    "type": "block",
+    "title": "Liquid Glass Context Menu",
+    "description": "Frosted glass context menu panel drifting over an aurora shader background",
+    "tags": [
+      "html-in-canvas",
+      "liquid-glass-html-in-canvas",
+      "webgpu"
+    ],
+    "href": "/catalog/blocks/liquid-glass-context-menu",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png"
+  },
+  {
+    "name": "liquid-glass-media-controls",
+    "type": "block",
+    "title": "Liquid Glass Media Controls",
+    "description": "Frosted glass media control panels spreading over an aurora shader background",
+    "tags": [
+      "html-in-canvas",
+      "liquid-glass-html-in-canvas",
+      "webgpu"
+    ],
+    "href": "/catalog/blocks/liquid-glass-media-controls",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png"
+  },
+  {
+    "name": "liquid-glass-notification",
+    "type": "block",
+    "title": "Liquid Glass Notification",
+    "description": "Frosted glass notification cards floating over an aurora shader background",
+    "tags": [
+      "html-in-canvas",
+      "liquid-glass-html-in-canvas",
+      "webgpu"
+    ],
+    "href": "/catalog/blocks/liquid-glass-notification",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png"
+  },
+  {
+    "name": "liquid-glass-widgets",
+    "type": "block",
+    "title": "Liquid Glass Widgets",
+    "description": "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background",
+    "tags": [
+      "html-in-canvas",
+      "liquid-glass-html-in-canvas",
+      "webgpu"
+    ],
+    "href": "/catalog/blocks/liquid-glass-widgets",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png"
+  },
+  {
+    "name": "logo-outro",
+    "type": "block",
+    "title": "Logo Outro",
+    "description": "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill",
+    "tags": [
+      "branding",
+      "outro",
+      "logo"
+    ],
+    "href": "/catalog/blocks/logo-outro",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png"
+  },
+  {
+    "name": "lower-third-bild",
+    "type": "block",
+    "title": "Lower Third — BILD Style",
+    "description": "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow.",
+    "tags": [
+      "broadcast",
+      "lower-third",
+      "news",
+      "overlay"
+    ],
+    "href": "/catalog/blocks/lower-third-bild",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png"
+  },
+  {
+    "name": "lt-accent-underline",
+    "type": "block",
+    "title": "Lower Third — Accent Underline",
+    "description": "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/lt-accent-underline",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png"
+  },
+  {
+    "name": "lt-bold-block",
+    "type": "block",
+    "title": "Lower Third — Bold Block",
+    "description": "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-bold-block",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png"
+  },
+  {
+    "name": "lt-clean-bar",
+    "type": "block",
+    "title": "Lower Third — Clean Bar",
+    "description": "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview"
+    ],
+    "href": "/catalog/blocks/lt-clean-bar",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png"
+  },
+  {
+    "name": "lt-color-block",
+    "type": "block",
+    "title": "Lower Third — Color Block",
+    "description": "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-color-block",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png"
+  },
+  {
+    "name": "lt-dark-card",
+    "type": "block",
+    "title": "Lower Third — Dark Card",
+    "description": "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "dark"
+    ],
+    "href": "/catalog/blocks/lt-dark-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png"
+  },
+  {
+    "name": "lt-kicker-name",
+    "type": "block",
+    "title": "Lower Third — Kicker Name",
+    "description": "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-kicker-name",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png"
+  },
+  {
+    "name": "lt-mask-reveal",
+    "type": "block",
+    "title": "Lower Third — Mask Reveal",
+    "description": "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-mask-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png"
+  },
+  {
+    "name": "lt-side-rule",
+    "type": "block",
+    "title": "Lower Third — Side Rule",
+    "description": "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/lt-side-rule",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png"
+  },
+  {
+    "name": "lt-soft-pill",
+    "type": "block",
+    "title": "Lower Third — Soft Pill",
+    "description": "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "minimal"
+    ],
+    "href": "/catalog/blocks/lt-soft-pill",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png"
+  },
+  {
+    "name": "lt-stack-bars",
+    "type": "block",
+    "title": "Lower Third — Stack Bars",
+    "description": "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "podcast",
+      "interview",
+      "bold"
+    ],
+    "href": "/catalog/blocks/lt-stack-bars",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png"
+  },
+  {
+    "name": "macos-notification",
+    "type": "block",
+    "title": "macOS Notification",
+    "description": "Animated macOS-style notification banner with app icon and message",
+    "tags": [
+      "social",
+      "overlay",
+      "notification"
+    ],
+    "href": "/catalog/blocks/macos-notification",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png"
+  },
+  {
+    "name": "macos-tahoe-liquid-glass",
+    "type": "block",
+    "title": "macOS Tahoe Liquid Glass Desktop",
+    "description": "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move.",
+    "tags": [
+      "html-in-canvas",
+      "3d",
+      "macos",
+      "tahoe",
+      "gltf"
+    ],
+    "href": "/catalog/blocks/macos-tahoe-liquid-glass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png"
+  },
+  {
+    "name": "morph-text",
+    "type": "component",
+    "title": "Morph Text",
+    "description": "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect",
+    "tags": [
+      "text",
+      "text-effect",
+      "typography",
+      "morph",
+      "gooey",
+      "kinetic",
+      "animation"
+    ],
+    "href": "/catalog/components/morph-text",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.png"
+  },
+  {
+    "name": "motion-blur",
+    "type": "component",
+    "title": "Motion Blur",
+    "description": "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed",
+    "tags": [
+      "effect",
+      "motion-blur",
+      "velocity",
+      "animation",
+      "physics"
+    ],
+    "href": "/catalog/components/motion-blur",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png"
+  },
+  {
+    "name": "news-ticker",
+    "type": "block",
+    "title": "News Ticker",
+    "description": "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl.",
+    "tags": [
+      "lower-third",
+      "overlay",
+      "news",
+      "ticker"
+    ],
+    "href": "/catalog/blocks/news-ticker",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png"
+  },
+  {
+    "name": "north-korea-locked-down",
+    "type": "block",
+    "title": "North Korea Locked Down",
+    "description": "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash.",
+    "tags": [
+      "showcase",
+      "map",
+      "annotation",
+      "youtube",
+      "kinetic"
+    ],
+    "href": "/catalog/blocks/north-korea-locked-down",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
+  },
+  {
+    "name": "nyc-paris-flight",
+    "type": "block",
+    "title": "NYC Paris Flight",
+    "description": "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects.",
+    "tags": [
+      "showcase",
+      "travel",
+      "map",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/nyc-paris-flight",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png"
+  },
+  {
+    "name": "organic-light-leak-overlay",
+    "type": "block",
+    "title": "Organic Light Leak Overlay",
+    "description": "Finite CSS light-leak overlay for memory beats and motivated transitions",
+    "tags": [
+      "light-leak",
+      "film",
+      "memory",
+      "transition",
+      "overlay",
+      "media-treatment-overlay"
+    ],
+    "href": "/catalog/blocks/organic-light-leak-overlay",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png"
+  },
+  {
+    "name": "parallax-unzoom",
+    "type": "component",
+    "title": "Parallax Unzoom",
+    "description": "Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)",
+    "tags": [
+      "transition",
+      "reveal",
+      "unzoom",
+      "parallax",
+      "grid",
+      "hero"
+    ],
+    "href": "/catalog/components/parallax-unzoom",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png"
+  },
+  {
+    "name": "parallax-zoom",
+    "type": "component",
+    "title": "Parallax Zoom",
+    "description": "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition",
+    "tags": [
+      "transition",
+      "zoom",
+      "parallax",
+      "grid",
+      "hero"
+    ],
+    "href": "/catalog/components/parallax-zoom",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png"
+  },
+  {
+    "name": "reddit-post",
+    "type": "block",
+    "title": "Reddit Post Card",
+    "description": "Animated Reddit post card overlay with upvotes and comments",
+    "tags": [
+      "social",
+      "overlay",
+      "reddit"
+    ],
+    "href": "/catalog/blocks/reddit-post",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png"
+  },
+  {
+    "name": "ridged-burn",
+    "type": "block",
+    "title": "Ridged Burn",
+    "description": "Shader transition with ridged turbulence burn effect",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/ridged-burn",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png"
+  },
+  {
+    "name": "ripple-waves",
+    "type": "block",
+    "title": "Ripple Waves",
+    "description": "Shader transition with concentric ripple wave distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/ripple-waves",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png"
+  },
+  {
+    "name": "sdf-iris",
+    "type": "block",
+    "title": "SDF Iris",
+    "description": "Shader transition with signed distance field iris reveal",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/sdf-iris",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png"
+  },
+  {
+    "name": "shimmer-sweep",
+    "type": "component",
+    "title": "Shimmer Sweep",
+    "description": "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals",
+    "tags": [
+      "text",
+      "shimmer",
+      "highlight",
+      "effect"
+    ],
+    "href": "/catalog/components/shimmer-sweep",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
+  },
+  {
+    "name": "spain-map",
+    "type": "block",
+    "title": "Spain Map",
+    "description": "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "spain",
+      "europe",
+      "choropleth"
+    ],
+    "href": "/catalog/blocks/spain-map",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png"
+  },
+  {
+    "name": "spotify-card",
+    "type": "block",
+    "title": "Spotify Now Playing",
+    "description": "Animated Spotify now-playing card with album art and progress bar",
+    "tags": [
+      "social",
+      "overlay",
+      "spotify"
+    ],
+    "href": "/catalog/blocks/spotify-card",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png"
+  },
+  {
+    "name": "swirl-vortex",
+    "type": "block",
+    "title": "Swirl Vortex",
+    "description": "Shader transition with swirling vortex distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/swirl-vortex",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png"
+  },
+  {
+    "name": "texture-mask-text",
+    "type": "component",
+    "title": "Texture Mask Text",
+    "description": "CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps",
+    "tags": [
+      "text",
+      "text-effect",
+      "effect",
+      "texture",
+      "mask"
+    ],
+    "href": "/catalog/components/texture-mask-text",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text.png"
+  },
+  {
+    "name": "thermal-distortion",
+    "type": "block",
+    "title": "Thermal Distortion",
+    "description": "Shader transition with heat haze thermal distortion",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/thermal-distortion",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png"
+  },
+  {
+    "name": "tiktok-follow",
+    "type": "block",
+    "title": "TikTok Follow",
+    "description": "Animated TikTok follow overlay with profile card and follow button",
+    "tags": [
+      "social",
+      "overlay",
+      "tiktok"
+    ],
+    "href": "/catalog/blocks/tiktok-follow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
+  },
+  {
+    "name": "transitions-3d",
+    "type": "block",
+    "title": "3D Transitions",
+    "description": "Showcase of 3D perspective flip and rotate transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-3d",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png"
+  },
+  {
+    "name": "transitions-blur",
+    "type": "block",
+    "title": "Blur Transitions",
+    "description": "Showcase of blur-based transitions between scenes",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-blur",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png"
+  },
+  {
+    "name": "transitions-cover",
+    "type": "block",
+    "title": "Cover Transitions",
+    "description": "Showcase of cover/uncover slide transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-cover",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png"
+  },
+  {
+    "name": "transitions-destruction",
+    "type": "block",
+    "title": "Destruction Transitions",
+    "description": "Showcase of destructive break-apart transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-destruction",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png"
+  },
+  {
+    "name": "transitions-dissolve",
+    "type": "block",
+    "title": "Dissolve Transitions",
+    "description": "Showcase of dissolve and fade transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-dissolve",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png"
+  },
+  {
+    "name": "transitions-distortion",
+    "type": "block",
+    "title": "Distortion Transitions",
+    "description": "Showcase of warp and distortion transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-distortion",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png"
+  },
+  {
+    "name": "transitions-grid",
+    "type": "block",
+    "title": "Grid Transitions",
+    "description": "Showcase of grid-based tile transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-grid",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png"
+  },
+  {
+    "name": "transitions-light",
+    "type": "block",
+    "title": "Light Transitions",
+    "description": "Showcase of light-based glow and flash transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-light",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png"
+  },
+  {
+    "name": "transitions-mechanical",
+    "type": "block",
+    "title": "Mechanical Transitions",
+    "description": "Showcase of mechanical shutter and iris transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-mechanical",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png"
+  },
+  {
+    "name": "transitions-other",
+    "type": "block",
+    "title": "Other Transitions",
+    "description": "Showcase of miscellaneous creative transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-other",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png"
+  },
+  {
+    "name": "transitions-push",
+    "type": "block",
+    "title": "Push Transitions",
+    "description": "Showcase of push and slide transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-push",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png"
+  },
+  {
+    "name": "transitions-radial",
+    "type": "block",
+    "title": "Radial Transitions",
+    "description": "Showcase of radial wipe and reveal transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-radial",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png"
+  },
+  {
+    "name": "transitions-scale",
+    "type": "block",
+    "title": "Scale Transitions",
+    "description": "Showcase of scale and zoom transitions",
+    "tags": [
+      "transition",
+      "showcase"
+    ],
+    "href": "/catalog/blocks/transitions-scale",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png"
+  },
+  {
+    "name": "ui-3d-reveal",
+    "type": "block",
+    "title": "3D UI Reveal",
+    "description": "Perspective 3D reveal animation for UI elements",
+    "tags": [
+      "showcase",
+      "3d",
+      "reveal"
+    ],
+    "href": "/catalog/blocks/ui-3d-reveal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png"
+  },
+  {
+    "name": "us-map",
+    "type": "block",
+    "title": "US Map",
+    "description": "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "usa",
+      "choropleth"
+    ],
+    "href": "/catalog/blocks/us-map",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png"
+  },
+  {
+    "name": "us-map-bubble",
+    "type": "block",
+    "title": "US Bubble Map",
+    "description": "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "usa",
+      "bubble",
+      "cities"
+    ],
+    "href": "/catalog/blocks/us-map-bubble",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png"
+  },
+  {
+    "name": "us-map-flow",
+    "type": "block",
+    "title": "US Flow Map",
+    "description": "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "usa",
+      "flow",
+      "connections",
+      "arcs"
+    ],
+    "href": "/catalog/blocks/us-map-flow",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png"
+  },
+  {
+    "name": "us-map-hex",
+    "type": "block",
+    "title": "US Hex Grid Map",
+    "description": "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "usa",
+      "hexgrid",
+      "tilegrid"
+    ],
+    "href": "/catalog/blocks/us-map-hex",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png"
+  },
+  {
+    "name": "vfx-iphone-device",
+    "type": "block",
+    "title": "iPhone & MacBook 3D Showcase",
+    "description": "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable.",
+    "tags": [
+      "html-in-canvas",
+      "3d",
+      "device",
+      "iphone",
+      "macbook",
+      "gltf"
+    ],
+    "href": "/catalog/blocks/vfx-iphone-device",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png"
+  },
+  {
+    "name": "vfx-liquid-background",
+    "type": "block",
+    "title": "Liquid Background",
+    "description": "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics.",
+    "tags": [
+      "html-in-canvas",
+      "liquid",
+      "webgl",
+      "displacement",
+      "background"
+    ],
+    "href": "/catalog/blocks/vfx-liquid-background",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png"
+  },
+  {
+    "name": "vfx-liquid-glass",
+    "type": "block",
+    "title": "Liquid Glass",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-liquid-glass",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png"
+  },
+  {
+    "name": "vfx-magnetic",
+    "type": "block",
+    "title": "Magnetic",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-magnetic",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png"
+  },
+  {
+    "name": "vfx-portal",
+    "type": "block",
+    "title": "Portal",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-portal",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png"
+  },
+  {
+    "name": "vfx-shatter",
+    "type": "block",
+    "title": "Shatter",
+    "description": "VFX composition block",
+    "tags": [
+      "html-in-canvas",
+      "webgl"
+    ],
+    "href": "/catalog/blocks/vfx-shatter",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png"
+  },
+  {
+    "name": "vfx-text-cursor",
+    "type": "block",
+    "title": "VFX Text Cursor",
+    "description": "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges.",
+    "tags": [
+      "html-in-canvas",
+      "text",
+      "shader",
+      "cursor",
+      "chromatic"
+    ],
+    "href": "/catalog/blocks/vfx-text-cursor",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png"
+  },
+  {
+    "name": "vignette",
+    "type": "component",
+    "title": "Vignette",
+    "description": "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center",
+    "tags": [
+      "vignette",
+      "overlay",
+      "cinematic",
+      "effect"
+    ],
+    "href": "/catalog/components/vignette",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png"
+  },
+  {
+    "name": "vpn-youtube-spot",
+    "type": "block",
+    "title": "VPN YouTube Spot",
+    "description": "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects.",
+    "tags": [
+      "app",
+      "showcase",
+      "youtube",
+      "sfx"
+    ],
+    "href": "/catalog/blocks/vpn-youtube-spot",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png"
+  },
+  {
+    "name": "whip-pan",
+    "type": "block",
+    "title": "Whip Pan",
+    "description": "Shader transition simulating a fast camera whip pan",
+    "tags": [
+      "transition",
+      "shader"
+    ],
+    "href": "/catalog/blocks/whip-pan",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png"
+  },
+  {
+    "name": "world-map",
+    "type": "block",
+    "title": "World Map",
+    "description": "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection",
+    "tags": [
+      "data",
+      "map",
+      "geography",
+      "world",
+      "choropleth"
+    ],
+    "href": "/catalog/blocks/world-map",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png"
+  },
+  {
+    "name": "x-post",
+    "type": "block",
+    "title": "X Post Card",
+    "description": "Animated X/Twitter post card overlay with engagement metrics",
+    "tags": [
+      "social",
+      "overlay",
+      "twitter"
+    ],
+    "href": "/catalog/blocks/x-post",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png"
+  },
+  {
+    "name": "yt-lower-third",
+    "type": "block",
+    "title": "YouTube Lower Third",
+    "description": "Animated YouTube subscribe lower third with avatar and channel info",
+    "tags": [
+      "social",
+      "overlay",
+      "youtube"
+    ],
+    "href": "/catalog/blocks/yt-lower-third",
+    "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png"
+  }
 ]
diff --git a/registry/components/count-up/count-up.html b/registry/components/count-up/count-up.html
new file mode 100644
index 0000000000..02d8d2957c
--- /dev/null
+++ b/registry/components/count-up/count-up.html
@@ -0,0 +1,84 @@
+<!--
+  Count Up — deterministic proxy-driven counter with a synchronized scale grow.
+
+  Usage: wrap your number in the markup below, paste this snippet into your
+  composition, then call cuCountUp() from your timeline script. The number is
+  written through an explicit thousands grouper (never toLocaleString), so a
+  render is byte-identical regardless of the machine's locale
+  (857,531 en-US / 857.531 de-DE / 8,57,531 hi-IN with toLocaleString).
+
+  Markup (hand-authored in your composition):
+
+    <div class="cu-wrap">
+      <span class="cu-num" id="cu-revenue">500</span>
+      <span class="cu-suffix">loops</span>
+    </div>
+
+  Customize:
+  - Final type size is static CSS on .cu-num — the helper animates scale only,
+    never fontSize (counting-dynamic-scale).
+  - Pass a non-zero `from` so the number reads as live, not booting from zero.
+  - tabular-nums keeps digit columns stable while the value changes.
+-->
+
+<style>
+  .cu-wrap {
+    display: flex;
+    align-items: baseline;
+    gap: 0.35em;
+  }
+
+  .cu-num {
+    font-variant-numeric: tabular-nums;
+    display: inline-block;
+    transform-origin: 0% 50%;
+  }
+
+  .cu-suffix {
+    display: inline-block;
+  }
+</style>
+
+<script>
+  // Deterministic thousands grouping — toLocaleString depends on render locale.
+  function cuGroup(n) {
+    return String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  }
+
+  // Drives el.textContent from a proxy object (seek-safe: pure timeline
+  // tweens, no wall-clock state), with a separate scale fromTo sharing the
+  // same ease and duration. Never creates DOM.
+  function cuCountUp(tl, el, opts) {
+    const at = opts.at === undefined ? 0 : opts.at;
+    const from = opts.from === undefined ? 0 : opts.from;
+    const duration = opts.duration === undefined ? 1.5 : opts.duration;
+    const ease = opts.ease === undefined ? "power3.out" : opts.ease;
+    const startScale = opts.startScale === undefined ? 0.55 : opts.startScale;
+    const proxy = { v: from };
+    tl.to(
+      proxy,
+      {
+        v: opts.to,
+        duration,
+        ease,
+        onUpdate: () => {
+          el.textContent = cuGroup(proxy.v);
+        },
+      },
+      at,
+    );
+    tl.fromTo(el, { scale: startScale }, { scale: 1, duration, ease }, at);
+  }
+</script>
+
+<!--
+  Timeline integration example (add to your composition's GSAP timeline):
+
+  // Counts 500 -> 551 over 1.7s — non-zero start reads as a live number
+  cuCountUp(tl, document.getElementById("cu-revenue"), {
+    at: 0.4,
+    from: 500,
+    to: 551,
+    duration: 1.7,
+  });
+-->
diff --git a/registry/components/count-up/demo.html b/registry/components/count-up/demo.html
new file mode 100644
index 0000000000..344eee2c7e
--- /dev/null
+++ b/registry/components/count-up/demo.html
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Count Up — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="count-up-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="demo-canvas">
+        <!-- Example 1: large statistic from zero -->
+        <div class="demo-stat" style="opacity: 0" id="cu-stat-a">
+          <div class="cu-wrap">
+            <span
+              class="cu-num"
+              id="cu-notes"
+              style="font-size: 160px; font-weight: 800; color: #ffffff"
+              >0</span
+            >
+          </div>
+          <div class="demo-label">notes across the archive</div>
+        </div>
+
+        <!-- Example 2: live number with a non-zero start and suffix -->
+        <div class="demo-stat" style="opacity: 0" id="cu-stat-b">
+          <div class="cu-wrap">
+            <span
+              class="cu-num"
+              id="cu-loops"
+              style="font-size: 88px; font-weight: 800; color: #6ee7b7"
+              >500</span
+            >
+            <span class="cu-suffix" style="font-size: 40px; color: #888888">loops live now</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Count Up component -->
+      <style>
+        .demo-canvas {
+          width: 1920px;
+          height: 1080px;
+          background: #0a0a0f;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 80px;
+          font-family: "Inter", sans-serif;
+        }
+
+        .demo-label {
+          margin-top: 18px;
+          font-size: 32px;
+          font-weight: 700;
+          letter-spacing: 2px;
+          text-transform: uppercase;
+          color: #888888;
+          text-align: center;
+        }
+
+        .cu-wrap {
+          display: flex;
+          align-items: baseline;
+          gap: 0.35em;
+        }
+
+        .cu-num {
+          font-variant-numeric: tabular-nums;
+          display: inline-block;
+          transform-origin: 0% 50%;
+        }
+
+        .cu-suffix {
+          display: inline-block;
+        }
+      </style>
+
+      <script>
+        (function () {
+          // Deterministic thousands grouping — toLocaleString depends on render locale.
+          function cuGroup(n) {
+            return String(Math.round(n)).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+          }
+
+          function cuCountUp(tl, el, opts) {
+            const at = opts.at === undefined ? 0 : opts.at;
+            const from = opts.from === undefined ? 0 : opts.from;
+            const duration = opts.duration === undefined ? 1.5 : opts.duration;
+            const ease = opts.ease === undefined ? "power3.out" : opts.ease;
+            const startScale = opts.startScale === undefined ? 0.55 : opts.startScale;
+            const proxy = { v: from };
+            tl.to(
+              proxy,
+              {
+                v: opts.to,
+                duration,
+                ease,
+                onUpdate: () => {
+                  el.textContent = cuGroup(proxy.v);
+                },
+              },
+              at,
+            );
+            tl.fromTo(el, { scale: startScale }, { scale: 1, duration, ease }, at);
+          }
+
+          const tl = gsap.timeline({ paused: true });
+
+          tl.to("#cu-stat-a", { opacity: 1, duration: 0.4, ease: "power2.out" }, 0.2);
+          cuCountUp(tl, document.getElementById("cu-notes"), {
+            at: 0.4,
+            to: 857531,
+            duration: 2.1,
+          });
+
+          tl.to("#cu-stat-b", { opacity: 1, duration: 0.4, ease: "power2.out" }, 1.0);
+          cuCountUp(tl, document.getElementById("cu-loops"), {
+            at: 1.2,
+            from: 500,
+            to: 551,
+            duration: 1.7,
+          });
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["count-up-demo"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/count-up/registry-item.json b/registry/components/count-up/registry-item.json
new file mode 100644
index 0000000000..0ab44785cf
--- /dev/null
+++ b/registry/components/count-up/registry-item.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "count-up",
+  "type": "hyperframes:component",
+  "title": "Count Up",
+  "description": "Deterministic count-up number — proxy-driven counter with explicit thousands grouping (locale-independent), tabular-nums, optional non-zero start so the number reads as live, and a synchronized scale grow",
+  "tags": ["counter", "count-up", "number", "statistic"],
+  "files": [
+    {
+      "path": "count-up.html",
+      "target": "compositions/components/count-up.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
diff --git a/registry/registry.json b/registry/registry.json
index 19d8d68ae7..f17bce7b71 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -91,6 +91,10 @@
       "name": "freeze-frame-dressing",
       "type": "hyperframes:block"
     },
+    {
+      "name": "count-up",
+      "type": "hyperframes:component"
+    },
     {
       "name": "shimmer-sweep",
       "type": "hyperframes:component"