diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
new file mode 100644
index 000000000..a03037457
--- /dev/null
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -0,0 +1,44 @@
+---
+title: "App Showcase"
+description: "Fitness app product showcase with three floating smartphone screens"
+---
+
+# App Showcase
+
+Fitness app product showcase with three floating smartphone screens
+
+`showcase` `app` `3d`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/app-showcase.mp4" poster="/images/catalog/blocks/app-showcase.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add app-showcase
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5.5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `app-showcase.html` | `compositions/app-showcase.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="app-showcase" data-composition-src="compositions/app-showcase.html" data-start="0" data-duration="5.5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/ascii-dashboard.mdx b/docs/catalog/blocks/ascii-dashboard.mdx
new file mode 100644
index 000000000..e6c094b51
--- /dev/null
+++ b/docs/catalog/blocks/ascii-dashboard.mdx
@@ -0,0 +1,44 @@
+---
+title: "ASCII Dashboard"
+description: "Retro terminal-style data visualization with charts and metrics"
+---
+
+# ASCII Dashboard
+
+Retro terminal-style data visualization with charts and metrics
+
+`data` `ascii` `dashboard`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ascii-dashboard.mp4" poster="/images/catalog/blocks/ascii-dashboard.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add ascii-dashboard
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 10s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `ascii-dashboard.html` | `compositions/ascii-dashboard.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ascii-dashboard" data-composition-src="compositions/ascii-dashboard.html" data-start="0" data-duration="10" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/ascii-lightning.mdx b/docs/catalog/blocks/ascii-lightning.mdx
new file mode 100644
index 000000000..d5bf553df
--- /dev/null
+++ b/docs/catalog/blocks/ascii-lightning.mdx
@@ -0,0 +1,44 @@
+---
+title: "ASCII Lightning"
+description: "Pure ASCII art lightning bolt animation on dark background"
+---
+
+# ASCII Lightning
+
+Pure ASCII art lightning bolt animation on dark background
+
+`title` `ascii` `animation`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ascii-lightning.mp4" poster="/images/catalog/blocks/ascii-lightning.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add ascii-lightning
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 9s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `ascii-lightning.html` | `compositions/ascii-lightning.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ascii-lightning" data-composition-src="compositions/ascii-lightning.html" data-start="0" data-duration="9" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
new file mode 100644
index 000000000..edb922b6e
--- /dev/null
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -0,0 +1,45 @@
+---
+title: "Instagram Follow"
+description: "Animated Instagram follow overlay with profile card and follow button"
+---
+
+# Instagram Follow
+
+Animated Instagram follow overlay with profile card and follow button
+
+`social` `overlay` `instagram`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/instagram-follow.mp4" poster="/images/catalog/blocks/instagram-follow.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add instagram-follow
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1080×1920 |
+| Duration | 4.5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `instagram-follow.html` | `compositions/instagram-follow.html` | hyperframes:composition |
+| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="instagram-follow" data-composition-src="compositions/instagram-follow.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1080" data-height="1920"></div>
+```
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
new file mode 100644
index 000000000..60e419d7e
--- /dev/null
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -0,0 +1,44 @@
+---
+title: "macOS Notification"
+description: "Animated macOS-style notification banner with app icon and message"
+---
+
+# macOS Notification
+
+Animated macOS-style notification banner with app icon and message
+
+`social` `overlay` `notification`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/macos-notification.mp4" poster="/images/catalog/blocks/macos-notification.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add macos-notification
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `macos-notification.html` | `compositions/macos-notification.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="macos-notification" data-composition-src="compositions/macos-notification.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
new file mode 100644
index 000000000..ec50ccbcb
--- /dev/null
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -0,0 +1,44 @@
+---
+title: "Reddit Post Card"
+description: "Animated Reddit post card overlay with upvotes and comments"
+---
+
+# Reddit Post Card
+
+Animated Reddit post card overlay with upvotes and comments
+
+`social` `overlay` `reddit`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/reddit-post.mp4" poster="/images/catalog/blocks/reddit-post.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add reddit-post
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `reddit-post.html` | `compositions/reddit-post.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="reddit-post" data-composition-src="compositions/reddit-post.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
new file mode 100644
index 000000000..eac26b1d9
--- /dev/null
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -0,0 +1,44 @@
+---
+title: "Spotify Now Playing"
+description: "Animated Spotify now-playing card with album art and progress bar"
+---
+
+# Spotify Now Playing
+
+Animated Spotify now-playing card with album art and progress bar
+
+`social` `overlay` `spotify`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/spotify-card.mp4" poster="/images/catalog/blocks/spotify-card.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add spotify-card
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1080×1920 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `spotify-card.html` | `compositions/spotify-card.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="spotify-card" data-composition-src="compositions/spotify-card.html" data-start="0" data-duration="5" data-track-index="1" data-width="1080" data-height="1920"></div>
+```
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
new file mode 100644
index 000000000..8230960b3
--- /dev/null
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -0,0 +1,45 @@
+---
+title: "TikTok Follow"
+description: "Animated TikTok follow overlay with profile card and follow button"
+---
+
+# TikTok Follow
+
+Animated TikTok follow overlay with profile card and follow button
+
+`social` `overlay` `tiktok`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/tiktok-follow.mp4" poster="/images/catalog/blocks/tiktok-follow.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add tiktok-follow
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1080×1920 |
+| Duration | 4.5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `tiktok-follow.html` | `compositions/tiktok-follow.html` | hyperframes:composition |
+| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="tiktok-follow" data-composition-src="compositions/tiktok-follow.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1080" data-height="1920"></div>
+```
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
new file mode 100644
index 000000000..d3a82b42b
--- /dev/null
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -0,0 +1,44 @@
+---
+title: "3D UI Reveal"
+description: "Perspective 3D reveal animation for UI elements"
+---
+
+# 3D UI Reveal
+
+Perspective 3D reveal animation for UI elements
+
+`showcase` `3d` `reveal`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/ui-3d-reveal.mp4" poster="/images/catalog/blocks/ui-3d-reveal.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add ui-3d-reveal
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 13s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `ui-3d-reveal.html` | `compositions/ui-3d-reveal.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="ui-3d-reveal" data-composition-src="compositions/ui-3d-reveal.html" data-start="0" data-duration="13" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
new file mode 100644
index 000000000..5c3f1e92b
--- /dev/null
+++ b/docs/catalog/blocks/x-post.mdx
@@ -0,0 +1,44 @@
+---
+title: "X Post Card"
+description: "Animated X/Twitter post card overlay with engagement metrics"
+---
+
+# X Post Card
+
+Animated X/Twitter post card overlay with engagement metrics
+
+`social` `overlay` `twitter`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/x-post.mp4" poster="/images/catalog/blocks/x-post.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add x-post
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `x-post.html` | `compositions/x-post.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="x-post" data-composition-src="compositions/x-post.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
new file mode 100644
index 000000000..ea5be9185
--- /dev/null
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -0,0 +1,45 @@
+---
+title: "YouTube Lower Third"
+description: "Animated YouTube subscribe lower third with avatar and channel info"
+---
+
+# YouTube Lower Third
+
+Animated YouTube subscribe lower third with avatar and channel info
+
+`social` `overlay` `youtube`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="/images/catalog/blocks/yt-lower-third.mp4" poster="/images/catalog/blocks/yt-lower-third.png" muted loop playsInline autoPlay />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add yt-lower-third
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 4.5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `yt-lower-third.html` | `compositions/yt-lower-third.html` | hyperframes:composition |
+| `assets/avatar.jpg` | `assets/avatar.jpg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="yt-lower-third" data-composition-src="compositions/yt-lower-third.html" data-start="0" data-duration="4.5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```
diff --git a/docs/docs.json b/docs/docs.json
index 0fb9f1c1c..385e722f2 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -99,9 +99,20 @@
           {
             "group": "Blocks",
             "pages": [
+              "catalog/blocks/app-showcase",
+              "catalog/blocks/ascii-dashboard",
+              "catalog/blocks/ascii-lightning",
               "catalog/blocks/data-chart",
               "catalog/blocks/flowchart",
-              "catalog/blocks/logo-outro"
+              "catalog/blocks/instagram-follow",
+              "catalog/blocks/logo-outro",
+              "catalog/blocks/macos-notification",
+              "catalog/blocks/reddit-post",
+              "catalog/blocks/spotify-card",
+              "catalog/blocks/tiktok-follow",
+              "catalog/blocks/ui-3d-reveal",
+              "catalog/blocks/x-post",
+              "catalog/blocks/yt-lower-third"
             ]
           },
           {
diff --git a/docs/images/catalog/blocks/app-showcase.mp4 b/docs/images/catalog/blocks/app-showcase.mp4
new file mode 100644
index 000000000..149fcd6d8
Binary files /dev/null and b/docs/images/catalog/blocks/app-showcase.mp4 differ
diff --git a/docs/images/catalog/blocks/app-showcase.png b/docs/images/catalog/blocks/app-showcase.png
new file mode 100644
index 000000000..14aea63ec
Binary files /dev/null and b/docs/images/catalog/blocks/app-showcase.png differ
diff --git a/docs/images/catalog/blocks/ascii-dashboard.mp4 b/docs/images/catalog/blocks/ascii-dashboard.mp4
new file mode 100644
index 000000000..dc26938e1
Binary files /dev/null and b/docs/images/catalog/blocks/ascii-dashboard.mp4 differ
diff --git a/docs/images/catalog/blocks/ascii-dashboard.png b/docs/images/catalog/blocks/ascii-dashboard.png
new file mode 100644
index 000000000..097831750
Binary files /dev/null and b/docs/images/catalog/blocks/ascii-dashboard.png differ
diff --git a/docs/images/catalog/blocks/ascii-lightning.mp4 b/docs/images/catalog/blocks/ascii-lightning.mp4
new file mode 100644
index 000000000..1e4f795c9
Binary files /dev/null and b/docs/images/catalog/blocks/ascii-lightning.mp4 differ
diff --git a/docs/images/catalog/blocks/ascii-lightning.png b/docs/images/catalog/blocks/ascii-lightning.png
new file mode 100644
index 000000000..dedddb4d9
Binary files /dev/null and b/docs/images/catalog/blocks/ascii-lightning.png differ
diff --git a/docs/images/catalog/blocks/instagram-follow.mp4 b/docs/images/catalog/blocks/instagram-follow.mp4
new file mode 100644
index 000000000..c3a6fc58f
Binary files /dev/null and b/docs/images/catalog/blocks/instagram-follow.mp4 differ
diff --git a/docs/images/catalog/blocks/instagram-follow.png b/docs/images/catalog/blocks/instagram-follow.png
new file mode 100644
index 000000000..77cc1fa01
Binary files /dev/null and b/docs/images/catalog/blocks/instagram-follow.png differ
diff --git a/docs/images/catalog/blocks/macos-notification.mp4 b/docs/images/catalog/blocks/macos-notification.mp4
new file mode 100644
index 000000000..f14c7a6d5
Binary files /dev/null and b/docs/images/catalog/blocks/macos-notification.mp4 differ
diff --git a/docs/images/catalog/blocks/macos-notification.png b/docs/images/catalog/blocks/macos-notification.png
new file mode 100644
index 000000000..a90b9a0bd
Binary files /dev/null and b/docs/images/catalog/blocks/macos-notification.png differ
diff --git a/docs/images/catalog/blocks/reddit-post.mp4 b/docs/images/catalog/blocks/reddit-post.mp4
new file mode 100644
index 000000000..8ed8633b5
Binary files /dev/null and b/docs/images/catalog/blocks/reddit-post.mp4 differ
diff --git a/docs/images/catalog/blocks/reddit-post.png b/docs/images/catalog/blocks/reddit-post.png
new file mode 100644
index 000000000..e05961664
Binary files /dev/null and b/docs/images/catalog/blocks/reddit-post.png differ
diff --git a/docs/images/catalog/blocks/spotify-card.mp4 b/docs/images/catalog/blocks/spotify-card.mp4
new file mode 100644
index 000000000..2d1f38d6e
Binary files /dev/null and b/docs/images/catalog/blocks/spotify-card.mp4 differ
diff --git a/docs/images/catalog/blocks/spotify-card.png b/docs/images/catalog/blocks/spotify-card.png
new file mode 100644
index 000000000..a83e20854
Binary files /dev/null and b/docs/images/catalog/blocks/spotify-card.png differ
diff --git a/docs/images/catalog/blocks/tiktok-follow.mp4 b/docs/images/catalog/blocks/tiktok-follow.mp4
new file mode 100644
index 000000000..050355445
Binary files /dev/null and b/docs/images/catalog/blocks/tiktok-follow.mp4 differ
diff --git a/docs/images/catalog/blocks/tiktok-follow.png b/docs/images/catalog/blocks/tiktok-follow.png
new file mode 100644
index 000000000..0022678fa
Binary files /dev/null and b/docs/images/catalog/blocks/tiktok-follow.png differ
diff --git a/docs/images/catalog/blocks/ui-3d-reveal.mp4 b/docs/images/catalog/blocks/ui-3d-reveal.mp4
new file mode 100644
index 000000000..b6ae04f30
Binary files /dev/null and b/docs/images/catalog/blocks/ui-3d-reveal.mp4 differ
diff --git a/docs/images/catalog/blocks/ui-3d-reveal.png b/docs/images/catalog/blocks/ui-3d-reveal.png
new file mode 100644
index 000000000..7f0524d09
Binary files /dev/null and b/docs/images/catalog/blocks/ui-3d-reveal.png differ
diff --git a/docs/images/catalog/blocks/x-post.mp4 b/docs/images/catalog/blocks/x-post.mp4
new file mode 100644
index 000000000..ee06916ce
Binary files /dev/null and b/docs/images/catalog/blocks/x-post.mp4 differ
diff --git a/docs/images/catalog/blocks/x-post.png b/docs/images/catalog/blocks/x-post.png
new file mode 100644
index 000000000..857663e58
Binary files /dev/null and b/docs/images/catalog/blocks/x-post.png differ
diff --git a/docs/images/catalog/blocks/yt-lower-third.mp4 b/docs/images/catalog/blocks/yt-lower-third.mp4
new file mode 100644
index 000000000..daaae655e
Binary files /dev/null and b/docs/images/catalog/blocks/yt-lower-third.mp4 differ
diff --git a/docs/images/catalog/blocks/yt-lower-third.png b/docs/images/catalog/blocks/yt-lower-third.png
new file mode 100644
index 000000000..983604322
Binary files /dev/null and b/docs/images/catalog/blocks/yt-lower-third.png differ
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 0dfdef035..2c4318d62 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -1,4 +1,43 @@
 [
+  {
+    "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": "/images/catalog/blocks/app-showcase.png"
+  },
+  {
+    "name": "ascii-dashboard",
+    "type": "block",
+    "title": "ASCII Dashboard",
+    "description": "Retro terminal-style data visualization with charts and metrics",
+    "tags": [
+      "data",
+      "ascii",
+      "dashboard"
+    ],
+    "href": "/catalog/blocks/ascii-dashboard",
+    "preview": "/images/catalog/blocks/ascii-dashboard.png"
+  },
+  {
+    "name": "ascii-lightning",
+    "type": "block",
+    "title": "ASCII Lightning",
+    "description": "Pure ASCII art lightning bolt animation on dark background",
+    "tags": [
+      "title",
+      "ascii",
+      "animation"
+    ],
+    "href": "/catalog/blocks/ascii-lightning",
+    "preview": "/images/catalog/blocks/ascii-lightning.png"
+  },
   {
     "name": "data-chart",
     "type": "block",
@@ -53,6 +92,19 @@
     "href": "/catalog/components/grid-pixelate-wipe",
     "preview": "/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": "/images/catalog/blocks/instagram-follow.png"
+  },
   {
     "name": "logo-outro",
     "type": "block",
@@ -66,6 +118,32 @@
     "href": "/catalog/blocks/logo-outro",
     "preview": "/images/catalog/blocks/logo-outro.png"
   },
+  {
+    "name": "macos-notification",
+    "type": "block",
+    "title": "macOS Notification",
+    "description": "Animated macOS-style notification banner with app icon and message",
+    "tags": [
+      "social",
+      "overlay",
+      "notification"
+    ],
+    "href": "/catalog/blocks/macos-notification",
+    "preview": "/images/catalog/blocks/macos-notification.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": "/images/catalog/blocks/reddit-post.png"
+  },
   {
     "name": "shimmer-sweep",
     "type": "component",
@@ -79,5 +157,70 @@
     ],
     "href": "/catalog/components/shimmer-sweep",
     "preview": "/images/catalog/components/shimmer-sweep.png"
+  },
+  {
+    "name": "spotify-card",
+    "type": "block",
+    "title": "Spotify Now Playing",
+    "description": "Animated Spotify now-playing card with album art and progress bar",
+    "tags": [
+      "social",
+      "overlay",
+      "spotify"
+    ],
+    "href": "/catalog/blocks/spotify-card",
+    "preview": "/images/catalog/blocks/spotify-card.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": "/images/catalog/blocks/tiktok-follow.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": "/images/catalog/blocks/ui-3d-reveal.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": "/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": "/images/catalog/blocks/yt-lower-third.png"
   }
 ]
diff --git a/registry/blocks/app-showcase/app-showcase.html b/registry/blocks/app-showcase/app-showcase.html
new file mode 100644
index 000000000..d9454215c
--- /dev/null
+++ b/registry/blocks/app-showcase/app-showcase.html
@@ -0,0 +1,946 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>app-showcase</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="scene-3-phones"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5.5"
+    >
+      <!-- Background -->
+      <div class="s3-bg" id="s3Bg"></div>
+      <div class="s3-bg-glow" id="s3BgGlow"></div>
+
+      <!-- Stage wrapper for ambient scale -->
+      <div class="s3-stage" id="s3Stage">
+        <!-- ═══════════════════════════════════════
+           LEFT PHONE — Lifestyle / Motivational
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-left" id="s3PhoneLeft">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-left">
+              <!-- Abstract exercise shapes -->
+              <div class="left-shapes">
+                <svg viewBox="0 0 304 400" xmlns="http://www.w3.org/2000/svg" fill="none">
+                  <!-- Abstract running figure — geometric -->
+                  <circle cx="152" cy="80" r="28" fill="#271f15" opacity="0.15" />
+                  <line
+                    x1="152"
+                    y1="108"
+                    x2="152"
+                    y2="200"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="145"
+                    x2="115"
+                    y2="175"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="145"
+                    x2="195"
+                    y2="165"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="200"
+                    x2="120"
+                    y2="260"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <line
+                    x1="152"
+                    y1="200"
+                    x2="190"
+                    y2="255"
+                    stroke="#271f15"
+                    stroke-width="6"
+                    stroke-linecap="round"
+                    opacity="0.15"
+                  />
+                  <!-- Decorative arcs -->
+                  <path
+                    d="M60 300 Q152 240 244 300"
+                    stroke="#e4fa72"
+                    stroke-width="3"
+                    fill="none"
+                    opacity="0.5"
+                  />
+                  <path
+                    d="M40 330 Q152 260 264 330"
+                    stroke="#e4fa72"
+                    stroke-width="2"
+                    fill="none"
+                    opacity="0.3"
+                  />
+                </svg>
+              </div>
+              <div class="left-bottom">
+                <div class="left-tagline" id="s3Tagline">Unleash Full Potential</div>
+                <div class="left-cta">START NOW</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══════════════════════════════════════
+           CENTER PHONE — Dashboard (Hero)
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-center" id="s3PhoneCenter">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-center">
+              <!-- Header -->
+              <div class="center-header">
+                <div class="center-avatar">JM</div>
+                <div class="center-user-info">
+                  <div class="center-name">James Medrano</div>
+                  <div class="center-subtitle">Premium Member</div>
+                </div>
+                <div class="center-bell">
+                  <svg viewBox="0 0 20 20" width="20" height="20" fill="none">
+                    <path
+                      d="M10 2a5 5 0 00-5 5v3l-1.5 2.5h13L15 10V7a5 5 0 00-5-5z"
+                      stroke="#7c857c"
+                      stroke-width="1.4"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M8 16.5a2 2 0 004 0"
+                      stroke="#7c857c"
+                      stroke-width="1.4"
+                      stroke-linecap="round"
+                    />
+                    <circle cx="14" cy="5" r="3" fill="#e4fa72" />
+                  </svg>
+                </div>
+              </div>
+
+              <!-- Weekly Goal -->
+              <div class="center-goal">
+                <div class="goal-label">Weekly Goal</div>
+                <div class="goal-ring-wrap">
+                  <svg class="goal-ring" viewBox="0 0 140 140">
+                    <circle
+                      class="ring-track"
+                      cx="70"
+                      cy="70"
+                      r="52"
+                      fill="none"
+                      stroke="#333"
+                      stroke-width="10"
+                    />
+                    <circle
+                      class="ring-fill"
+                      id="s3Ring"
+                      cx="70"
+                      cy="70"
+                      r="52"
+                      fill="none"
+                      stroke="#e4fa72"
+                      stroke-width="10"
+                      stroke-linecap="round"
+                      transform="rotate(-90 70 70)"
+                    />
+                  </svg>
+                  <div class="goal-count">
+                    <span class="goal-num">2</span>
+                    <span class="goal-sep">/</span>
+                    <span class="goal-den">3</span>
+                  </div>
+                </div>
+                <div class="goal-days">
+                  <span class="day done">M</span>
+                  <span class="day done">T</span>
+                  <span class="day">W</span>
+                  <span class="day">T</span>
+                  <span class="day">F</span>
+                  <span class="day">S</span>
+                  <span class="day">S</span>
+                </div>
+              </div>
+
+              <!-- Your Progress -->
+              <div class="center-progress">
+                <div class="progress-header">
+                  <span class="progress-title">Your Progress</span>
+                  <span class="progress-link">See all</span>
+                </div>
+                <div class="progress-bars">
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <path
+                          d="M8 2l1.5 3H13l-2.5 2 1 3L8 8.5 4.5 10l1-3L3 5h3.5z"
+                          fill="#e4fa72"
+                        />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Running</span>
+                      <span class="bar-val">5.2 km</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v1" id="s3Bar1"></div></div>
+                  </div>
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <circle cx="8" cy="8" r="5" stroke="#e4fa72" stroke-width="2" />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Cycling</span>
+                      <span class="bar-val">12.8 km</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v2" id="s3Bar2"></div></div>
+                  </div>
+                  <div class="bar-row">
+                    <div class="bar-icon">
+                      <svg viewBox="0 0 16 16" width="14" height="14" fill="none">
+                        <rect
+                          x="3"
+                          y="6"
+                          width="10"
+                          height="6"
+                          rx="1"
+                          stroke="#e4fa72"
+                          stroke-width="1.5"
+                        />
+                        <path d="M6 6V4a2 2 0 014 0v2" stroke="#e4fa72" stroke-width="1.5" />
+                      </svg>
+                    </div>
+                    <div class="bar-info">
+                      <span class="bar-name">Strength</span>
+                      <span class="bar-val">45 min</span>
+                    </div>
+                    <div class="bar-track"><div class="bar-value bar-v3" id="s3Bar3"></div></div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- ═══════════════════════════════════════
+           RIGHT PHONE — Calories Data
+      ═══════════════════════════════════════ -->
+        <div class="s3-phone s3-phone-right" id="s3PhoneRight">
+          <div class="s3-bezel">
+            <div class="s3-notch"></div>
+            <div class="s3-screen s3-screen-right">
+              <div class="right-header">
+                <div class="right-title">Burned Calories</div>
+                <div class="right-value">740 <span class="right-unit">kcal</span></div>
+              </div>
+
+              <div class="right-graph-wrap">
+                <svg class="right-graph" viewBox="0 0 260 130" xmlns="http://www.w3.org/2000/svg">
+                  <!-- Grid lines -->
+                  <line
+                    x1="10"
+                    y1="25"
+                    x2="250"
+                    y2="25"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="55"
+                    x2="250"
+                    y2="55"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="85"
+                    x2="250"
+                    y2="85"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <line
+                    x1="10"
+                    y1="115"
+                    x2="250"
+                    y2="115"
+                    stroke="#d9e0bc"
+                    stroke-width="0.5"
+                    opacity="0.5"
+                  />
+                  <!-- Area fill -->
+                  <path
+                    class="graph-area"
+                    id="s3GraphArea"
+                    d="M10,105 L50,80 90,90 130,45 170,60 210,25 250,35 250,115 10,115 Z"
+                    fill="#e4fa72"
+                    opacity="0.15"
+                  />
+                  <!-- Line -->
+                  <polyline
+                    class="graph-line"
+                    id="s3GraphLine"
+                    points="10,105 50,80 90,90 130,45 170,60 210,25 250,35"
+                    fill="none"
+                    stroke="#e4fa72"
+                    stroke-width="2.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <!-- Dots -->
+                  <circle class="graph-dot" cx="10" cy="105" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="50" cy="80" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="90" cy="90" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="130" cy="45" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="170" cy="60" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="210" cy="25" r="3.5" fill="#e4fa72" />
+                  <circle class="graph-dot" cx="250" cy="35" r="3.5" fill="#e4fa72" />
+                </svg>
+                <div class="right-labels">
+                  <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span
+                  ><span>Sat</span><span>Sun</span>
+                </div>
+              </div>
+
+              <div class="right-stats">
+                <div class="stat-pill">
+                  <span class="stat-dot" style="background: #e4fa72"></span>
+                  <span class="stat-label">Active</span>
+                  <span class="stat-num">540</span>
+                </div>
+                <div class="stat-pill">
+                  <span class="stat-dot" style="background: #7c857c"></span>
+                  <span class="stat-label">Rest</span>
+                  <span class="stat-num">200</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
+
+        [data-composition-id="scene-3-phones"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: "DM Sans", sans-serif;
+          color: #271f15;
+        }
+
+        /* ── Background ── */
+        [data-composition-id="scene-3-phones"] .s3-bg {
+          position: absolute;
+          inset: 0;
+          background: linear-gradient(160deg, #f1f2ec 0%, #e8ecda 40%, #f1f2ec 100%);
+        }
+        [data-composition-id="scene-3-phones"] .s3-bg-glow {
+          position: absolute;
+          width: 900px;
+          height: 900px;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background: radial-gradient(circle, rgba(228, 250, 114, 0.18) 0%, transparent 70%);
+          border-radius: 50%;
+        }
+
+        /* ── Stage ── */
+        [data-composition-id="scene-3-phones"] .s3-stage {
+          position: absolute;
+          inset: 0;
+          transform-origin: center center;
+        }
+
+        /* ── Phones ── */
+        [data-composition-id="scene-3-phones"] .s3-phone {
+          position: absolute;
+          width: 320px;
+          height: 650px;
+          top: 215px;
+          left: 800px;
+        }
+        [data-composition-id="scene-3-phones"] .s3-phone-center {
+          z-index: 30;
+        }
+        [data-composition-id="scene-3-phones"] .s3-phone-left {
+          z-index: 20;
+        }
+        [data-composition-id="scene-3-phones"] .s3-phone-right {
+          z-index: 20;
+        }
+
+        /* ── Bezel ── */
+        [data-composition-id="scene-3-phones"] .s3-bezel {
+          width: 100%;
+          height: 100%;
+          border-radius: 42px;
+          background: #271f15;
+          padding: 8px;
+          box-shadow:
+            0 24px 64px rgba(39, 31, 21, 0.35),
+            0 4px 16px rgba(39, 31, 21, 0.15);
+          position: relative;
+          overflow: hidden;
+        }
+        [data-composition-id="scene-3-phones"] .s3-notch {
+          position: absolute;
+          top: 8px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 100px;
+          height: 26px;
+          background: #271f15;
+          border-radius: 0 0 18px 18px;
+          z-index: 5;
+        }
+
+        /* ── Screens ── */
+        [data-composition-id="scene-3-phones"] .s3-screen {
+          width: 100%;
+          height: 100%;
+          border-radius: 36px;
+          overflow: hidden;
+          position: relative;
+        }
+
+        /* Left screen */
+        [data-composition-id="scene-3-phones"] .s3-screen-left {
+          background: linear-gradient(160deg, #d9e0bc 0%, #c8d4a0 50%, #b8c78a 100%);
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
+        }
+        [data-composition-id="scene-3-phones"] .left-shapes {
+          position: absolute;
+          top: 40px;
+          left: 0;
+          width: 100%;
+          height: 400px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        [data-composition-id="scene-3-phones"] .left-shapes svg {
+          width: 200px;
+          height: 280px;
+        }
+        [data-composition-id="scene-3-phones"] .left-bottom {
+          padding: 0 28px 40px;
+          position: relative;
+          z-index: 2;
+        }
+        [data-composition-id="scene-3-phones"] .left-tagline {
+          font-size: 28px;
+          font-weight: 700;
+          color: #271f15;
+          line-height: 1.15;
+          margin-bottom: 16px;
+          letter-spacing: -0.02em;
+        }
+        [data-composition-id="scene-3-phones"] .left-cta {
+          display: inline-block;
+          background: #271f15;
+          color: #e4fa72;
+          font-size: 13px;
+          font-weight: 700;
+          letter-spacing: 0.08em;
+          padding: 10px 28px;
+          border-radius: 24px;
+        }
+
+        /* Center screen */
+        [data-composition-id="scene-3-phones"] .s3-screen-center {
+          background: #1a1a1a;
+          padding: 42px 22px 22px;
+          display: flex;
+          flex-direction: column;
+          gap: 18px;
+        }
+
+        [data-composition-id="scene-3-phones"] .center-header {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+        [data-composition-id="scene-3-phones"] .center-avatar {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          background: linear-gradient(135deg, #e4fa72, #d9e0bc);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 15px;
+          font-weight: 700;
+          color: #271f15;
+          flex-shrink: 0;
+        }
+        [data-composition-id="scene-3-phones"] .center-user-info {
+          flex: 1;
+        }
+        [data-composition-id="scene-3-phones"] .center-name {
+          font-size: 18px;
+          font-weight: 700;
+          color: #f1f2ec;
+          line-height: 1.2;
+        }
+        [data-composition-id="scene-3-phones"] .center-subtitle {
+          font-size: 12px;
+          font-weight: 400;
+          color: #7c857c;
+          margin-top: 1px;
+        }
+        [data-composition-id="scene-3-phones"] .center-bell {
+          flex-shrink: 0;
+        }
+
+        /* Weekly Goal */
+        [data-composition-id="scene-3-phones"] .center-goal {
+          background: #242424;
+          border-radius: 20px;
+          padding: 18px 16px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 12px;
+        }
+        [data-composition-id="scene-3-phones"] .goal-label {
+          font-size: 15px;
+          font-weight: 500;
+          color: #7c857c;
+          align-self: flex-start;
+        }
+        [data-composition-id="scene-3-phones"] .goal-ring-wrap {
+          position: relative;
+          width: 130px;
+          height: 130px;
+        }
+        [data-composition-id="scene-3-phones"] .goal-ring {
+          width: 100%;
+          height: 100%;
+        }
+        [data-composition-id="scene-3-phones"] .ring-track {
+          opacity: 0.3;
+        }
+        [data-composition-id="scene-3-phones"] .goal-count {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 2px;
+        }
+        [data-composition-id="scene-3-phones"] .goal-num {
+          font-size: 36px;
+          font-weight: 700;
+          color: #e4fa72;
+        }
+        [data-composition-id="scene-3-phones"] .goal-sep {
+          font-size: 24px;
+          font-weight: 400;
+          color: #7c857c;
+          margin: 0 2px;
+        }
+        [data-composition-id="scene-3-phones"] .goal-den {
+          font-size: 24px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="scene-3-phones"] .goal-days {
+          display: flex;
+          gap: 8px;
+        }
+        [data-composition-id="scene-3-phones"] .day {
+          width: 28px;
+          height: 28px;
+          border-radius: 50%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 11px;
+          font-weight: 500;
+          color: #7c857c;
+          background: #1a1a1a;
+        }
+        [data-composition-id="scene-3-phones"] .day.done {
+          background: #e4fa72;
+          color: #271f15;
+          font-weight: 700;
+        }
+
+        /* Progress section */
+        [data-composition-id="scene-3-phones"] .center-progress {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        [data-composition-id="scene-3-phones"] .progress-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        [data-composition-id="scene-3-phones"] .progress-title {
+          font-size: 15px;
+          font-weight: 500;
+          color: #f1f2ec;
+        }
+        [data-composition-id="scene-3-phones"] .progress-link {
+          font-size: 12px;
+          font-weight: 400;
+          color: #e4fa72;
+        }
+        [data-composition-id="scene-3-phones"] .progress-bars {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        [data-composition-id="scene-3-phones"] .bar-row {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        }
+        [data-composition-id="scene-3-phones"] .bar-icon {
+          width: 28px;
+          height: 28px;
+          border-radius: 8px;
+          background: #2a2a2a;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-shrink: 0;
+        }
+        [data-composition-id="scene-3-phones"] .bar-info {
+          width: 70px;
+          flex-shrink: 0;
+        }
+        [data-composition-id="scene-3-phones"] .bar-name {
+          display: block;
+          font-size: 12px;
+          font-weight: 500;
+          color: #f1f2ec;
+          line-height: 1.2;
+        }
+        [data-composition-id="scene-3-phones"] .bar-val {
+          display: block;
+          font-size: 10px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="scene-3-phones"] .bar-track {
+          flex: 1;
+          height: 8px;
+          background: #2a2a2a;
+          border-radius: 4px;
+          overflow: hidden;
+        }
+        [data-composition-id="scene-3-phones"] .bar-value {
+          height: 100%;
+          border-radius: 4px;
+          background: #e4fa72;
+          width: 0%;
+        }
+
+        /* Right screen */
+        [data-composition-id="scene-3-phones"] .s3-screen-right {
+          background: #f1f2ec;
+          padding: 42px 20px 24px;
+          display: flex;
+          flex-direction: column;
+          gap: 14px;
+        }
+        [data-composition-id="scene-3-phones"] .right-header {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+        [data-composition-id="scene-3-phones"] .right-title {
+          font-size: 14px;
+          font-weight: 500;
+          color: #7c857c;
+        }
+        [data-composition-id="scene-3-phones"] .right-value {
+          font-size: 40px;
+          font-weight: 700;
+          color: #271f15;
+          line-height: 1;
+          letter-spacing: -0.03em;
+        }
+        [data-composition-id="scene-3-phones"] .right-unit {
+          font-size: 20px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+
+        [data-composition-id="scene-3-phones"] .right-graph-wrap {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+        }
+        [data-composition-id="scene-3-phones"] .right-graph {
+          width: 100%;
+          flex: 1;
+        }
+        [data-composition-id="scene-3-phones"] .right-labels {
+          display: flex;
+          justify-content: space-between;
+          padding: 0 6px;
+          font-size: 10px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+
+        [data-composition-id="scene-3-phones"] .right-stats {
+          display: flex;
+          gap: 12px;
+        }
+        [data-composition-id="scene-3-phones"] .stat-pill {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: #e8ecda;
+          border-radius: 20px;
+          padding: 8px 14px;
+        }
+        [data-composition-id="scene-3-phones"] .stat-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+        [data-composition-id="scene-3-phones"] .stat-label {
+          font-size: 12px;
+          font-weight: 400;
+          color: #7c857c;
+        }
+        [data-composition-id="scene-3-phones"] .stat-num {
+          font-size: 13px;
+          font-weight: 700;
+          color: #271f15;
+        }
+      </style>
+
+      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+      <script>
+        (function () {
+          var S = '[data-composition-id="scene-3-phones"] ';
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+
+          // ── SVG setup ──
+          var graphLine = document.querySelector(S + "#s3GraphLine");
+          var graphLen = graphLine.getTotalLength();
+          gsap.set(graphLine, { strokeDasharray: graphLen, strokeDashoffset: graphLen });
+
+          var graphArea = document.querySelector(S + "#s3GraphArea");
+          gsap.set(graphArea, { opacity: 0 });
+
+          var graphDots = document.querySelectorAll(S + ".graph-dot");
+          gsap.set(graphDots, { opacity: 0, scale: 0 });
+
+          var CIRC = 2 * 3.14159265 * 52;
+          gsap.set(S + "#s3Ring", { strokeDasharray: CIRC, strokeDashoffset: CIRC });
+
+          // ── Initial states ──
+          gsap.set(S + ".s3-bg", { opacity: 0 });
+          gsap.set(S + ".s3-bg-glow", { opacity: 0 });
+          // Center phone: starts scaled down + hidden
+          gsap.set(S + "#s3PhoneCenter", { opacity: 0, scale: 0.85 });
+          // Side phones: start stacked behind center (same position), hidden
+          gsap.set(S + "#s3PhoneLeft", { opacity: 0, x: 0, rotation: 0 });
+          gsap.set(S + "#s3PhoneRight", { opacity: 0, x: 0, rotation: 0 });
+          gsap.set(S + ".bar-value", { width: "0%" });
+          gsap.set(S + "#s3Tagline", { opacity: 0, y: 20 });
+          gsap.set(S + ".left-cta", { opacity: 0, y: 12 });
+
+          // ════════════════════════════════════
+          // BUILD PHASE (0–2s)
+          // ════════════════════════════════════
+
+          // Background
+          tl.to(S + ".s3-bg", { opacity: 1, duration: 0.8, ease: "power1.out" }, 0);
+          tl.to(S + ".s3-bg-glow", { opacity: 1, duration: 1.2, ease: "power1.out" }, 0.2);
+
+          // Center phone — scales up first
+          tl.to(
+            S + "#s3PhoneCenter",
+            {
+              scale: 1,
+              opacity: 1,
+              duration: 0.7,
+              ease: "back.out(1.4)",
+            },
+            0.2,
+          );
+
+          // Side phones: opacity matches center (0.7s, back.out), fan starts at 0.1
+          tl.to(S + "#s3PhoneLeft", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.3);
+          tl.to(
+            S + "#s3PhoneLeft",
+            {
+              x: -340,
+              rotation: -12,
+              duration: 1.2,
+              ease: "expo.out",
+            },
+            0.3,
+          );
+
+          tl.to(S + "#s3PhoneRight", { opacity: 1, duration: 0.7, ease: "back.out(1.4)" }, 0.4);
+          tl.to(
+            S + "#s3PhoneRight",
+            {
+              x: 340,
+              rotation: 12,
+              duration: 1.2,
+              ease: "expo.out",
+            },
+            0.4,
+          );
+
+          // ════════════════════════════════════
+          // BREATHE PHASE (2–4s)
+          // ════════════════════════════════════
+
+          // Progress ring fills to 2/3
+          tl.to(
+            S + "#s3Ring",
+            {
+              strokeDashoffset: CIRC * (1 - 2 / 3),
+              duration: 1.2,
+              ease: "circ.out",
+            },
+            1.8,
+          );
+
+          // Activity bars stagger in
+          tl.to(S + "#s3Bar1", { width: "75%", duration: 0.8, ease: "power3.out" }, 2.1);
+          tl.to(S + "#s3Bar2", { width: "50%", duration: 0.8, ease: "power3.out" }, 2.3);
+          tl.to(S + "#s3Bar3", { width: "90%", duration: 0.8, ease: "power3.out" }, 2.5);
+
+          // Graph line draws on
+          tl.to(
+            graphLine,
+            {
+              strokeDashoffset: 0,
+              duration: 1.4,
+              ease: "sine.inOut",
+            },
+            2.0,
+          );
+
+          // Graph area fades in
+          tl.to(graphArea, { opacity: 0.15, duration: 0.8, ease: "power1.out" }, 2.6);
+
+          // Graph dots pop in
+          tl.to(
+            graphDots,
+            {
+              opacity: 1,
+              scale: 1,
+              duration: 0.3,
+              ease: "back.out(2)",
+              stagger: { each: 0.06, ease: "power2.in" },
+            },
+            3.0,
+          );
+
+          // Tagline and CTA on left phone
+          tl.to(
+            S + "#s3Tagline",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.6,
+              ease: "power2.out",
+            },
+            2.2,
+          );
+          tl.to(
+            S + ".left-cta",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.5,
+              ease: "power2.out",
+            },
+            2.5,
+          );
+
+          // Ambient slow scale push
+          tl.to(
+            S + "#s3Stage",
+            {
+              scale: 1.02,
+              duration: 3.5,
+              ease: "sine.inOut",
+            },
+            2.0,
+          );
+
+          // ════════════════════════════════════
+          // RESOLVE PHASE (4–5.5s)
+          // ════════════════════════════════════
+
+          // Subtle glow pulse on lime accent elements
+          tl.to(S + ".ring-fill", { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.0);
+          tl.to(S + ".ring-fill", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.6);
+
+          tl.to(S + ".bar-value", { opacity: 0.7, duration: 0.6, ease: "sine.inOut" }, 4.1);
+          tl.to(S + ".bar-value", { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.7);
+
+          tl.to(graphLine, { opacity: 0.65, duration: 0.6, ease: "sine.inOut" }, 4.05);
+          tl.to(graphLine, { opacity: 1, duration: 0.6, ease: "sine.inOut" }, 4.65);
+
+          window.__timelines["scene-3-phones"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/app-showcase/registry-item.json b/registry/blocks/app-showcase/registry-item.json
new file mode 100644
index 000000000..99a078e5a
--- /dev/null
+++ b/registry/blocks/app-showcase/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "app-showcase",
+  "type": "hyperframes:block",
+  "title": "App Showcase",
+  "description": "Fitness app product showcase with three floating smartphone screens",
+  "tags": ["showcase", "app", "3d"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 5.5,
+  "files": [
+    {
+      "path": "app-showcase.html",
+      "target": "compositions/app-showcase.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/ascii-dashboard/ascii-dashboard.html b/registry/blocks/ascii-dashboard/ascii-dashboard.html
new file mode 100644
index 000000000..81c2f51ba
--- /dev/null
+++ b/registry/blocks/ascii-dashboard/ascii-dashboard.html
@@ -0,0 +1,502 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ascii-dashboard</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;
+        background-color: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="ascii-dashboard"
+      data-width="1920"
+      data-height="1080"
+      data-duration="10"
+    >
+      <canvas id="ascii-canvas" width="1920" height="1080"></canvas>
+
+      <style>
+        [data-composition-id="ascii-dashboard"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          background: #020405;
+        }
+
+        #ascii-canvas {
+          position: absolute;
+          inset: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+      </style>
+
+      <script src="../three.min.js"></script>
+      <script>
+        (function initAsciiDashboard() {
+          var root = document.querySelector('[data-composition-id="ascii-dashboard"]');
+          if (!root || typeof THREE === "undefined") {
+            setTimeout(initAsciiDashboard, 50);
+            return;
+          }
+
+          var canvas = root.querySelector("#ascii-canvas");
+          if (!canvas) {
+            setTimeout(initAsciiDashboard, 50);
+            return;
+          }
+
+          var W = 1920;
+          var H = 1080;
+          var ctx = canvas.getContext("2d");
+
+          var CELL_W = 10;
+          var CELL_H = 16;
+          var COLS = Math.floor(W / CELL_W);
+          var ROWS = Math.floor(H / CELL_H);
+          var GLYPHS = " .,:;=+*#%@";
+          var GLYPH_MAX = GLYPHS.length - 1;
+
+          var BAYER = [
+            [0.03125, 0.53125, 0.15625, 0.65625],
+            [0.78125, 0.28125, 0.90625, 0.40625],
+            [0.21875, 0.71875, 0.09375, 0.59375],
+            [0.96875, 0.46875, 0.84375, 0.34375],
+          ];
+
+          function clamp01(v) {
+            return v < 0 ? 0 : v > 1 ? 1 : v;
+          }
+
+          function mix(a, b, t) {
+            return a + (b - a) * t;
+          }
+
+          function easeInOut(t) {
+            return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+          }
+
+          function easeOut(t) {
+            return 1 - Math.pow(1 - t, 3);
+          }
+
+          function smoothStep(edge0, edge1, x) {
+            var t = clamp01((x - edge0) / (edge1 - edge0));
+            return t * t * (3 - 2 * t);
+          }
+
+          function hash(n) {
+            var x = Math.sin(n * 127.1 + 311.7) * 43758.5453123;
+            return x - Math.floor(x);
+          }
+
+          var renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            alpha: false,
+            preserveDrawingBuffer: true,
+            powerPreference: "high-performance",
+          });
+          renderer.setPixelRatio(1);
+          renderer.setSize(COLS, ROWS, false);
+          renderer.outputColorSpace = THREE.SRGBColorSpace;
+          renderer.toneMapping = THREE.ACESFilmicToneMapping;
+          renderer.toneMappingExposure = 1.65;
+
+          var target = new THREE.WebGLRenderTarget(COLS, ROWS, {
+            depthBuffer: true,
+            stencilBuffer: false,
+          });
+          var pixels = new Uint8Array(COLS * ROWS * 4);
+
+          var scene = new THREE.Scene();
+          scene.background = new THREE.Color(0x030507);
+          scene.fog = new THREE.FogExp2(0x020405, 0.085);
+
+          var camera = new THREE.PerspectiveCamera(34, COLS / ROWS, 0.1, 100);
+          camera.position.set(0, 4.5, 15);
+
+          var chartGroup = new THREE.Group();
+          scene.add(chartGroup);
+
+          var ambient = new THREE.AmbientLight(0x406080, 1.8);
+          scene.add(ambient);
+
+          var key = new THREE.DirectionalLight(0x9fe7ff, 2.4);
+          key.position.set(4, 7, 8);
+          scene.add(key);
+
+          var rim = new THREE.DirectionalLight(0xff7b4d, 1.7);
+          rim.position.set(-7, 4, -5);
+          scene.add(rim);
+
+          var magentaPoint = new THREE.PointLight(0xff4fd8, 18, 28, 2);
+          magentaPoint.position.set(-6, 4, 7);
+          scene.add(magentaPoint);
+
+          var cyanPoint = new THREE.PointLight(0x29e7ff, 20, 28, 2);
+          cyanPoint.position.set(7, 2, 6);
+          scene.add(cyanPoint);
+
+          var floor = new THREE.Mesh(
+            new THREE.PlaneGeometry(18, 12),
+            new THREE.MeshStandardMaterial({
+              color: 0x041018,
+              metalness: 0.2,
+              roughness: 0.9,
+            }),
+          );
+          floor.rotation.x = -Math.PI / 2;
+          floor.position.y = -0.02;
+          floor.position.z = 0.35;
+          chartGroup.add(floor);
+
+          var gridMaterial = new THREE.MeshBasicMaterial({
+            color: 0x0f9fb5,
+            transparent: true,
+            opacity: 0.22,
+          });
+
+          var gridLines = [];
+          function addGridLine(x, y, z, sx, sy, sz) {
+            var mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), gridMaterial.clone());
+            mesh.position.set(x, y, z);
+            mesh.scale.set(sx, sy, sz);
+            mesh.material.opacity = 0;
+            chartGroup.add(mesh);
+            gridLines.push(mesh);
+          }
+
+          for (var gx = -6; gx <= 6; gx += 2) addGridLine(gx, 0.01, 0.5, 0.03, 0.03, 9.6);
+          for (var gz = -3; gz <= 5; gz += 2) addGridLine(0, 0.01, gz, 13.6, 0.03, 0.03);
+
+          var axisMaterial = new THREE.MeshStandardMaterial({
+            color: 0xb8f9ff,
+            emissive: 0x0f9fb5,
+            emissiveIntensity: 0.35,
+            roughness: 0.35,
+            metalness: 0.15,
+          });
+
+          var xAxis = new THREE.Mesh(new THREE.BoxGeometry(13, 0.08, 0.08), axisMaterial);
+          xAxis.position.set(0, 0.04, 3.7);
+          chartGroup.add(xAxis);
+
+          var yAxis = new THREE.Mesh(new THREE.BoxGeometry(0.08, 5.8, 0.08), axisMaterial);
+          yAxis.position.set(-6.3, 2.9, 3.7);
+          chartGroup.add(yAxis);
+
+          var zAxis = new THREE.Mesh(new THREE.BoxGeometry(0.08, 0.08, 8.2), axisMaterial);
+          zAxis.position.set(-6.3, 0.04, -0.1);
+          chartGroup.add(zAxis);
+
+          var colors = [0xff5f7a, 0xffa63d, 0x29e7ff, 0x89ff65, 0xbb6dff];
+          var barHeights = [2.2, 3.4, 4.1, 5.4, 4.6];
+          var xPositions = [-4.8, -2.3, 0.2, 2.7, 5.2];
+          var zPositions = [-1.8, -0.9, 0, 0.8, 1.6];
+          var dataNodes = [];
+          var barGeometry = new THREE.BoxGeometry(1, 1, 1);
+          var sphereGeometry = new THREE.IcosahedronGeometry(0.7, 4);
+          var ringGeometry = new THREE.TorusGeometry(0.92, 0.09, 18, 72);
+
+          function makeGlowMaterial(hex) {
+            return new THREE.MeshStandardMaterial({
+              color: hex,
+              emissive: hex,
+              emissiveIntensity: 1.1,
+              roughness: 0.28,
+              metalness: 0.22,
+              transparent: true,
+            });
+          }
+
+          for (var i = 0; i < barHeights.length; i++) {
+            var group = new THREE.Group();
+            chartGroup.add(group);
+
+            var bar = new THREE.Mesh(barGeometry, makeGlowMaterial(colors[i]));
+            bar.scale.set(0.88, 0.001, 0.88);
+            bar.position.set(0, 0.0005, 0);
+            group.add(bar);
+
+            var sphere = new THREE.Mesh(sphereGeometry, makeGlowMaterial(colors[i]));
+            group.add(sphere);
+
+            var ring = new THREE.Mesh(
+              ringGeometry,
+              new THREE.MeshBasicMaterial({
+                color: colors[i],
+                transparent: true,
+                opacity: 0.7,
+              }),
+            );
+            ring.rotation.x = Math.PI / 2;
+            group.add(ring);
+
+            dataNodes.push({
+              group: group,
+              bar: bar,
+              sphere: sphere,
+              ring: ring,
+              height: barHeights[i],
+              color: new THREE.Color(colors[i]),
+              targetX: xPositions[i],
+              targetZ: zPositions[i],
+            });
+          }
+
+          var lineMaterial = new THREE.MeshStandardMaterial({
+            color: 0xffefb7,
+            emissive: 0xffb84d,
+            emissiveIntensity: 0.65,
+            roughness: 0.25,
+            metalness: 0.08,
+            transparent: true,
+            opacity: 0,
+          });
+
+          var pointMaterial = new THREE.MeshStandardMaterial({
+            color: 0xfff3cf,
+            emissive: 0xffd77a,
+            emissiveIntensity: 0.8,
+            roughness: 0.2,
+            metalness: 0.1,
+            transparent: true,
+            opacity: 0,
+          });
+
+          var lineSegments = [];
+          var pointMarkers = [];
+          for (var li = 0; li < dataNodes.length - 1; li++) {
+            var seg = new THREE.Mesh(
+              new THREE.CylinderGeometry(0.07, 0.07, 1, 12),
+              lineMaterial.clone(),
+            );
+            chartGroup.add(seg);
+            lineSegments.push(seg);
+          }
+          for (var pi = 0; pi < dataNodes.length; pi++) {
+            var marker = new THREE.Mesh(
+              new THREE.SphereGeometry(0.16, 14, 14),
+              pointMaterial.clone(),
+            );
+            chartGroup.add(marker);
+            pointMarkers.push(marker);
+          }
+
+          function setSegment(mesh, start, end, opacity) {
+            var dir = new THREE.Vector3().subVectors(end, start);
+            var length = dir.length();
+            mesh.position.copy(start).add(end).multiplyScalar(0.5);
+            mesh.scale.set(1, length, 1);
+            mesh.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), dir.normalize());
+            mesh.material.opacity = opacity;
+          }
+
+          function updateSceneAtTime(t) {
+            var morph = easeInOut(smoothStep(1.3, 4.7, t));
+            var lineReveal = smoothStep(4.6, 6.2, t);
+            var rotateReveal = easeInOut(smoothStep(5.2, 8.6, t));
+            var settle = smoothStep(8.2, 10.0, t);
+            var scenePulse = 0.5 + 0.5 * Math.sin(t * 2.2);
+
+            chartGroup.position.set(0, -1.6, 0);
+            chartGroup.rotation.x = mix(-0.12, -0.72, rotateReveal);
+            chartGroup.rotation.y = mix(-0.38, 0.68, rotateReveal);
+            chartGroup.rotation.z = mix(0.08, -0.06, rotateReveal * 0.8);
+
+            floor.material.opacity = 1;
+            floor.material.emissive = new THREE.Color(0x000000);
+
+            camera.position.set(
+              mix(0, 1.2, rotateReveal) + Math.sin(t * 0.33) * 0.18,
+              mix(4.5, 5.9, rotateReveal) + Math.cos(t * 0.27) * 0.12,
+              mix(15, 13.8, rotateReveal),
+            );
+            camera.lookAt(0.4, 1.95 + morph * 0.55, 0.7);
+
+            key.intensity = mix(1.9, 2.8, rotateReveal);
+            rim.intensity = mix(1.2, 2.0, rotateReveal);
+            magentaPoint.intensity = 14 + scenePulse * 5;
+            cyanPoint.intensity = 16 + (1 - scenePulse) * 5;
+
+            for (var gi = 0; gi < gridLines.length; gi++) {
+              var gridFade = smoothStep(2.6 + gi * 0.03, 5.4 + gi * 0.03, t);
+              gridLines[gi].material.opacity = 0.08 + 0.18 * gridFade;
+            }
+
+            xAxis.material.opacity = smoothStep(2.0, 3.8, t);
+            yAxis.material.opacity = smoothStep(2.1, 3.9, t);
+            zAxis.material.opacity = smoothStep(2.3, 4.1, t);
+
+            var topPoints = [];
+
+            for (var i = 0; i < dataNodes.length; i++) {
+              var node = dataNodes[i];
+              var lift = 1.3 + i * 0.25;
+              var intro = clamp01(t / 1.8);
+              var orbit = Math.sin(t * 1.2 + i * 1.35) * 0.8;
+              var spiralX = Math.cos(t * 1.4 + i * 1.7) * (3.8 - i * 0.25);
+              var spiralZ = Math.sin(t * 1.05 + i * 1.9) * 2.6;
+              var floatY = 1.6 + Math.sin(t * 1.8 + i) * 0.7 + lift;
+
+              var targetX = node.targetX;
+              var targetZ = node.targetZ;
+              var targetHeight = node.height;
+              var barHeight = 0.001 + targetHeight * morph;
+
+              node.group.position.set(
+                mix(spiralX, targetX, morph),
+                0,
+                mix(spiralZ, targetZ, morph),
+              );
+
+              node.bar.scale.set(0.88, barHeight, 0.88);
+              node.bar.position.set(0, barHeight * 0.5, 0);
+
+              var capY = mix(floatY, targetHeight + 0.24, morph);
+              var stretchY = mix(1.0 + intro * 0.35, 0.52 + targetHeight * 0.12, morph);
+              var squashXZ = mix(1.0, 0.74, morph);
+
+              node.sphere.position.set(0, capY, 0);
+              node.sphere.scale.set(squashXZ, stretchY, squashXZ);
+              node.sphere.rotation.x = t * 0.7 + i * 0.3;
+              node.sphere.rotation.y = t * 1.1 + i * 0.45;
+
+              node.ring.position.set(0, mix(floatY - 0.12, targetHeight + 0.16, morph), 0);
+              node.ring.rotation.z = t * 0.8 + i;
+              node.ring.rotation.x = Math.PI / 2 + t * 0.35;
+              node.ring.scale.set(
+                mix(1.2, 0.68, morph),
+                mix(1.2, 0.68, morph),
+                mix(1.2, 0.68, morph),
+              );
+              node.ring.material.opacity = mix(0.8, 0.12, morph) * smoothStep(0.0, 0.7, t);
+
+              node.bar.material.opacity = smoothStep(1.0 + i * 0.15, 2.8 + i * 0.15, t);
+              node.bar.material.emissiveIntensity =
+                mix(0.65, 1.15, rotateReveal) + Math.sin(t * 2.5 + i) * 0.04;
+              node.sphere.material.opacity = mix(1.0, 0.55, morph);
+              node.sphere.material.emissiveIntensity = 0.9 + scenePulse * 0.35;
+
+              topPoints.push(new THREE.Vector3(targetX, targetHeight + 0.24, targetZ));
+            }
+
+            for (var si = 0; si < lineSegments.length; si++) {
+              var start = topPoints[si];
+              var end = topPoints[si + 1];
+              var segProgress = clamp01((lineReveal - si * 0.16) / 0.6);
+              var visibleEnd = start.clone().lerp(end, segProgress);
+              setSegment(lineSegments[si], start, visibleEnd, segProgress * 0.95);
+            }
+
+            for (var mi = 0; mi < pointMarkers.length; mi++) {
+              var markerProgress = clamp01((lineReveal - mi * 0.12) / 0.5);
+              pointMarkers[mi].position.copy(topPoints[mi]);
+              pointMarkers[mi].material.opacity = markerProgress;
+              pointMarkers[mi].scale.setScalar(
+                0.8 + markerProgress * 0.9 + Math.sin(t * 3.5 + mi) * 0.06,
+              );
+            }
+
+            if (settle > 0) {
+              chartGroup.rotation.y += Math.sin(t * 0.9) * 0.05 * (1 - settle * 0.5);
+              chartGroup.rotation.x += Math.cos(t * 0.8) * 0.025 * (1 - settle * 0.65);
+            }
+          }
+
+          function renderAscii(t) {
+            updateSceneAtTime(t);
+
+            renderer.setRenderTarget(target);
+            renderer.render(scene, camera);
+            renderer.readRenderTargetPixels(target, 0, 0, COLS, ROWS, pixels);
+            renderer.setRenderTarget(null);
+
+            ctx.fillStyle = "#030506";
+            ctx.fillRect(0, 0, W, H);
+            ctx.font = CELL_H - 1 + "px Menlo, Consolas, monospace";
+            ctx.textBaseline = "top";
+
+            var lastFill = "";
+            for (var row = 0; row < ROWS; row++) {
+              for (var col = 0; col < COLS; col++) {
+                var py = ROWS - 1 - row;
+                var idx = (py * COLS + col) * 4;
+                var r = pixels[idx];
+                var g = pixels[idx + 1];
+                var b = pixels[idx + 2];
+
+                var luminance = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+                var glow = Math.max(r, Math.max(g, b)) / 255;
+                var dither = BAYER[row & 3][col & 3];
+
+                var wave =
+                  Math.sin(col * 0.055 + t * 1.6) * 0.035 + Math.cos(row * 0.21 + t * 1.1) * 0.02;
+                var bright = clamp01(0.06 + luminance * 1.85 + glow * 0.28 + wave);
+                var scaled = bright * GLYPH_MAX;
+                var base = Math.floor(scaled);
+                var frac = scaled - base;
+                var level = base + (frac > dither ? 1 : 0);
+                if (level < 1 && bright > 0.035) level = 1;
+                if (level > GLYPH_MAX) level = GLYPH_MAX;
+
+                var scan = 0.9 + 0.1 * Math.sin(row * 0.65 + t * 1.25);
+                var vx = col / COLS - 0.5;
+                var vy = row / ROWS - 0.5;
+                var vignette = 1 - (vx * vx + vy * vy) * 0.45;
+                if (vignette < 0.52) vignette = 0.52;
+
+                var tint = 0.95 + hash(col * 13 + row * 17) * 0.1;
+                var colorBoost = 1.22 + glow * 0.18;
+                var finalR = Math.min(255, Math.round(r * scan * vignette * tint * colorBoost));
+                var finalG = Math.min(255, Math.round(g * scan * vignette * colorBoost));
+                var finalB = Math.min(
+                  255,
+                  Math.round(b * scan * vignette * (1.04 + glow * 0.1) * colorBoost),
+                );
+
+                var fill = "rgb(" + finalR + "," + finalG + "," + finalB + ")";
+                if (fill !== lastFill) {
+                  ctx.fillStyle = fill;
+                  lastFill = fill;
+                }
+                ctx.fillText(GLYPHS[level], col * CELL_W, row * CELL_H);
+              }
+            }
+          }
+
+          renderAscii(0);
+
+          window.__timelines = window.__timelines || {};
+          window.__timelines["ascii-dashboard"] = {
+            _time: 0,
+            pause: function () {},
+            seek: function (time) {
+              this._time = Math.max(0, Math.min(10, Number(time) || 0));
+              renderAscii(this._time);
+            },
+            duration: function () {
+              return 10;
+            },
+          };
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/ascii-dashboard/registry-item.json b/registry/blocks/ascii-dashboard/registry-item.json
new file mode 100644
index 000000000..903d90039
--- /dev/null
+++ b/registry/blocks/ascii-dashboard/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ascii-dashboard",
+  "type": "hyperframes:block",
+  "title": "ASCII Dashboard",
+  "description": "Retro terminal-style data visualization with charts and metrics",
+  "tags": ["data", "ascii", "dashboard"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 10,
+  "files": [
+    {
+      "path": "ascii-dashboard.html",
+      "target": "compositions/ascii-dashboard.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/ascii-lightning/ascii-lightning.html b/registry/blocks/ascii-lightning/ascii-lightning.html
new file mode 100644
index 000000000..aa2ca035e
--- /dev/null
+++ b/registry/blocks/ascii-lightning/ascii-lightning.html
@@ -0,0 +1,652 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ascii-lightning</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background-color: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      data-composition-id="ascii-lightning"
+      data-width="1920"
+      data-height="1080"
+      data-duration="9"
+    >
+      <canvas id="al-canvas" width="1920" height="1080"></canvas>
+
+      <style>
+        [data-composition-id="ascii-lightning"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          background: #000;
+        }
+        #al-canvas {
+          position: absolute;
+          inset: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+      </style>
+
+      <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+      <script>
+        (function initAsciiLightning() {
+          var root = document.querySelector('[data-composition-id="ascii-lightning"]');
+          if (!root) {
+            setTimeout(initAsciiLightning, 50);
+            return;
+          }
+          var canvas = root.querySelector("#al-canvas");
+          if (!canvas) {
+            setTimeout(initAsciiLightning, 50);
+            return;
+          }
+
+          var W = 1920,
+            H = 1080;
+          var ctx = canvas.getContext("2d");
+          var CELL_W = 10,
+            CELL_H = 16;
+          var COLS = Math.floor(W / CELL_W);
+          var ROWS = Math.floor(H / CELL_H);
+          var GLYPHS = " .,:;+*#@W";
+          var GLYPH_MAX = GLYPHS.length - 1;
+          var BAYER = [
+            [0.03125, 0.53125, 0.15625, 0.65625],
+            [0.78125, 0.28125, 0.90625, 0.40625],
+            [0.21875, 0.71875, 0.09375, 0.59375],
+            [0.96875, 0.46875, 0.84375, 0.34375],
+          ];
+
+          // ═══════════════════════════════════════════════════════
+          // DETERMINISTIC HASH & NOISE
+          // ═══════════════════════════════════════════════════════
+          function hash(x, y) {
+            var n = x * 374761393 + y * 668265263;
+            n = (n ^ (n >> 13)) * 1274126177;
+            return ((n ^ (n >> 16)) & 0x7fffffff) / 0x7fffffff;
+          }
+          function vnoise(x, y) {
+            var ix = Math.floor(x),
+              iy = Math.floor(y);
+            var fx = x - ix,
+              fy = y - iy;
+            fx = fx * fx * (3 - 2 * fx);
+            fy = fy * fy * (3 - 2 * fy);
+            var a = hash(ix, iy),
+              b = hash(ix + 1, iy);
+            var c = hash(ix, iy + 1),
+              d = hash(ix + 1, iy + 1);
+            return a + (b - a) * fx + (c - a) * fy + (a - b - c + d) * fx * fy;
+          }
+          function fbm(x, y) {
+            return (
+              vnoise(x, y) * 0.5 +
+              vnoise(x * 2.1 + 5.3, y * 2.1 + 3.7) * 0.3 +
+              vnoise(x * 4.3 + 11.7, y * 4.3 + 7.1) * 0.2
+            );
+          }
+          function clamp01(v) {
+            return v < 0 ? 0 : v > 1 ? 1 : v;
+          }
+
+          // ═══════════════════════════════════════════════════════
+          // BITMAP FONT 5x5 at 2x scale
+          // ═══════════════════════════════════════════════════════
+          var BFONT = {
+            A: [0b01110, 0b10001, 0b11111, 0b10001, 0b10001],
+            B: [0b11110, 0b10001, 0b11110, 0b10001, 0b11110],
+            C: [0b01111, 0b10000, 0b10000, 0b10000, 0b01111],
+            D: [0b11110, 0b10001, 0b10001, 0b10001, 0b11110],
+            E: [0b11111, 0b10000, 0b11110, 0b10000, 0b11111],
+            F: [0b11111, 0b10000, 0b11110, 0b10000, 0b10000],
+            G: [0b01111, 0b10000, 0b10011, 0b10001, 0b01111],
+            H: [0b10001, 0b10001, 0b11111, 0b10001, 0b10001],
+            I: [0b11111, 0b00100, 0b00100, 0b00100, 0b11111],
+            J: [0b00111, 0b00010, 0b00010, 0b10010, 0b01100],
+            K: [0b10001, 0b10010, 0b11100, 0b10010, 0b10001],
+            L: [0b10000, 0b10000, 0b10000, 0b10000, 0b11111],
+            M: [0b10001, 0b11011, 0b10101, 0b10001, 0b10001],
+            N: [0b10001, 0b11001, 0b10101, 0b10011, 0b10001],
+            O: [0b01110, 0b10001, 0b10001, 0b10001, 0b01110],
+            P: [0b11110, 0b10001, 0b11110, 0b10000, 0b10000],
+            R: [0b11110, 0b10001, 0b11110, 0b10010, 0b10001],
+            S: [0b01111, 0b10000, 0b01110, 0b00001, 0b11110],
+            T: [0b11111, 0b00100, 0b00100, 0b00100, 0b00100],
+            U: [0b10001, 0b10001, 0b10001, 0b10001, 0b01110],
+            V: [0b10001, 0b10001, 0b10001, 0b01010, 0b00100],
+            W: [0b10001, 0b10001, 0b10101, 0b11011, 0b10001],
+            X: [0b10001, 0b01010, 0b00100, 0b01010, 0b10001],
+            Y: [0b10001, 0b01010, 0b00100, 0b00100, 0b00100],
+            Z: [0b11111, 0b00010, 0b00100, 0b01000, 0b11111],
+            " ": [0b00000, 0b00000, 0b00000, 0b00000, 0b00000],
+          };
+
+          var SCALE = 2;
+          var CHAR_W = 5 * SCALE,
+            CHAR_H = 5 * SCALE;
+          var CHAR_STRIDE = CHAR_W + SCALE;
+
+          function textW(text) {
+            return text.length * CHAR_STRIDE - SCALE;
+          }
+          function textHit(text, sx, sy, c, r) {
+            if (r < sy || r >= sy + CHAR_H || c < sx) return 0;
+            var lc2 = c - sx;
+            if (lc2 >= textW(text)) return 0;
+            var ci = Math.floor(lc2 / CHAR_STRIDE);
+            var ic = lc2 - ci * CHAR_STRIDE;
+            if (ci >= text.length || ic >= CHAR_W) return 0;
+            var bx = Math.floor(ic / SCALE);
+            var by = Math.floor((r - sy) / SCALE);
+            var g = BFONT[text[ci]];
+            if (!g) return 0;
+            return (g[by] >> (4 - bx)) & 1;
+          }
+
+          // ═══════════════════════════════════════════════════════
+          // TEXT LAYOUT & MASK
+          // ═══════════════════════════════════════════════════════
+          var TEXT = "HYPERFRAMES";
+          var textX = Math.floor((COLS - textW(TEXT)) / 2);
+          var textY = Math.floor((ROWS - CHAR_H) / 2);
+          var textMask = new Uint8Array(ROWS * COLS);
+          var tw = textW(TEXT);
+          for (var r = textY; r < textY + CHAR_H && r < ROWS; r++) {
+            for (var c = textX; c < textX + tw && c < COLS; c++) {
+              if (textHit(TEXT, textX, textY, c, r)) {
+                textMask[r * COLS + c] = 1;
+              }
+            }
+          }
+
+          // ═══════════════════════════════════════════════════════
+          // PROCEDURAL LIGHTNING — bolts strike TOP of text, energy crawls along letters
+          // ═══════════════════════════════════════════════════════
+          var textTopY = textY;
+
+          function generateBolt(startX, targetX, seed, branchCount) {
+            // Bolt zigzags from top of screen down to the TOP of the text
+            var segments = [];
+            var x = startX,
+              y = 0;
+            var step = 0;
+            while (y < textTopY) {
+              var stepY = 3 + Math.floor(hash(seed + step, 100) * 4);
+              var progress = Math.min(1.0, y / textTopY);
+              var attract = (targetX - x) * progress * 0.35;
+              var jitter = (hash(seed + step, 200) - 0.5) * 14 * (1.0 - progress * 0.8);
+              var stepX = attract + jitter;
+              var newX = Math.max(3, Math.min(COLS - 3, Math.floor(x + stepX)));
+              var newY = Math.min(textTopY, y + stepY);
+              segments.push({ x1: x, y1: y, x2: newX, y2: newY });
+              x = newX;
+              y = newY;
+              step++;
+            }
+            // Final segment connects directly to the target on the text top edge
+            if (segments.length > 0) {
+              var last = segments[segments.length - 1];
+              if (last.y2 < textTopY) {
+                segments.push({ x1: last.x2, y1: last.y2, x2: targetX, y2: textTopY });
+              }
+            }
+            // Strike point: where bolt meets the text
+            var strikeCol = segments.length > 0 ? segments[segments.length - 1].x2 : targetX;
+            var strikeRow = textTopY;
+
+            // Branches — only above the text
+            var branches = [];
+            var bc = branchCount || Math.floor(hash(seed, 300) * 3) + 2;
+            for (var bi = 0; bi < bc; bi++) {
+              var segIdx = Math.floor(hash(seed + bi * 13, 400) * segments.length);
+              var seg = segments[Math.min(segIdx, segments.length - 1)];
+              var bx = seg.x2,
+                by = seg.y2;
+              var bsegs = [];
+              var bseed = seed + 1000 + bi * 77;
+              var bstep = 0;
+              var blen = 3 + Math.floor(hash(bseed, 500) * 4);
+              var dir = hash(bseed, 600) > 0.5 ? 1 : -1;
+              for (var bs = 0; bs < blen && by < textTopY; bs++) {
+                var bStepY = 2 + Math.floor(hash(bseed + bstep, 700) * 3);
+                var bStepX = dir * (2 + hash(bseed + bstep, 800) * 6);
+                var nbx = Math.max(2, Math.min(COLS - 2, Math.floor(bx + bStepX)));
+                var nby = Math.min(textTopY, by + bStepY);
+                bsegs.push({ x1: bx, y1: by, x2: nbx, y2: nby });
+                bx = nbx;
+                by = nby;
+                bstep++;
+              }
+              branches.push({ segments: bsegs, brightness: 0.3 + hash(bseed, 900) * 0.35 });
+            }
+            return {
+              segments: segments,
+              branches: branches,
+              strikeCol: strikeCol,
+              strikeRow: strikeRow,
+            };
+          }
+
+          // ═══════════════════════════════════════════════════════
+          // BFS CRAWL MAPS — electricity crawls through text pixels from strike point
+          // ═══════════════════════════════════════════════════════
+          function buildCrawlMap(startCol, startRow) {
+            // BFS through textMask from the strike point
+            // Can jump gaps up to 3 cells (bridges between letters)
+            var dist = new Float32Array(ROWS * COLS);
+            for (var i = 0; i < dist.length; i++) dist[i] = -1;
+            // Find nearest text pixel to the strike point (wide search)
+            var bestD = 9999,
+              bestC = startCol,
+              bestR = startRow;
+            for (var dr = -8; dr <= 8; dr++) {
+              for (var dc = -8; dc <= 8; dc++) {
+                var nr = startRow + dr,
+                  nc = startCol + dc;
+                if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS && textMask[nr * COLS + nc]) {
+                  var d2 = dr * dr + dc * dc;
+                  if (d2 < bestD) {
+                    bestD = d2;
+                    bestC = nc;
+                    bestR = nr;
+                  }
+                }
+              }
+            }
+            if (bestD === 9999) return dist;
+            // BFS with gap-jumping: check neighbors up to 3 cells away
+            var queue = [bestR * COLS + bestC];
+            dist[bestR * COLS + bestC] = 0;
+            var head = 0;
+            var GAP = 3;
+            while (head < queue.length) {
+              var cur = queue[head++];
+              var curDist = dist[cur];
+              var cr2 = Math.floor(cur / COLS),
+                cc = cur % COLS;
+              for (var dr2 = -GAP; dr2 <= GAP; dr2++) {
+                for (var dc2 = -GAP; dc2 <= GAP; dc2++) {
+                  if (dr2 === 0 && dc2 === 0) continue;
+                  var nr3 = cr2 + dr2,
+                    nc3 = cc + dc2;
+                  if (nr3 < 0 || nr3 >= ROWS || nc3 < 0 || nc3 >= COLS) continue;
+                  var ni = nr3 * COLS + nc3;
+                  if (dist[ni] >= 0) continue;
+                  if (!textMask[ni]) continue;
+                  var stepDist = Math.sqrt(dr2 * dr2 + dc2 * dc2);
+                  var newDist = curDist + stepDist;
+                  dist[ni] = newDist;
+                  queue.push(ni);
+                }
+              }
+            }
+            return dist;
+          }
+
+          var letterCenterX = function (idx) {
+            return textX + idx * CHAR_STRIDE + Math.floor(CHAR_W / 2);
+          };
+
+          // 5 quick strikes → 1 mega strike that holds for 3s
+          var BOLTS = [
+            {
+              strikeTime: 0.6,
+              decayRate: 7,
+              bolt: generateBolt(15, letterCenterX(0), 1001, 3),
+              mega: false,
+              crawlSpeed: 60,
+            },
+            {
+              strikeTime: 1.3,
+              decayRate: 7,
+              bolt: generateBolt(175, letterCenterX(10), 2002, 3),
+              mega: false,
+              crawlSpeed: 60,
+            },
+            {
+              strikeTime: 2.0,
+              decayRate: 7,
+              bolt: generateBolt(120, letterCenterX(6), 3003, 3),
+              mega: false,
+              crawlSpeed: 60,
+            },
+            {
+              strikeTime: 2.7,
+              decayRate: 7,
+              bolt: generateBolt(50, letterCenterX(2), 4004, 3),
+              mega: false,
+              crawlSpeed: 60,
+            },
+            {
+              strikeTime: 3.4,
+              decayRate: 7,
+              bolt: generateBolt(150, letterCenterX(8), 5005, 3),
+              mega: false,
+              crawlSpeed: 60,
+            },
+            // MEGA: strikes center, fast crawl fills all text, holds bright for 3s
+            {
+              strikeTime: 4.2,
+              decayRate: 0,
+              bolt: generateBolt(96, letterCenterX(5), 7777, 10),
+              mega: true,
+              crawlSpeed: 250,
+              holdTime: 3.0,
+            },
+          ];
+
+          // Pre-compute crawl maps and bounding boxes for each bolt
+          for (var bi = 0; bi < BOLTS.length; bi++) {
+            var b = BOLTS[bi].bolt;
+            BOLTS[bi].crawlMap = buildCrawlMap(b.strikeCol, b.strikeRow);
+            var minC = COLS,
+              maxC = 0;
+            for (var si = 0; si < b.segments.length; si++) {
+              var s = b.segments[si];
+              if (s.x1 < minC) minC = s.x1;
+              if (s.x2 < minC) minC = s.x2;
+              if (s.x1 > maxC) maxC = s.x1;
+              if (s.x2 > maxC) maxC = s.x2;
+            }
+            for (var bri = 0; bri < b.branches.length; bri++) {
+              var br = b.branches[bri];
+              for (var bsi = 0; bsi < br.segments.length; bsi++) {
+                var bs2 = br.segments[bsi];
+                if (bs2.x1 < minC) minC = bs2.x1;
+                if (bs2.x2 < minC) minC = bs2.x2;
+                if (bs2.x1 > maxC) maxC = bs2.x1;
+                if (bs2.x2 > maxC) maxC = bs2.x2;
+              }
+            }
+            BOLTS[bi].minCol = minC - 35;
+            BOLTS[bi].maxCol = maxC + 35;
+          }
+
+          // ═══════════════════════════════════════════════════════
+          // ILLUMINATION BUFFER & BOLT BRIGHTNESS
+          // ═══════════════════════════════════════════════════════
+          var illumBuf = new Float32Array(ROWS * COLS);
+
+          function boltBrightness(bolt, t) {
+            var dt = t - bolt.strikeTime;
+            if (dt < 0) return 0;
+            if (bolt.mega) {
+              // Mega bolt: bright flash, then gentle glow during hold
+              if (dt > (bolt.holdTime || 0) + 1.0) return 0;
+              var attack = clamp01(dt / 0.02);
+              var decay = Math.exp(-dt * 4.0);
+              var flicker = 0;
+              if (dt > 0.04 && dt < 0.08) flicker = 0.5 * Math.exp(-Math.pow(dt - 0.06, 2) * 8000);
+              if (dt > 0.1 && dt < 0.16) flicker = 0.3 * Math.exp(-Math.pow(dt - 0.13, 2) * 5000);
+              // Keep a subtle glow during the hold period
+              var holdGlow = dt < (bolt.holdTime || 0) ? 0.15 : 0;
+              return attack * Math.max(decay + flicker, holdGlow);
+            }
+            if (dt > 1.5) return 0;
+            var attack = clamp01(dt / 0.02);
+            var decay = Math.exp(-dt * bolt.decayRate);
+            var flicker = 0;
+            if (dt > 0.04 && dt < 0.08) flicker = 0.5 * Math.exp(-Math.pow(dt - 0.06, 2) * 8000);
+            if (dt > 0.1 && dt < 0.16) flicker = 0.3 * Math.exp(-Math.pow(dt - 0.13, 2) * 5000);
+            return attack * (decay + flicker);
+          }
+
+          // Paint a single segment's glow into illumBuf
+          function paintSegGlow(x1, y1, x2, y2, strength, radius) {
+            var mnR = Math.max(0, Math.floor(Math.min(y1, y2) - radius));
+            var mxR = Math.min(ROWS - 1, Math.ceil(Math.max(y1, y2) + radius));
+            var mnC = Math.max(0, Math.floor(Math.min(x1, x2) - radius));
+            var mxC = Math.min(COLS - 1, Math.ceil(Math.max(x1, x2) + radius));
+            var dx = x2 - x1,
+              dy = y2 - y1;
+            var lenSq = dx * dx + dy * dy;
+            for (var r = mnR; r <= mxR; r++) {
+              for (var c = mnC; c <= mxC; c++) {
+                var dist;
+                if (lenSq < 0.001) {
+                  var ex = c - x1,
+                    ey = r - y1;
+                  dist = Math.sqrt(ex * ex + ey * ey);
+                } else {
+                  var t2 = ((c - x1) * dx + (r - y1) * dy) / lenSq;
+                  if (t2 < 0) t2 = 0;
+                  if (t2 > 1) t2 = 1;
+                  var px = x1 + t2 * dx,
+                    py = y1 + t2 * dy;
+                  var ex2 = c - px,
+                    ey2 = r - py;
+                  dist = Math.sqrt(ex2 * ex2 + ey2 * ey2);
+                }
+                if (dist < radius) {
+                  var val = strength * (1.0 - dist / radius);
+                  var idx = r * COLS + c;
+                  if (val > illumBuf[idx]) illumBuf[idx] = val;
+                }
+              }
+            }
+          }
+
+          // Paint a radial impact bloom at the strike point
+          function paintImpact(cx, cy, strength, radius) {
+            var mnR = Math.max(0, Math.floor(cy - radius));
+            var mxR = Math.min(ROWS - 1, Math.ceil(cy + radius));
+            var mnC = Math.max(0, Math.floor(cx - radius));
+            var mxC = Math.min(COLS - 1, Math.ceil(cx + radius));
+            for (var r = mnR; r <= mxR; r++) {
+              for (var c = mnC; c <= mxC; c++) {
+                var dx = c - cx,
+                  dy = r - cy;
+                var dist = Math.sqrt(dx * dx + dy * dy);
+                if (dist < radius) {
+                  var falloff = 1.0 - dist / radius;
+                  var val = strength * falloff * falloff;
+                  var idx = r * COLS + c;
+                  if (val > illumBuf[idx]) illumBuf[idx] = val;
+                }
+              }
+            }
+          }
+
+          function paintBolt(boltData, bb, mega) {
+            var radius = mega ? 45 : 20;
+            var segs = boltData.segments;
+            for (var i = 0; i < segs.length; i++) {
+              paintSegGlow(segs[i].x1, segs[i].y1, segs[i].x2, segs[i].y2, bb, radius);
+            }
+            var brs = boltData.branches;
+            for (var j = 0; j < brs.length; j++) {
+              var br = brs[j];
+              var brSegs = br.segments;
+              var brStr = bb * br.brightness;
+              var brRad = radius * 0.6;
+              for (var k = 0; k < brSegs.length; k++) {
+                paintSegGlow(brSegs[k].x1, brSegs[k].y1, brSegs[k].x2, brSegs[k].y2, brStr, brRad);
+              }
+            }
+            // Impact bloom at the strike point — extra bright glow where bolt meets text
+            var impactRadius = mega ? 55 : 28;
+            paintImpact(boltData.strikeCol, boltData.strikeRow, bb * 1.2, impactRadius);
+          }
+
+          // ═══════════════════════════════════════════════════════
+          // RENDER
+          // ═══════════════════════════════════════════════════════
+          function renderAtTime(t) {
+            ctx.fillStyle = "#000";
+            ctx.fillRect(0, 0, W, H);
+            ctx.font = CELL_H - 2 + "px monospace";
+            ctx.textBaseline = "top";
+
+            // Fade out in the last 1.5s of the composition
+            var TOTAL_DUR = 9.0;
+            var globalFade = clamp01((TOTAL_DUR - t) / 1.5);
+
+            // Clear and fill illumination buffer (for bolt glow in the sky)
+            for (var i = 0; i < illumBuf.length; i++) illumBuf[i] = 0;
+            // Also build per-cell crawl illumination for text
+            var crawlBuf = new Float32Array(ROWS * COLS);
+            for (var bi = 0; bi < BOLTS.length; bi++) {
+              var bb = boltBrightness(BOLTS[bi], t);
+              // For mega bolt, keep painting even after the flash fades (for the hold)
+              var dt = t - BOLTS[bi].strikeTime;
+              if (bb > 0.001) {
+                paintBolt(BOLTS[bi].bolt, bb, BOLTS[bi].mega);
+              }
+              // Crawl effect: electricity spreads through text pixels from strike point
+              if (dt > 0) {
+                var crawlMap = BOLTS[bi].crawlMap;
+                var crawlRadius = dt * BOLTS[bi].crawlSpeed;
+                var holdTime = BOLTS[bi].holdTime || 0;
+                var crawlDecay;
+                if (BOLTS[bi].mega) {
+                  // Mega bolt: stays at full brightness during hold, then fades
+                  if (dt < holdTime) {
+                    crawlDecay = 1.0;
+                  } else {
+                    crawlDecay = Math.exp(-(dt - holdTime) * 3.0);
+                  }
+                } else {
+                  crawlDecay = Math.exp(-dt * 5.0);
+                }
+                if (crawlDecay < 0.005) continue;
+                for (var ci = 0; ci < crawlMap.length; ci++) {
+                  if (crawlMap[ci] < 0) continue;
+                  if (crawlMap[ci] > crawlRadius) continue;
+                  var waveDist = crawlRadius - crawlMap[ci];
+                  var waveBright = crawlDecay;
+                  // Extra bright at the wavefront (leading edge of crawl)
+                  if (waveDist < 8 && dt < 1.0) {
+                    waveBright *= 1.0 + (1.0 - waveDist / 8) * 2.0;
+                  }
+                  if (waveBright > crawlBuf[ci]) crawlBuf[ci] = waveBright;
+                }
+              }
+            }
+
+            var lastFill = "";
+
+            for (var row = 0; row < ROWS; row++) {
+              for (var col = 0; col < COLS; col++) {
+                var ambN = fbm(col * 0.03 + t * 0.08, row * 0.04 + t * 0.06);
+                var ambBright = 0.02 + ambN * 0.04;
+
+                if (t < 0.6) {
+                  var flickerN = hash(col * 7 + Math.floor(t * 15), row * 11 + Math.floor(t * 15));
+                  if (flickerN > 0.997) {
+                    ambBright += 0.15 * (1.0 - t / 0.6);
+                  }
+                }
+
+                var localIllum = illumBuf[row * COLS + col];
+                var crawlIllum = crawlBuf[row * COLS + col];
+                var isText = textMask[row * COLS + col];
+                var brightness, cr, cg, cb;
+
+                if (isText && crawlIllum > 0.01) {
+                  // Text pixel illuminated by crawling electricity
+                  var ci2 = clamp01(crawlIllum);
+                  brightness = ci2 * globalFade;
+                  // Bright crawl front is white-green, trailing is green
+                  var whiteness = clamp01(crawlIllum - 0.8) * 3.0;
+                  cr = Math.round((10 + whiteness * 220) * brightness);
+                  cg = Math.round((60 + ci2 * 195) * brightness);
+                  cb = Math.round((5 + whiteness * 180) * brightness);
+                  // Also blend in any direct bolt proximity
+                  if (localIllum > 0.1) {
+                    var boost = localIllum * 0.4;
+                    cr = Math.min(255, cr + Math.round(boost * 200));
+                    cg = Math.min(255, cg + Math.round(boost * 100));
+                    cb = Math.min(255, cb + Math.round(boost * 180));
+                    brightness = Math.min(1.0, brightness + boost);
+                  }
+                } else if (localIllum > 0.03) {
+                  // Non-text cell near a bolt — bolt glow
+                  brightness = localIllum * globalFade;
+                  var coreAmt = clamp01((localIllum - 0.4) * 2.5);
+                  cr = Math.round(coreAmt * 230 * brightness);
+                  cg = Math.round((80 + localIllum * 175) * brightness);
+                  cb = Math.round(coreAmt * 190 * brightness);
+                } else {
+                  brightness = ambBright * globalFade;
+                  cr = 0;
+                  cg = Math.round((10 + ambN * 20) * brightness);
+                  cb = 0;
+                }
+
+                var dither = BAYER[row & 3][col & 3];
+                var sl = brightness * GLYPH_MAX;
+                var bl2 = Math.floor(sl);
+                var fr = sl - bl2;
+                var rl = bl2 + (fr > dither ? 1 : 0);
+                if (rl > GLYPH_MAX) rl = GLYPH_MAX;
+                if (rl < 1 && brightness > 0.01) rl = 1;
+                if (brightness < 0.01) rl = 0;
+                var ch = GLYPHS[rl];
+
+                if (rl === 0) continue;
+
+                var scanline = 0.92 + 0.08 * Math.sin(row * 0.6 + t * 0.8);
+                var vx = col / COLS - 0.5,
+                  vy = row / ROWS - 0.5;
+                var vig = 1.0 - (vx * vx + vy * vy) * 0.35;
+                if (vig < 0.55) vig = 0.55;
+
+                var m = scanline * vig;
+                var fr2 = Math.round(cr * m);
+                var fg = Math.round(cg * m);
+                var fb2 = Math.round(cb * m);
+                if (fr2 > 255) fr2 = 255;
+                if (fg > 255) fg = 255;
+                if (fb2 > 255) fb2 = 255;
+
+                var fill = "rgb(" + fr2 + "," + fg + "," + fb2 + ")";
+                if (fill !== lastFill) {
+                  ctx.fillStyle = fill;
+                  lastFill = fill;
+                }
+                ctx.fillText(ch, col * CELL_W, row * CELL_H);
+              }
+            }
+          }
+
+          renderAtTime(0);
+
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          var proxy = { time: 0 };
+          tl.to(
+            proxy,
+            {
+              time: 9,
+              duration: 9,
+              ease: "none",
+              onUpdate: function () {
+                renderAtTime(proxy.time);
+              },
+            },
+            0,
+          );
+          window.__timelines["ascii-lightning"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/ascii-lightning/registry-item.json b/registry/blocks/ascii-lightning/registry-item.json
new file mode 100644
index 000000000..e2cfa2b44
--- /dev/null
+++ b/registry/blocks/ascii-lightning/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ascii-lightning",
+  "type": "hyperframes:block",
+  "title": "ASCII Lightning",
+  "description": "Pure ASCII art lightning bolt animation on dark background",
+  "tags": ["title", "ascii", "animation"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 9,
+  "files": [
+    {
+      "path": "ascii-lightning.html",
+      "target": "compositions/ascii-lightning.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/instagram-follow/assets/avatar.jpg b/registry/blocks/instagram-follow/assets/avatar.jpg
new file mode 100644
index 000000000..d5ca2e945
Binary files /dev/null and b/registry/blocks/instagram-follow/assets/avatar.jpg differ
diff --git a/registry/blocks/instagram-follow/instagram-follow.html b/registry/blocks/instagram-follow/instagram-follow.html
new file mode 100644
index 000000000..27c7ea284
--- /dev/null
+++ b/registry/blocks/instagram-follow/instagram-follow.html
@@ -0,0 +1,288 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      .lower-third {
+        position: absolute;
+        bottom: 160px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 30px;
+        background: #1a1a1a;
+        border-radius: 75px;
+        padding: 25px 40px 25px 25px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
+      }
+
+      .avatar {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 3px solid #333;
+      }
+
+      .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      .name-row {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .display-name {
+        font-size: 42px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      .verified-badge {
+        width: 34px;
+        height: 34px;
+        flex-shrink: 0;
+      }
+
+      .verified-badge svg {
+        width: 34px;
+        height: 34px;
+        display: block;
+      }
+
+      .handle {
+        font-size: 28px;
+        font-weight: 400;
+        color: #a0a0a0;
+        line-height: 1.3;
+      }
+
+      .follower-count {
+        font-size: 25px;
+        font-weight: 400;
+        color: #737373;
+        line-height: 1.3;
+      }
+
+      .follow-btn {
+        position: relative;
+        width: 250px;
+        height: 80px;
+        border-radius: 40px;
+        background: #0095f6;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 30px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      .btn-text-follow {
+        opacity: 1;
+      }
+
+      .btn-text-following {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .chevron-icon {
+        display: inline-block;
+        width: 18px;
+        height: 18px;
+      }
+
+      .chevron-icon svg {
+        width: 18px;
+        height: 18px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="instagram-follow-overlay"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="profile-info">
+          <div class="name-row">
+            <div class="display-name">HeyGen</div>
+            <span class="verified-badge"
+              ><svg viewBox="0 0 40 40" fill="none">
+                <circle cx="20" cy="20" r="20" fill="#0095F6" />
+                <path d="M17.5 27.5L10 20l2.5-2.5 5 5 10-10L30 15 17.5 27.5z" fill="#fff" /></svg
+            ></span>
+          </div>
+          <div class="handle">@heygen_official</div>
+          <div class="follower-count">47.5K followers</div>
+        </div>
+        <div id="follow-btn" class="follow-btn">
+          <span id="btn-follow" class="btn-text btn-text-follow">Follow</span>
+          <span id="btn-following" class="btn-text btn-text-following">
+            <span>Following</span>
+            <span class="chevron-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline></svg
+            ></span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("follow-btn");
+      var textFollow = document.getElementById("btn-follow");
+      var textFollowing = document.getElementById("btn-following");
+
+      // Start off-screen
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Button background: IG blue → dark gray
+      tl.to(
+        btn,
+        {
+          backgroundColor: "#2f2f2f",
+          duration: 0.12,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      // Fade out "Follow", fade in "Following"
+      tl.to(
+        textFollow,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textFollowing,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["instagram-follow-overlay"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/instagram-follow/registry-item.json b/registry/blocks/instagram-follow/registry-item.json
new file mode 100644
index 000000000..6f3841937
--- /dev/null
+++ b/registry/blocks/instagram-follow/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "instagram-follow",
+  "type": "hyperframes:block",
+  "title": "Instagram Follow",
+  "description": "Animated Instagram follow overlay with profile card and follow button",
+  "tags": ["social", "overlay", "instagram"],
+  "dimensions": {
+    "width": 1080,
+    "height": 1920
+  },
+  "duration": 4.5,
+  "files": [
+    {
+      "path": "instagram-follow.html",
+      "target": "compositions/instagram-follow.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/avatar.jpg",
+      "target": "assets/avatar.jpg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/macos-notification/macos-notification.html b/registry/blocks/macos-notification/macos-notification.html
new file mode 100644
index 000000000..b5b018dd0
--- /dev/null
+++ b/registry/blocks/macos-notification/macos-notification.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=block"
+      rel="stylesheet"
+    />
+    <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 {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      .notification-card {
+        position: absolute;
+        top: 24px;
+        right: 24px;
+        width: 380px;
+        background: rgba(30, 30, 30, 0.82);
+        backdrop-filter: blur(40px);
+        -webkit-backdrop-filter: blur(40px);
+        border-radius: 16px;
+        padding: 16px;
+        box-shadow:
+          0 8px 32px rgba(0, 0, 0, 0.4),
+          inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+      }
+
+      .app-icon {
+        width: 36px;
+        height: 36px;
+        border-radius: 8px;
+        flex-shrink: 0;
+        overflow: hidden;
+      }
+
+      .app-icon svg {
+        width: 36px;
+        height: 36px;
+        display: block;
+      }
+
+      .notification-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .notification-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 2px;
+      }
+
+      .app-name {
+        font-size: 13px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.5);
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+      }
+
+      .time-label {
+        font-size: 13px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.35);
+      }
+
+      .notification-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 1.3;
+        margin-bottom: 2px;
+      }
+
+      .notification-body {
+        font-size: 13px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.6);
+        line-height: 1.35;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="macos-notification"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div
+        id="notification"
+        class="clip notification-card"
+        data-start="0"
+        data-duration="5"
+        data-track-index="0"
+      >
+        <div class="app-icon">
+          <svg viewBox="0 0 36 36" fill="none">
+            <defs>
+              <linearGradient
+                id="icon-grad"
+                x1="0"
+                y1="0"
+                x2="36"
+                y2="36"
+                gradientUnits="userSpaceOnUse"
+              >
+                <stop offset="0%" stop-color="#6366f1" />
+                <stop offset="100%" stop-color="#8b5cf6" />
+              </linearGradient>
+            </defs>
+            <rect width="36" height="36" rx="8" fill="url(#icon-grad)" />
+            <text
+              x="18"
+              y="23"
+              text-anchor="middle"
+              font-family="Inter, sans-serif"
+              font-size="14"
+              font-weight="700"
+              fill="#fff"
+            >
+              HF
+            </text>
+          </svg>
+        </div>
+        <div class="notification-content">
+          <div class="notification-header">
+            <span class="app-name">HyperFrames</span>
+            <span class="time-label">now</span>
+          </div>
+          <div class="notification-title">Prompt to replace this title</div>
+          <div class="notification-body">
+            Prompt to change this body text, the app icon, and the app name to match your content.
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+      var notification = document.getElementById("notification");
+
+      // Start off-screen to the right
+      gsap.set(notification, { x: 420, opacity: 0 });
+
+      // Slide in from right
+      tl.to(
+        notification,
+        {
+          x: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.2,
+      );
+
+      // Slide out to right
+      tl.to(
+        notification,
+        {
+          x: 420,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["macos-notification"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/macos-notification/registry-item.json b/registry/blocks/macos-notification/registry-item.json
new file mode 100644
index 000000000..4181c7284
--- /dev/null
+++ b/registry/blocks/macos-notification/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "macos-notification",
+  "type": "hyperframes:block",
+  "title": "macOS Notification",
+  "description": "Animated macOS-style notification banner with app icon and message",
+  "tags": ["social", "overlay", "notification"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 5,
+  "files": [
+    {
+      "path": "macos-notification.html",
+      "target": "compositions/macos-notification.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/reddit-post/reddit-post.html b/registry/blocks/reddit-post/reddit-post.html
new file mode 100644
index 000000000..5d862edc6
--- /dev/null
+++ b/registry/blocks/reddit-post/reddit-post.html
@@ -0,0 +1,346 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <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 {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      .reddit-card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 860px;
+        background: #1a1a2e;
+        border-radius: 16px;
+        padding: 32px;
+        box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);
+      }
+
+      /* Header */
+      .post-header {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 24px;
+      }
+
+      .subreddit-icon {
+        width: 48px;
+        height: 48px;
+        flex-shrink: 0;
+      }
+
+      .subreddit-icon svg {
+        width: 48px;
+        height: 48px;
+        display: block;
+      }
+
+      .post-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .subreddit-name {
+        font-size: 28px;
+        font-weight: 700;
+        color: #d7dadc;
+        line-height: 1.3;
+      }
+
+      .post-author {
+        font-size: 24px;
+        font-weight: 400;
+        color: #818384;
+        line-height: 1.3;
+      }
+
+      /* Content */
+      .post-title {
+        font-size: 38px;
+        font-weight: 700;
+        color: #d7dadc;
+        line-height: 1.35;
+        margin-bottom: 16px;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .post-body {
+        font-size: 28px;
+        font-weight: 400;
+        color: #818384;
+        line-height: 1.45;
+        margin-bottom: 28px;
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      /* Action bar */
+      .action-bar {
+        display: flex;
+        align-items: center;
+        gap: 28px;
+        padding-top: 20px;
+        border-top: 1px solid #343536;
+      }
+
+      .vote-group {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        background: #272729;
+        border-radius: 24px;
+        padding: 8px 16px;
+      }
+
+      .vote-btn {
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      .vote-btn svg {
+        width: 28px;
+        height: 28px;
+        display: block;
+      }
+
+      .vote-count {
+        font-size: 26px;
+        font-weight: 700;
+        color: #d7dadc;
+        min-width: 50px;
+        text-align: center;
+      }
+
+      .action-btn {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        background: #272729;
+        border-radius: 24px;
+        padding: 10px 20px;
+      }
+
+      .action-btn svg {
+        width: 26px;
+        height: 26px;
+        display: block;
+      }
+
+      .action-btn span {
+        font-size: 24px;
+        font-weight: 400;
+        color: #818384;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="reddit-post-overlay"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip reddit-card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Header -->
+        <div class="post-header">
+          <div class="subreddit-icon">
+            <svg viewBox="0 0 48 48" fill="none">
+              <circle cx="24" cy="24" r="24" fill="#4A90D9" />
+              <text
+                x="24"
+                y="30"
+                text-anchor="middle"
+                font-family="DM Sans, sans-serif"
+                font-size="22"
+                font-weight="700"
+                fill="#fff"
+              >
+                r/
+              </text>
+            </svg>
+          </div>
+          <div class="post-meta">
+            <span class="subreddit-name">r/hyperframes</span>
+            <span class="post-author">u/placeholder_user &middot; 3h</span>
+          </div>
+        </div>
+
+        <!-- Content -->
+        <div class="post-title">Prompt to change this title to whatever you want</div>
+        <div class="post-body">
+          Prompt to change this body text, the subreddit, username, and vote count to match your
+          content.
+        </div>
+
+        <!-- Action bar -->
+        <div class="action-bar">
+          <div class="vote-group">
+            <div id="upvote-btn" class="vote-btn">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path id="upvote-arrow" d="M12 4L3 14h5v6h8v-6h5L12 4z" fill="#818384" />
+              </svg>
+            </div>
+            <span id="vote-count" class="vote-count">4.2k</span>
+            <div class="vote-btn">
+              <svg viewBox="0 0 24 24" fill="none">
+                <path d="M12 20l9-10h-5V4H8v6H3l9 10z" fill="#818384" />
+              </svg>
+            </div>
+          </div>
+
+          <div class="action-btn">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#818384"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+            </svg>
+            <span>328</span>
+          </div>
+
+          <div class="action-btn">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#818384"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8" />
+              <polyline points="16 6 12 2 8 6" />
+              <line x1="12" y1="2" x2="12" y2="15" />
+            </svg>
+            <span>Share</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var upvoteBtn = document.getElementById("upvote-btn");
+      var upvoteArrow = document.getElementById("upvote-arrow");
+      var voteCount = document.getElementById("vote-count");
+
+      // Start off-screen below
+      gsap.set(card, { y: 400, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.6,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Upvote press-in
+      tl.to(
+        upvoteBtn,
+        {
+          scale: 0.85,
+          duration: 0.12,
+          ease: "power2.out",
+        },
+        1.5,
+      );
+
+      // Upvote release with spring bounce
+      tl.to(
+        upvoteBtn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.62,
+      );
+
+      // Arrow turns orange
+      tl.to(
+        upvoteArrow,
+        {
+          attr: { fill: "#ff4500" },
+          duration: 0.12,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Vote count turns orange + increments
+      tl.to(
+        voteCount,
+        {
+          color: "#ff4500",
+          duration: 0.12,
+          ease: "none",
+          onStart: function () {
+            voteCount.textContent = "4.3k";
+          },
+        },
+        1.62,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 400,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["reddit-post-overlay"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/reddit-post/registry-item.json b/registry/blocks/reddit-post/registry-item.json
new file mode 100644
index 000000000..dc9a69d23
--- /dev/null
+++ b/registry/blocks/reddit-post/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "reddit-post",
+  "type": "hyperframes:block",
+  "title": "Reddit Post Card",
+  "description": "Animated Reddit post card overlay with upvotes and comments",
+  "tags": ["social", "overlay", "reddit"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 5,
+  "files": [
+    {
+      "path": "reddit-post.html",
+      "target": "compositions/reddit-post.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/spotify-card/registry-item.json b/registry/blocks/spotify-card/registry-item.json
new file mode 100644
index 000000000..b14bd2e66
--- /dev/null
+++ b/registry/blocks/spotify-card/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "spotify-card",
+  "type": "hyperframes:block",
+  "title": "Spotify Now Playing",
+  "description": "Animated Spotify now-playing card with album art and progress bar",
+  "tags": ["social", "overlay", "spotify"],
+  "dimensions": {
+    "width": 1080,
+    "height": 1920
+  },
+  "duration": 5,
+  "files": [
+    {
+      "path": "spotify-card.html",
+      "target": "compositions/spotify-card.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/spotify-card/spotify-card.html b/registry/blocks/spotify-card/spotify-card.html
new file mode 100644
index 000000000..0951ba2e4
--- /dev/null
+++ b/registry/blocks/spotify-card/spotify-card.html
@@ -0,0 +1,299 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=block"
+      rel="stylesheet"
+    />
+    <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 {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "Inter", sans-serif;
+      }
+
+      .card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-top: -495px;
+        margin-left: -390px;
+        width: 780px;
+        background: linear-gradient(
+          165deg,
+          rgba(140, 155, 170, 0.42) 0%,
+          rgba(100, 115, 130, 0.35) 30%,
+          rgba(75, 88, 105, 0.38) 60%,
+          rgba(60, 72, 88, 0.44) 100%
+        );
+        border-radius: 28px;
+        padding: 36px;
+        border: 1px solid rgba(255, 255, 255, 0.22);
+        box-shadow:
+          0 24px 48px rgba(0, 0, 0, 0.3),
+          0 2px 6px rgba(0, 0, 0, 0.12),
+          inset 0 1px 0 rgba(255, 255, 255, 0.32),
+          inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+        backdrop-filter: blur(40px) saturate(180%);
+        -webkit-backdrop-filter: blur(40px) saturate(180%);
+        overflow: hidden;
+      }
+
+      /* Specular highlight — light refraction across top */
+      .card::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 55%;
+        background: linear-gradient(
+          180deg,
+          rgba(255, 255, 255, 0.18) 0%,
+          rgba(255, 255, 255, 0.07) 35%,
+          transparent 100%
+        );
+        border-radius: 28px 28px 0 0;
+        pointer-events: none;
+      }
+
+      /* Edge shine — bottom rim catch light */
+      .card::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 20px;
+        right: 20px;
+        height: 1px;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          rgba(255, 255, 255, 0.08) 30%,
+          rgba(255, 255, 255, 0.12) 50%,
+          rgba(255, 255, 255, 0.08) 70%,
+          transparent 100%
+        );
+        pointer-events: none;
+      }
+
+      /* Album Art */
+      .album-art {
+        width: 708px;
+        height: 708px;
+        border-radius: 16px;
+        overflow: hidden;
+        position: relative;
+        z-index: 1;
+        background: linear-gradient(145deg, #1db954 0%, #17a34a 30%, #0f7234 60%, #191414 100%);
+        margin-bottom: 36px;
+      }
+
+      .album-art-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.2;
+      }
+
+      /* Track Info */
+      .track-info {
+        position: relative;
+        z-index: 1;
+        margin-bottom: 28px;
+        padding: 0 8px;
+      }
+
+      .track-name {
+        font-size: 52px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: -0.02em;
+        line-height: 1.15;
+        margin-bottom: 8px;
+      }
+
+      .artist-name {
+        font-size: 34px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.7);
+        line-height: 1.3;
+      }
+
+      /* Spotify Branding */
+      .spotify-brand {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 0 8px;
+      }
+
+      .spotify-logo {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .spotify-brand-text {
+        font-size: 26px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.55);
+        letter-spacing: 0.01em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="spotify-now-playing"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Album Art -->
+        <div id="album-art" class="album-art">
+          <svg class="album-art-icon" width="200" height="200" viewBox="0 0 24 24" fill="none">
+            <path
+              d="M9 18V5l12-2v13"
+              stroke="rgba(255,255,255,0.7)"
+              stroke-width="1"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <circle cx="6" cy="18" r="3" stroke="rgba(255,255,255,0.7)" stroke-width="1" />
+            <circle cx="18" cy="16" r="3" stroke="rgba(255,255,255,0.7)" stroke-width="1" />
+          </svg>
+        </div>
+
+        <!-- Track Info -->
+        <div class="track-info">
+          <div id="track-name" class="track-name">HyperFrames</div>
+          <div id="artist-name" class="artist-name">HeyGen</div>
+        </div>
+
+        <!-- Spotify Branding -->
+        <div id="spotify-brand" class="spotify-brand">
+          <div class="spotify-logo">
+            <svg width="32" height="32" viewBox="0 0 16 16" fill="rgba(255,255,255,0.55)">
+              <path
+                d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288"
+              />
+            </svg>
+          </div>
+          <span class="spotify-brand-text">Spotify</span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var albumArt = document.getElementById("album-art");
+      var trackName = document.getElementById("track-name");
+      var artistName = document.getElementById("artist-name");
+      var spotifyBrand = document.getElementById("spotify-brand");
+
+      // Start state
+      gsap.set(card, { y: 60, opacity: 0, scale: 0.94 });
+      gsap.set(trackName, { y: 20, opacity: 0 });
+      gsap.set(artistName, { y: 16, opacity: 0 });
+      gsap.set(spotifyBrand, { y: 12, opacity: 0 });
+
+      // ── Card entrance ────────────────────────────────────────
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          scale: 1,
+          duration: 0.7,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // ── Text stagger in ─────────────────────────────────────
+      tl.to(
+        trackName,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power2.out",
+        },
+        0.55,
+      );
+
+      tl.to(
+        artistName,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.45,
+          ease: "power2.out",
+        },
+        0.7,
+      );
+
+      tl.to(
+        spotifyBrand,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.4,
+          ease: "power2.out",
+        },
+        0.85,
+      );
+
+      // ── Subtle album art breathe ────────────────────────────
+      tl.to(
+        albumArt,
+        {
+          scale: 1.015,
+          duration: 1.5,
+          ease: "power1.inOut",
+          yoyo: true,
+          repeat: 1,
+        },
+        1.2,
+      );
+
+      // ── Card exit ────────────────────────────────────────────
+      tl.to(
+        card,
+        {
+          y: -40,
+          opacity: 0,
+          scale: 0.96,
+          duration: 0.5,
+          ease: "power2.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["spotify-now-playing"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/tiktok-follow/assets/avatar.jpg b/registry/blocks/tiktok-follow/assets/avatar.jpg
new file mode 100644
index 000000000..d5ca2e945
Binary files /dev/null and b/registry/blocks/tiktok-follow/assets/avatar.jpg differ
diff --git a/registry/blocks/tiktok-follow/registry-item.json b/registry/blocks/tiktok-follow/registry-item.json
new file mode 100644
index 000000000..41f56d76a
--- /dev/null
+++ b/registry/blocks/tiktok-follow/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "tiktok-follow",
+  "type": "hyperframes:block",
+  "title": "TikTok Follow",
+  "description": "Animated TikTok follow overlay with profile card and follow button",
+  "tags": ["social", "overlay", "tiktok"],
+  "dimensions": {
+    "width": 1080,
+    "height": 1920
+  },
+  "duration": 4.5,
+  "files": [
+    {
+      "path": "tiktok-follow.html",
+      "target": "compositions/tiktok-follow.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/avatar.jpg",
+      "target": "assets/avatar.jpg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/tiktok-follow/tiktok-follow.html b/registry/blocks/tiktok-follow/tiktok-follow.html
new file mode 100644
index 000000000..32b0b96a5
--- /dev/null
+++ b/registry/blocks/tiktok-follow/tiktok-follow.html
@@ -0,0 +1,263 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1080px;
+        height: 1920px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      .lower-third {
+        position: absolute;
+        bottom: 160px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 30px;
+        background: #1a1a1a;
+        border-radius: 75px;
+        padding: 25px 40px 25px 25px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
+      }
+
+      .avatar {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+        border: 3px solid #333;
+      }
+
+      .profile-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      .display-name {
+        font-size: 42px;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      .handle {
+        font-size: 28px;
+        font-weight: 400;
+        color: #a0a0a0;
+        line-height: 1.3;
+      }
+
+      .follower-count {
+        font-size: 25px;
+        font-weight: 400;
+        color: #737373;
+        line-height: 1.3;
+      }
+
+      .follow-btn {
+        position: relative;
+        width: 250px;
+        height: 80px;
+        border-radius: 40px;
+        background: #fe2c55;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 30px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      .btn-text-follow {
+        opacity: 1;
+      }
+
+      .btn-text-following {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .check-icon {
+        display: inline-block;
+        width: 22px;
+        height: 22px;
+      }
+
+      .check-icon svg {
+        width: 22px;
+        height: 22px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="tiktok-follow-overlay"
+      data-width="1080"
+      data-height="1920"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="profile-info">
+          <div class="display-name">HeyGen</div>
+          <div class="handle">@heygen.com</div>
+          <div class="follower-count">1,999 followers</div>
+        </div>
+        <div id="follow-btn" class="follow-btn">
+          <span id="btn-follow" class="btn-text btn-text-follow">Follow</span>
+          <span id="btn-following" class="btn-text btn-text-following">
+            <span>Following</span>
+            <span class="check-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline></svg
+            ></span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("follow-btn");
+      var textFollow = document.getElementById("btn-follow");
+      var textFollowing = document.getElementById("btn-following");
+
+      // Start off-screen
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Button background: rose-red → dark gray
+      tl.to(
+        btn,
+        {
+          backgroundColor: "#2f2f2f",
+          duration: 0.12,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      // Fade out "Follow", fade in "Following"
+      tl.to(
+        textFollow,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textFollowing,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["tiktok-follow-overlay"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/ui-3d-reveal/registry-item.json b/registry/blocks/ui-3d-reveal/registry-item.json
new file mode 100644
index 000000000..00f4ad56e
--- /dev/null
+++ b/registry/blocks/ui-3d-reveal/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ui-3d-reveal",
+  "type": "hyperframes:block",
+  "title": "3D UI Reveal",
+  "description": "Perspective 3D reveal animation for UI elements",
+  "tags": ["showcase", "3d", "reveal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 13,
+  "files": [
+    {
+      "path": "ui-3d-reveal.html",
+      "target": "compositions/ui-3d-reveal.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/ui-3d-reveal/ui-3d-reveal.html b/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
new file mode 100644
index 000000000..6c7de7237
--- /dev/null
+++ b/registry/blocks/ui-3d-reveal/ui-3d-reveal.html
@@ -0,0 +1,2905 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ui-3d-reveal</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=block"
+      rel="stylesheet"
+    />
+    <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;
+        background-color: #0a0a0f;
+      }
+    </style>
+  </head>
+  <body>
+    <div data-composition-id="ui-3d-reveal" data-width="1920" data-height="1080" data-duration="13">
+      <!-- Background: Figma outer canvas dark -->
+      <div class="bg-base"></div>
+      <div class="bg-glow" id="bgGlow"></div>
+
+      <!-- ══════════════════════════════════════════
+         INTRO: Figma logo stroke draw + fill
+    ══════════════════════════════════════════ -->
+      <div class="intro-layer" id="introLayer">
+        <svg class="intro-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+          <g class="intro-logo" transform="translate(865, 397.5)">
+            <!-- Fill layer -->
+            <path
+              class="il-fill il-fill-1"
+              d="M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z"
+              fill="#F24E1E"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-2"
+              d="M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z"
+              fill="#FF7262"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-3"
+              d="M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z"
+              fill="#A259FF"
+              opacity="0"
+            />
+            <circle
+              class="il-fill il-fill-4"
+              cx="142.5"
+              cy="142.5"
+              r="47.5"
+              fill="#1ABCFE"
+              opacity="0"
+            />
+            <path
+              class="il-fill il-fill-5"
+              d="M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z"
+              fill="#0ACF83"
+              opacity="0"
+            />
+            <!-- Stroke layer -->
+            <path
+              class="il-stroke il-stroke-1"
+              d="M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z"
+              fill="none"
+              stroke="#F24E1E"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-2"
+              d="M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z"
+              fill="none"
+              stroke="#FF7262"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-3"
+              d="M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z"
+              fill="none"
+              stroke="#A259FF"
+              stroke-width="2"
+            />
+            <circle
+              class="il-stroke il-stroke-4"
+              cx="142.5"
+              cy="142.5"
+              r="47.5"
+              fill="none"
+              stroke="#1ABCFE"
+              stroke-width="2"
+            />
+            <path
+              class="il-stroke il-stroke-5"
+              d="M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z"
+              fill="none"
+              stroke="#0ACF83"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
+
+      <!-- 3D scene -->
+      <div class="scene" id="scene">
+        <div class="card-glow" id="cardGlow"></div>
+
+        <div class="card-wrapper" id="cardWrapper">
+          <!-- ═══════════════════════════════════════
+             FRONT FACE — Figma Interface
+        ═══════════════════════════════════════ -->
+          <div class="ui-card" id="uiCard">
+            <!-- ── TOOLBAR ── -->
+            <div class="fig-toolbar" id="figToolbar">
+              <!-- Left: logo + tools -->
+              <div class="tb-left">
+                <div class="fig-logo">
+                  <svg width="18" height="26" viewBox="0 0 18 26" fill="none">
+                    <rect x="0" y="0" width="9" height="9" rx="4.5" fill="#F24E1E" />
+                    <rect x="9" y="0" width="9" height="9" rx="4.5" fill="#FF7262" />
+                    <rect x="0" y="8.5" width="9" height="9" rx="4.5" fill="#A259FF" />
+                    <circle cx="13.5" cy="13" r="4.5" fill="#1ABCFE" />
+                    <rect x="0" y="17" width="9" height="9" rx="4.5" fill="#0ACF83" />
+                  </svg>
+                </div>
+                <div class="tool-divider"></div>
+                <div class="tool-group">
+                  <div class="tool-btn active" title="Move (V)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path d="M2 2l5 12 2-4 4-2L2 2z" fill="currentColor" />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Scale (K)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M3 3l10 10M10 3h3v3M3 10H6"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-divider"></div>
+                  <div class="tool-btn" title="Frame (F)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <rect
+                        x="2"
+                        y="5"
+                        width="12"
+                        height="9"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                      />
+                      <path
+                        d="M5 5V3M11 5V3M5 14v2M11 14v2M2 8H0M14 8h2"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Rectangle (R)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <rect
+                        x="2"
+                        y="4"
+                        width="12"
+                        height="9"
+                        rx="1.5"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Text (T)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M2 4h12M8 4v9M5 13h6"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                  <div class="tool-btn" title="Pen (P)">
+                    <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
+                      <path
+                        d="M3 13L8 3l5 10M5.5 8.5h5"
+                        stroke="currentColor"
+                        stroke-width="1.4"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Center: file breadcrumb -->
+              <div class="tb-center">
+                <span class="file-name">App Redesign</span>
+                <span class="file-chevron">›</span>
+                <span class="file-page">Design System</span>
+                <svg class="file-arrow" viewBox="0 0 10 6" width="10" height="6" fill="none">
+                  <path
+                    d="M1 1l4 4 4-4"
+                    stroke="currentColor"
+                    stroke-width="1.4"
+                    stroke-linecap="round"
+                  />
+                </svg>
+              </div>
+
+              <!-- Right: mode tabs + share + avatars -->
+              <div class="tb-right">
+                <div class="mode-tabs">
+                  <span class="mode-tab">Design</span>
+                  <span class="mode-tab active">Dev</span>
+                </div>
+                <div class="share-btn">
+                  <svg viewBox="0 0 16 16" fill="none" width="12" height="12">
+                    <path
+                      d="M4 8H12M9 5l3 3-3 3"
+                      stroke="white"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                  Share
+                </div>
+                <div class="avatar-cluster">
+                  <div class="fig-avatar" style="background: #a259ff; z-index: 3">S</div>
+                  <div
+                    class="fig-avatar"
+                    style="background: #f24e1e; z-index: 2; margin-left: -8px"
+                  >
+                    J
+                  </div>
+                  <div
+                    class="fig-avatar"
+                    style="background: #1abcfe; z-index: 1; margin-left: -8px"
+                  >
+                    K
+                  </div>
+                </div>
+                <div class="present-btn">▶</div>
+              </div>
+            </div>
+
+            <!-- ── BODY ── -->
+            <div class="fig-body">
+              <!-- LAYERS PANEL -->
+              <div class="fig-layers" id="figLayers">
+                <div class="panel-tabs">
+                  <span class="ptab active">Layers</span>
+                  <span class="ptab">Assets</span>
+                </div>
+
+                <div class="layer-search">
+                  <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                    <circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" />
+                    <path
+                      d="M9.5 9.5l2.5 2.5"
+                      stroke="currentColor"
+                      stroke-width="1.3"
+                      stroke-linecap="round"
+                    />
+                  </svg>
+                  <span class="search-placeholder">Search layers</span>
+                </div>
+
+                <div class="layer-list">
+                  <div class="layer-item page-item">
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="8"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                      <path
+                        d="M3 4h5M3 7h3"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Page 1</span>
+                  </div>
+
+                  <div class="layer-item frame-item expanded">
+                    <svg class="li-collapse" viewBox="0 0 8 8" width="8" height="8" fill="none">
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg
+                      class="li-icon frame-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <rect
+                        x="2"
+                        y="3"
+                        width="8"
+                        height="6"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                      <path
+                        d="M4 3V1M8 3V1M4 9v2M8 9v2M2 6H0M10 6h2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>HeyGen — Home</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1">
+                    <svg class="li-collapse" viewBox="0 0 8 8" width="8" height="8" fill="none">
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Navigation</span>
+                  </div>
+
+                  <div class="layer-item comp-item indent-2">
+                    <svg
+                      class="li-icon comp-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <path
+                        d="M6 1L11 6 6 11 1 6z"
+                        fill="none"
+                        stroke="#A259FF"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Logo / Mark</span>
+                  </div>
+
+                  <div class="layer-item text-item indent-2">
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <path
+                        d="M2 3h8M6 3v7M3 10h6"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <span>Nav Links</span>
+                  </div>
+
+                  <div class="layer-item comp-item indent-2 selected-layer" id="selectedLayer">
+                    <svg
+                      class="li-icon comp-icon"
+                      viewBox="0 0 12 12"
+                      fill="none"
+                      width="12"
+                      height="12"
+                    >
+                      <path
+                        d="M6 1L11 6 6 11 1 6z"
+                        fill="none"
+                        stroke="#A259FF"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Create Card</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Hero</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Feature Grid</span>
+                  </div>
+
+                  <div class="layer-item group-item indent-1 collapsed">
+                    <svg
+                      class="li-collapse"
+                      viewBox="0 0 8 8"
+                      width="8"
+                      height="8"
+                      fill="none"
+                      style="transform: rotate(-90deg)"
+                    >
+                      <path
+                        d="M2 3l2 2 2-2"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                        stroke-linecap="round"
+                      />
+                    </svg>
+                    <svg class="li-icon" viewBox="0 0 12 12" fill="none" width="12" height="12">
+                      <rect
+                        x="1"
+                        y="1"
+                        width="10"
+                        height="10"
+                        rx="1"
+                        stroke="currentColor"
+                        stroke-width="1.2"
+                      />
+                    </svg>
+                    <span>Footer</span>
+                  </div>
+                </div>
+
+                <div class="page-bar">
+                  <div class="pbar-tab active">Design System</div>
+                  <div class="pbar-tab">Landing</div>
+                  <div class="pbar-add">+</div>
+                </div>
+              </div>
+
+              <!-- CANVAS -->
+              <div class="fig-canvas" id="figCanvas">
+                <div class="canvas-frame-label">HeyGen — Home</div>
+
+                <!-- The artboard / HeyGen app.heygen.com — light mode -->
+                <div class="artboard" id="artboard">
+                  <!-- ══ LEFT ICON NAV (56px) ══ -->
+                  <div class="hg-icnav">
+                    <div class="hg-iclogo">
+                      <img
+                        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAAM+0lEQVRoBe2ZeZAU1R3Hf6+n59zZ2WWQQ0MUgqCoq6iIgIKYAgoTExMPCGI8qqIUJpZHLINltNQylWiViUlKqxRTKB6UWwWFURQPXJVDUTSAinIootzsxVw93dPdL9/f6+ndddwZd5a1yj/2Vb199/F53987ppeo3/WvQP8K9K9A/wr8EFfgk3VJWvPC70jKgD+9hqVy08zlcsXcu2XCz/u+Q9HnAzQ2Rmnk0JVBcicTSaG1fva5OX3+8TzOyBekPTlJAWmR7WTpuacvFFf0+fglHWol6SNLfrz2LP34wQeD5EypEaaIaxZFaupHDFy+YBp37OTojVXtRIEI6aGBNPf3K+XBG16Spx/ZoJVb9x3g+tWnxc3smrgw43GtQBFhwlsUi8W1YDT5EE/jy9liRsQh13W9SQVqaVBNiN677Xl5Z+Vp9r60bwCbmuK1gdzbcS0fipBJYcpTGHBBhCGkY/H4Cckld/xYTTNPn77a1jlhVjOZoHsfeEmu6cztu1ifANbHM5viupUIQ7UwzJJ9qBgPijxFaiP6oPrAczzt7bPEKXUOSVYxg9HTOAX4GIrE6JxHXpctT66U4/sOj+iIAQe+v+yVRND6CQOFoBorxsoFNQ6RB9ggyqI1sTP8ExXVDrxSVFEAkEGz8BGNknqI1j79prynryCPCDC5ftkDdSFjRhgqKSiGBBiD+mmG1FEeqA+Hz3r51uU88RtH0LEJmyTHWUH27BjUFKTXW3TX8ib5bmOXK8arUf3fXgMOWf/snLqwdWuUlSqqx6rpSjXOAySXMTCrGEBYE5nKU5w3ThR0hzIvtHZOmOGUA3YO8YRBZydfp+ZlTfLczlrVx/xuq2o5ZF1jQ0I3FkcDOcFAvM88k0QIWF15T1Ud5hoommworsWnNF7xbx5sgkPDB+dI7jQ85TgvCyVz8NJBiDTWpP7otHxz+Yvyb1zeG1c14KCmh+N1kfbVsbCls/kxUJAVUqboKcZQCrSoroojL5nLky6dCE/0P7NEa9SmhbtbSO4xPTPNFN88OSHJwMykK0kWKDDMlH/671L3g8a7ZahayKoB62sCGxOhXJ2nVBEEk+d95oP4cAyqs9kKQ4VHWcJ9Y/aSa/1Jbpgj5h3l0kO7m0m+nSECF6WViQrAeSryIaTZRMcZ8ozEaGpe9JSc6rfvSVgV4Inv/mNlXU1+pLfXfJUQFpXyYLw0AytTVfAmDfgqTaaZ3Vg6qXdmi1tGmTQhnCH30XaSBh89UI5NFcjKVHOSM4mG2m7tKOmuemyx83eV0YM/qpse1KMx7zxwf20t3aYJV03cGx9HHgBgTPCIAwqBSnaNR/ZkqNCSbXvxsqXJSmOd95zcaAXp1B3o5Ryd6HL0Gy0QJaFgsCApCFW5eweyfGZra+deLb7zAOoR4Jg1f51dP8BeogtX8AisjHJYWVaN+diU+DBRM0ChAufet6ZlPms0vzb7xcFeo8p/N2yQwfu+oBVtQZqiB3DjoO9deLSfDMhbspL4Z4i3nOhaik2zr9LGVurxOwEb1t3bEIu6H8ailo6LWvXVAciwSkFvCF0DIKpI1HN3p8hoTrua7b62au7rMytNolJZU5OMPHWQHmwN0+U5nRImlG0TUgzJSbEgRbRZaM/cfGX5XyUVAac2Xh83RiZ2x2JaXYfJYTZ8iDCEUrOLauahNkrvOezaOdMICu2tdVeu/nmlyZcrG7u56epkMHxJi+00bmqY/FRpvcsfl1P2D6CFIkLDwyna8NIccU5pHT9dEXDSezdvrUmI0Wx+DFgUEGbpKcWdFHIZOrRjt7Qylilsua22JnLB2jlr9/oDVBuO/2jV50Pq3RHtgcNC4FYwCpFC2rSa05bcmnHD6w5njUU06SJs0565soAT3rr+vvqjxR2iwyw7DxByLdq7dRdl21Kmlcvvj+iB+Vuu2/KyP+SKhw8OPYYijyQjofEREaiz8LRut52WVst59rwbav/s1ysNj12/7KMRR4tTHDxz+Jnsqqcyrgzsbldq2IkBMt0wZU3XMB13d8HRNxYovKJlzMQnS/vy02UBp6y75mDdIDFIVYQ1asKm5l37qG1/m51Pp9twJ/9z+/ytf/E7arp7Z2TQ0IH/SoZCM+qDwWFhVyte234NIgu325ac8XU0Hpt40m/Fvs4SxF5ddOfY4TX31MQDOFd0D473M6D4Scqhq75+4PIvlnMosU8OZZ3/7Rs96Yxv9FdMYMt27wIil9Dwyy7TmqJDX+53cql0RhQKq7Zfv+2Sri12Pm7cVavrv4kFAqPCLl5u7Io/aLvW43iIhDY2Fjvu47zxIfbwMCEES6VcfSxwUywe4kuoQy0+miWUc6GgendDDoZUirLCiPP2iYSCDX4/pWFZwJbPv1i8d4v5K9uydkV1/cId135ywG+854nMNXEKzw/pgdNCrghhxLJQfhsOfe5RkejQ9xfl2KRnqPKVz0wbnIwOcLDnlGJKNU89z0xZKZzMrqekb7JYIHIA77h4GZRxZQE3X/H+dWjDXjljsfwpPhfdrkkxKeBSjO8n9N5jx3B8QfOe4KZH6cGJfmPh5m9MJAbilmX1PMv2IDy1GI7TvpmqRVD9eHvTtPPNfl+lYVlArggzClhL6AlN0i9hTAlhl92ypf12pJVqaObA465WJoXHCSWCwZo1j7Yee+685Fe6rv9IinDR/Lw95pshd+TF/YOGr+MiMB8+8GZBWQNX/ZarCGgvoY/0Ao35VqseZEgAKZF9MLRhBdnZCAEpDCEnIPmVoGDQ4R2KBE+YzdLfXwzn8AmKUEJhH07VQ37eLBTaA7GbuN/uXFnAzPNyCKWqh+sAK47GVszC82FQYEBQF4pxKBdS1TQdm0hT+0kdItiDXN8uXg3qkGFAtGV4/xR1cCBl86kH6eRT08XhvhWUBXQ1GoAxqnIMx2bIUqjtyWn2XcC4TCmI0CQ7yNWhDn7jhpR63j7zpOa4Uzw1uZ5StnhFcDybTm9Ln3zq7VxWznk9dVOa+IX4zFGv524KS7J4n/lwvNfYs0oMp9TiECMpMIQcZ69rAfyFw2raEp+LAcmhCzAb8YLKQxrqcZzzbABy3DRt27Lz01T7Cn+8AcpUwKn8RJkilY3fFhjc21smevLV4kOEYQzYhw/DoYX6nMdhAYelVXA9ExWaUlDB8Z4DiINvBL6qDMVpW3mUQdVcLrvAaGj4utL8uKwiYHS2mG9FaGdpJ75ibIZ8cHDIUBxXymHyCgh5vjn66uGrGVkMy+0CQpkoFHQZRh0orBIUYpW+oRyuW6Ui9mU2k95gNJzwILr/Tld2D/otI4JOzEZpdSRP4/nuY1NkE+TDwj88lHKcB8+A6kApxrkfhu3I8645/jwIU8TdACc1fpoVT08VohIG40uczVVd5gDj/s28aRgH3OncricOrSo7MUtY8Vni7FSU7sdvMZcPEfZKObRmOGVyiCv1EKo08n3V2BwZiM1YeW7DKgeKJkpBxze/TuU8xSwoyd4BqIlDwUpnrqXzR7RXnnVnKYbsmUteJha0xmgG1MwwHIMxUA4TZZAOGMQ5T5koQjZFhsvCGBmU89X+Q+gS7A5OQl4GLEgd/TIYDhJYL38nt5C2sZNMQBqH215zTh/+TM9m7NXCMD13w34tVrVLGtYapU954mqyDIo4q8aQHPp7jMF8GAWKcl9FTtv+BnGFZJUK6nCBSoBiIHy+Aiwuc4RWLnuYGo75Wc9n69XEMNW5kbPE4REXi5PaYvSYGcRnS54oe1arCKuUYrXgfUgGUwuBkM2TAWVQVy85vtMKgOK9ZkK9PODwHVylCzhBpYN3gJGahY2srtlqZoxheudGXyTmpWN0qYH/lzFYVxCG8RVTMAzEsMjvKON0kL94shPSxtFvwiwZjKFgvsqr4raWJTT22FdVvMo/vQbkcRouEMtagzQiE6NdJiac4XuPYYogrBjnMTz7Dljkc7yg4xkPxy8ZfEXFYeKBcV6HS6X20+lD53akq4wcESCPNWWm2DfuAjE8E6WlecAwnG+KSq0icFcFUzhw8qgno5p60eF3MJ6Z3UylYLmUyvbqw5W/Dt306hdVF54/XVxqRui6fJgKHWaI3pVZArIDFnG+R9UrKKypPchPtW5da/tDNPGYD7st62FmmZ572Lqk2sypYmE2RKdYUTrAQOqQQeibJqumHgnFdkIvAqorvKSztvYdNG7IH0tyq072KSCPfvFksQ1+aD5Gq/gjLcP5YKxaV+eKIqDo8vWYKxhGjkL2eV3r9jbe54D+ROZOEtPwWL8d54ZTCqbqANaJkmd+heD9ZOS8/ZhKtWLfTaYTB+31+zqSsGRNj6Sr7tsu/ECeiXfYcvxcGMbvV9/hl+D2G8aL0X6aVm8+kwI102nSyF7/s7Ojry6R7x3QH+vhD+RMfBO8Ck+8ITCb9/4wTizwy/rD/hXoX4H+FehfgR/qCvwfTSeznkI0t8oAAAAASUVORK5CYII="
+                        width="30"
+                        height="30"
+                        style="display: block"
+                        alt="HeyGen"
+                      />
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <circle cx="8" cy="5.5" r="2.8" stroke="currentColor" stroke-width="1.3" />
+                        <path
+                          d="M2 14.5c0-3.31 2.69-6 6-6s6 2.69 6 6"
+                          stroke="currentColor"
+                          stroke-width="1.3"
+                          stroke-linecap="round"
+                        />
+                      </svg>
+                      <span>Avatar</span>
+                    </div>
+                    <div class="hg-icitem hg-icactive">
+                      <div class="hg-icbg">
+                        <svg viewBox="0 0 16 16" fill="none" width="15" height="15">
+                          <circle cx="8" cy="5.5" r="2.5" stroke="white" stroke-width="1.3" />
+                          <path
+                            d="M2.5 14c0-3.04 2.46-5.5 5.5-5.5s5.5 2.46 5.5 5.5"
+                            stroke="white"
+                            stroke-width="1.3"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      </div>
+                      <span>Video Agent</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M3 4l3 8M10 4l3 8M6 10h4"
+                          stroke="currentColor"
+                          stroke-width="1.4"
+                          stroke-linecap="round"
+                        />
+                      </svg>
+                      <span>Motion Cut</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M2 4h12M8 4v9M5 13h6"
+                          stroke="currentColor"
+                          stroke-width="1.4"
+                          stroke-linecap="round"
+                        />
+                        <circle cx="12" cy="3" r="1.5" fill="#3B82F6" />
+                      </svg>
+                      <span>Translate</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <rect
+                          x="2"
+                          y="2"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="9"
+                          y="2"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="2"
+                          y="9"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                        <rect
+                          x="9"
+                          y="9"
+                          width="5"
+                          height="5"
+                          rx="1.5"
+                          fill="currentColor"
+                          opacity="0.45"
+                        />
+                      </svg>
+                      <span>Apps</span>
+                    </div>
+                    <div class="hg-icitem">
+                      <svg viewBox="0 0 16 16" fill="none" width="16" height="16">
+                        <path
+                          d="M2 6a2 2 0 012-2h2l2 2h4a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                          stroke="currentColor"
+                          stroke-width="1.3"
+                        />
+                      </svg>
+                      <span>Projects</span>
+                    </div>
+                    <div class="hg-icuser">J</div>
+                  </div>
+
+                  <!-- ══ HISTORY PANEL (105px) ══ -->
+                  <div class="hg-histpanel">
+                    <div class="hg-histhead">
+                      <span>Video Agent</span>
+                      <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                        <rect
+                          x="1"
+                          y="1"
+                          width="4.5"
+                          height="12"
+                          rx="1"
+                          stroke="currentColor"
+                          stroke-width="1.2"
+                        />
+                        <rect
+                          x="8.5"
+                          y="1"
+                          width="4.5"
+                          height="12"
+                          rx="1"
+                          stroke="currentColor"
+                          stroke-width="1.2"
+                        />
+                      </svg>
+                    </div>
+                    <div class="hg-newitem">
+                      <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                        <path
+                          d="M1 6.5L6 1.5l5 5V11H7.5V8H4.5v3H1V6.5Z"
+                          fill="#3B82F6"
+                          fill-opacity="0.85"
+                        />
+                      </svg>
+                      New video
+                    </div>
+                    <div class="hg-histcat">YESTERDAY</div>
+                    <div class="hg-histrow">AI Skills Gap: Alien</div>
+                    <div class="hg-histcat">PREVIOUS 3 DAYS</div>
+                    <div class="hg-histrow">AI Skills Gap: Alien</div>
+                    <div class="hg-histrow">Product Strategy: An AI...</div>
+                    <div class="hg-histrow">S9</div>
+                    <div class="hg-histrow">S7</div>
+                    <div class="hg-histrow">S5</div>
+                    <div class="hg-histrow">S3</div>
+                    <div class="hg-histcat">PREVIOUS 7 DAYS</div>
+                    <div class="hg-histrow">S8 lock</div>
+                    <div class="hg-histrow">S4</div>
+                    <div class="hg-histrow">S2</div>
+                    <div class="hg-histrow">Moody t2</div>
+                  </div>
+
+                  <!-- ══ MAIN CONTENT (359px) ══ -->
+                  <div class="hg-maincnt">
+                    <!-- Top-right icon cluster -->
+                    <div class="hg-toprighticons">
+                      <div class="hg-ticon">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <circle cx="6" cy="6" r="4.5" stroke="currentColor" stroke-width="1.3" />
+                          <path
+                            d="M9.5 9.5l2.5 2.5"
+                            stroke="currentColor"
+                            stroke-width="1.3"
+                            stroke-linecap="round"
+                          />
+                        </svg>
+                      </div>
+                      <div class="hg-ticon hg-notifico">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <path
+                            d="M7 1.5a4 4 0 00-4 4v3l-1 2h10l-1-2v-3a4 4 0 00-4-4z"
+                            stroke="currentColor"
+                            stroke-width="1.2"
+                          />
+                          <path
+                            d="M5.5 10.5a1.5 1.5 0 003 0"
+                            stroke="currentColor"
+                            stroke-width="1.2"
+                          />
+                        </svg>
+                        <div class="hg-notifbadge">99+</div>
+                      </div>
+                      <div class="hg-ticon">
+                        <svg viewBox="0 0 14 14" fill="none" width="11" height="11">
+                          <path
+                            d="M7 2l1.2 3.8H12L9 8.2l1.2 3.8L7 9.5l-3.2 2.5L5 8.2 2 5.8h3.8z"
+                            stroke="currentColor"
+                            stroke-width="1.1"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+
+                    <!-- Hero heading -->
+                    <div class="hg-herotitle">Turn your ideas into<br />production-ready video</div>
+
+                    <!-- ─ Create card ─ -->
+                    <div class="hg-createcard" id="hgCreateCard">
+                      <!-- Selector row: Avatar | Voice | Style -->
+                      <div class="hg-selrow">
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Avatar</span>
+                          <div class="hg-selbox">
+                            <div class="hg-avphoto"></div>
+                            <span class="hg-seltxt">Jordan</span>
+                          </div>
+                        </div>
+                        <div class="hg-seldiv"></div>
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Voice</span>
+                          <div class="hg-selbox">
+                            <div class="hg-voicebars">
+                              <div class="hg-vbar" style="height: 5px"></div>
+                              <div class="hg-vbar" style="height: 9px"></div>
+                              <div class="hg-vbar" style="height: 7px"></div>
+                              <div class="hg-vbar" style="height: 11px"></div>
+                              <div class="hg-vbar" style="height: 5px"></div>
+                            </div>
+                            <span class="hg-seltxt">Auto</span>
+                          </div>
+                        </div>
+                        <div class="hg-seldiv"></div>
+                        <div class="hg-sel">
+                          <span class="hg-sellbl">Style</span>
+                          <div class="hg-selbox">
+                            <div class="hg-styleico">
+                              <svg viewBox="0 0 14 14" fill="none" width="12" height="12">
+                                <rect
+                                  x="1"
+                                  y="1"
+                                  width="12"
+                                  height="12"
+                                  rx="2"
+                                  stroke="currentColor"
+                                  stroke-width="1.2"
+                                />
+                                <path
+                                  d="M4.5 7l2 2 3-3"
+                                  stroke="currentColor"
+                                  stroke-width="1.2"
+                                  stroke-linecap="round"
+                                />
+                              </svg>
+                            </div>
+                            <span class="hg-seltxt">Auto</span>
+                          </div>
+                        </div>
+                        <div class="hg-settico">
+                          <svg viewBox="0 0 14 14" fill="none" width="13" height="13">
+                            <circle cx="7" cy="7" r="2" stroke="currentColor" stroke-width="1.2" />
+                            <path
+                              d="M7 1.5V3M7 11v1.5M1.5 7H3M11 7h1.5M3.4 3.4l1 1M9.6 9.6l1 1M3.4 10.6l1-1M9.6 4.4l1-1"
+                              stroke="currentColor"
+                              stroke-width="1.2"
+                              stroke-linecap="round"
+                            />
+                          </svg>
+                        </div>
+                      </div>
+                      <!-- Input -->
+                      <div class="hg-cinput">Describe your video idea ...</div>
+                      <!-- Bottom bar -->
+                      <div class="hg-cbottom">
+                        <div class="hg-cbleft">
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M6 2v8M2 6h8"
+                                stroke="currentColor"
+                                stroke-width="1.4"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M6 1.5l1 3H10L7.5 6.5l1 3L6 8 3.5 9.5l1-3L2 4.5H5z"
+                                fill="#9CA3AF"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-cbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="11" height="11">
+                              <path
+                                d="M1.5 3h9M1.5 6h9M1.5 9h6"
+                                stroke="currentColor"
+                                stroke-width="1.3"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                        <div class="hg-cbright">
+                          <div class="hg-genbtn">
+                            <svg viewBox="0 0 10 10" fill="none" width="9" height="9">
+                              <path d="M5 1l1 3h3L7 6l1 3L5 7.5 2 9l1-3L1 4h3z" fill="#6B7280" />
+                            </svg>
+                            Generate
+                            <svg viewBox="0 0 8 6" fill="none" width="8" height="6">
+                              <path
+                                d="M1 1l3 3 3-3"
+                                stroke="#6B7280"
+                                stroke-width="1.3"
+                                stroke-linecap="round"
+                              />
+                            </svg>
+                          </div>
+                          <div class="hg-submitbtn">
+                            <svg viewBox="0 0 12 12" fill="none" width="10" height="10">
+                              <path
+                                d="M6 9V3M3 6l3-3 3 3"
+                                stroke="white"
+                                stroke-width="1.5"
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                              />
+                            </svg>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <!-- Styles from community -->
+                    <div class="hg-stylessec">
+                      <div class="hg-stitle">Styles from the community</div>
+                      <div class="hg-spills">
+                        <div class="hg-spill hg-spactive">All Styles</div>
+                        <div class="hg-spill">Retro Tech</div>
+                        <div class="hg-spill">Iconic Artist</div>
+                        <div class="hg-spill">Pop Culture</div>
+                        <div class="hg-spill">Print</div>
+                        <div class="hg-spill">Cinematic</div>
+                      </div>
+                      <div class="hg-scards">
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(135deg, #1b2a5e, #2d4a9a)"
+                        >
+                          <span class="hg-sclbl">IMPLEMENTATION DEPTH</span>
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(160deg, #c9ad88, #b89668)"
+                        >
+                          <span
+                            class="hg-sclbl"
+                            style="font-style: italic; color: #3d2810; font-size: 5.5px"
+                            >Strategy means saying NO</span
+                          >
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="
+                            background: #ede9e0;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                          "
+                        >
+                          <span style="color: #cc4422; font-size: 14px; font-weight: 700">?</span>
+                        </div>
+                        <div
+                          class="hg-sc"
+                          style="background: linear-gradient(135deg, #8b1515, #c92020)"
+                        >
+                          <span class="hg-sclbl" style="color: #ffd9a0; font-size: 5px"
+                            >THINK BIG.<br />START SMALL.</span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Figma selection handles on the first video card -->
+                <div class="selection-ring" id="selectionRing">
+                  <div class="sel-handle tl"></div>
+                  <div class="sel-handle tr"></div>
+                  <div class="sel-handle bl"></div>
+                  <div class="sel-handle br"></div>
+                  <div class="sel-label">Create Card · W 322 H 110</div>
+                </div>
+              </div>
+
+              <!-- DESIGN PROPERTIES PANEL -->
+              <div class="fig-props" id="figProps">
+                <div class="panel-tabs">
+                  <span class="ptab active">Design</span>
+                  <span class="ptab">Prototype</span>
+                  <span class="ptab">Inspect</span>
+                </div>
+
+                <!-- Alignment row -->
+                <div class="prop-align">
+                  <div class="align-btn">⬓</div>
+                  <div class="align-btn">⬒</div>
+                  <div class="align-btn active-align">⬔</div>
+                  <div class="align-divider"></div>
+                  <div class="align-btn">⬕</div>
+                  <div class="align-btn">⬗</div>
+                </div>
+
+                <!-- Frame section -->
+                <div class="prop-section">
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">W</span>
+                      <span class="prop-val">108</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">H</span>
+                      <span class="prop-val">34</span>
+                    </div>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">X</span>
+                      <span class="prop-val">1244</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">Y</span>
+                      <span class="prop-val">18</span>
+                    </div>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">↺</span>
+                      <span class="prop-val">0°</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">⌐</span>
+                      <span class="prop-val">8</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Auto layout -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Auto layout</span>
+                    <span class="prop-section-icon">−</span>
+                  </div>
+                  <div class="prop-row-2">
+                    <div class="prop-field">
+                      <span class="prop-pre">→</span>
+                      <span class="prop-val">12px</span>
+                    </div>
+                    <div class="prop-field">
+                      <span class="prop-pre">⊡</span>
+                      <span class="prop-val">14 / 8</span>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- Fill -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Fill</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="fill-row">
+                    <div class="fill-preview" style="background: #6366f1"></div>
+                    <span class="fill-hex">6366F1</span>
+                    <span class="fill-pct">100%</span>
+                  </div>
+                </div>
+
+                <!-- Stroke -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Stroke</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="fill-row muted">
+                    <span class="prop-empty">No strokes</span>
+                  </div>
+                </div>
+
+                <!-- Effects -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Effects</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                  <div class="effect-row">
+                    <div class="effect-dot"></div>
+                    <span class="effect-name">Drop shadow</span>
+                  </div>
+                </div>
+
+                <!-- Export -->
+                <div class="prop-section">
+                  <div class="prop-section-head">
+                    <span class="prop-section-label">Export</span>
+                    <span class="prop-section-icon">+</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- /fig-body -->
+          </div>
+          <!-- /ui-card -->
+
+          <!-- RIGHT DEPTH FACE -->
+          <div class="depth-right" id="depthRight"></div>
+        </div>
+        <!-- /card-wrapper -->
+      </div>
+      <!-- /scene -->
+
+      <!-- ══════════════════════════════════════════
+         OUTRO: Logo rebuild + tagline + URL pill
+    ══════════════════════════════════════════ -->
+      <div class="outro-layer" id="outroLayer">
+        <svg class="outro-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+          <g class="outro-logo" transform="translate(880, 310)">
+            <!-- Fill layer -->
+            <path
+              class="ol-fill ol-fill-1"
+              d="M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z"
+              fill="#F24E1E"
+              opacity="0"
+            />
+            <path
+              class="ol-fill ol-fill-2"
+              d="M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z"
+              fill="#FF7262"
+              opacity="0"
+            />
+            <path
+              class="ol-fill ol-fill-3"
+              d="M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z"
+              fill="#A259FF"
+              opacity="0"
+            />
+            <circle class="ol-fill ol-fill-4" cx="120" cy="120" r="40" fill="#1ABCFE" opacity="0" />
+            <path
+              class="ol-fill ol-fill-5"
+              d="M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z"
+              fill="#0ACF83"
+              opacity="0"
+            />
+            <!-- Stroke layer -->
+            <path
+              class="ol-stroke ol-stroke-1"
+              d="M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z"
+              fill="none"
+              stroke="#F24E1E"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-2"
+              d="M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z"
+              fill="none"
+              stroke="#FF7262"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-3"
+              d="M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z"
+              fill="none"
+              stroke="#A259FF"
+              stroke-width="2"
+            />
+            <circle
+              class="ol-stroke ol-stroke-4"
+              cx="120"
+              cy="120"
+              r="40"
+              fill="none"
+              stroke="#1ABCFE"
+              stroke-width="2"
+            />
+            <path
+              class="ol-stroke ol-stroke-5"
+              d="M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z"
+              fill="none"
+              stroke="#0ACF83"
+              stroke-width="2"
+            />
+          </g>
+
+          <!-- Tagline — individual tspan letters for stagger -->
+          <text class="outro-tagline" x="960" y="648" text-anchor="middle">
+            <tspan class="otl">N</tspan>
+            <tspan class="otl">o</tspan>
+            <tspan class="otl">t</tspan>
+            <tspan class="otl">h</tspan>
+            <tspan class="otl">i</tspan>
+            <tspan class="otl">n</tspan>
+            <tspan class="otl">g</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">g</tspan>
+            <tspan class="otl">r</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">t</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">i</tspan>
+            <tspan class="otl">s</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">m</tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">d</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl"></tspan>
+            <tspan class="otl">a</tspan>
+            <tspan class="otl">l</tspan>
+            <tspan class="otl">o</tspan>
+            <tspan class="otl">n</tspan>
+            <tspan class="otl">e</tspan>
+            <tspan class="otl">.</tspan>
+          </text>
+
+          <!-- URL pill -->
+          <rect
+            class="url-border"
+            x="885"
+            y="688"
+            width="150"
+            height="40"
+            rx="20"
+            fill="none"
+            stroke="#3C3C3C"
+            stroke-width="1.5"
+          />
+          <rect
+            class="url-bg"
+            x="885"
+            y="688"
+            width="150"
+            height="40"
+            rx="20"
+            fill="#2C2C2C"
+            opacity="0"
+          />
+          <text
+            class="url-text"
+            x="960"
+            y="713"
+            text-anchor="middle"
+            fill="#868686"
+            font-size="16"
+            font-weight="400"
+            opacity="0"
+          >
+            figma.com
+          </text>
+        </svg>
+      </div>
+
+      <!-- Fade to black -->
+      <div class="outro-fade" id="outroFade"></div>
+
+      <style>
+        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap");
+
+        /*
+        Figma palette:
+        canvas-bg:    #1E1E1E
+        panel-bg:     #2C2C2C
+        panel-dark:   #252525
+        toolbar:      #2C2C2C
+        divider:      rgba(255,255,255,0.1)
+        text:         #E8E8E8
+        text-muted:   #868686
+        text-dim:     #555555
+        selected-bg:  rgba(24,160,251,0.14)
+        blue:         #18A0FB
+        purple:       #A259FF
+        green:        #0ACF83
+        red:          #F24E1E
+        orange:       #FF7262
+      */
+
+        [data-composition-id="ui-3d-reveal"] {
+          position: relative;
+          width: 1920px;
+          height: 1080px;
+          overflow: hidden;
+          font-family: "Inter", sans-serif;
+          background: #111111;
+        }
+
+        /* ── Background ── */
+        [data-composition-id="ui-3d-reveal"] .bg-base {
+          position: absolute;
+          inset: 0;
+          background: #111111;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .bg-glow {
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(
+              ellipse 900px 600px at 50% 52%,
+              rgba(24, 160, 251, 0.06) 0%,
+              transparent 65%
+            ),
+            radial-gradient(
+              ellipse 500px 300px at 20% 75%,
+              rgba(162, 89, 255, 0.04) 0%,
+              transparent 60%
+            );
+          pointer-events: none;
+        }
+
+        /* ── Scene ── */
+        [data-composition-id="ui-3d-reveal"] .scene {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          perspective: 2800px;
+          perspective-origin: 50% 50%;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .card-glow {
+          position: absolute;
+          width: 1200px;
+          height: 780px;
+          border-radius: 24px;
+          background: radial-gradient(
+            ellipse at 50% 50%,
+            rgba(24, 160, 251, 0.18) 0%,
+            transparent 65%
+          );
+          filter: blur(50px);
+          pointer-events: none;
+          opacity: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .card-wrapper {
+          position: relative;
+          transform-style: preserve-3d;
+          will-change: transform;
+        }
+
+        /* ── Front face ── */
+        [data-composition-id="ui-3d-reveal"] .ui-card {
+          width: 1100px;
+          height: 680px;
+          background: #1e1e1e;
+          border-radius: 12px;
+          overflow: hidden;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          position: relative;
+          box-shadow:
+            inset -1px 0 0 rgba(24, 160, 251, 0.2),
+            0 40px 120px rgba(0, 0, 0, 0.7);
+        }
+
+        /* ── Depth face ── */
+        [data-composition-id="ui-3d-reveal"] .depth-right {
+          position: absolute;
+          top: 12px;
+          left: 1100px;
+          width: 10px;
+          height: 656px;
+          transform-origin: 0% 50%;
+          transform: rotateY(90deg);
+          background: linear-gradient(
+            to right,
+            rgba(80, 160, 255, 0.4) 0%,
+            rgba(40, 100, 200, 0.2) 40%,
+            rgba(10, 20, 50, 0.9) 100%
+          );
+          border-radius: 3px 2px 2px 3px;
+        }
+
+        /* ═══════════════════════════
+         TOOLBAR
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-toolbar {
+          height: 48px;
+          background: #2c2c2c;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          align-items: center;
+          padding: 0 12px;
+          gap: 0;
+          flex-shrink: 0;
+          position: relative;
+          z-index: 2;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-left {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          flex: 0 0 auto;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-logo {
+          width: 32px;
+          height: 32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 6px;
+          cursor: default;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-logo:hover {
+          background: rgba(255, 255, 255, 0.08);
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-divider {
+          width: 1px;
+          height: 20px;
+          background: rgba(255, 255, 255, 0.12);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-group {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-btn {
+          width: 30px;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 5px;
+          color: #868686;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tool-btn.active {
+          background: rgba(24, 160, 251, 0.18);
+          color: #18a0fb;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-center {
+          flex: 1;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 5px;
+          font-size: 12px;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-name {
+          font-weight: 500;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-chevron {
+          color: #555;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-page {
+          color: #868686;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .file-arrow {
+          color: #868686;
+          margin-left: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .tb-right {
+          flex: 0 0 auto;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tabs {
+          display: flex;
+          background: rgba(255, 255, 255, 0.06);
+          border-radius: 6px;
+          padding: 2px;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tab {
+          font-size: 11px;
+          font-weight: 500;
+          color: #868686;
+          padding: 4px 10px;
+          border-radius: 4px;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .mode-tab.active {
+          background: #3c3c3c;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .share-btn {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          background: #18a0fb;
+          color: white;
+          font-size: 11px;
+          font-weight: 600;
+          padding: 6px 12px;
+          border-radius: 6px;
+          cursor: default;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .avatar-cluster {
+          display: flex;
+          align-items: center;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fig-avatar {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          font-size: 9px;
+          font-weight: 700;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: 2px solid #2c2c2c;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .present-btn {
+          width: 28px;
+          height: 28px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 5px;
+          background: rgba(255, 255, 255, 0.06);
+          color: #868686;
+          font-size: 9px;
+          cursor: default;
+        }
+
+        /* ═══════════════════════════
+         BODY LAYOUT
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-body {
+          display: flex;
+          height: 632px; /* 680 - 48 toolbar */
+        }
+
+        /* ═══════════════════════════
+         LAYERS PANEL
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-layers {
+          width: 210px;
+          flex-shrink: 0;
+          background: #2c2c2c;
+          border-right: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .panel-tabs {
+          display: flex;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ptab {
+          flex: 1;
+          text-align: center;
+          font-size: 11px;
+          font-weight: 500;
+          color: #868686;
+          padding: 9px 0 8px;
+          cursor: default;
+          border-bottom: 2px solid transparent;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ptab.active {
+          color: #e8e8e8;
+          border-bottom-color: #18a0fb;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-search {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 7px 10px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          color: #555;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .search-placeholder {
+          font-size: 11px;
+          color: #555;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-list {
+          flex: 1;
+          overflow: hidden;
+          padding: 4px 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          padding: 4px 8px;
+          font-size: 11px;
+          color: #868686;
+          cursor: default;
+          height: 26px;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.page-item {
+          color: #e8e8e8;
+          font-weight: 500;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.frame-item {
+          color: #e8e8e8;
+          font-weight: 500;
+          padding-left: 6px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.indent-1 {
+          padding-left: 18px;
+        }
+        [data-composition-id="ui-3d-reveal"] .layer-item.indent-2 {
+          padding-left: 30px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .layer-item.comp-item {
+          color: #c9a0ff;
+        }
+        [data-composition-id="ui-3d-reveal"] .frame-icon {
+          color: #6ca9ff !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .selected-layer {
+          background: rgba(24, 160, 251, 0.15);
+          border-radius: 4px;
+          color: #18a0fb !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .li-collapse {
+          color: #555;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .li-icon {
+          flex-shrink: 0;
+          color: #868686;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .comp-icon {
+          color: #a259ff !important;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .page-bar {
+          display: flex;
+          align-items: center;
+          border-top: 1px solid rgba(255, 255, 255, 0.08);
+          padding: 0 4px;
+          height: 34px;
+          flex-shrink: 0;
+          gap: 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-tab {
+          font-size: 10px;
+          color: #868686;
+          padding: 4px 8px;
+          border-radius: 4px;
+          white-space: nowrap;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-tab.active {
+          background: rgba(255, 255, 255, 0.08);
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .pbar-add {
+          font-size: 14px;
+          color: #555;
+          padding: 2px 6px;
+          cursor: default;
+          margin-left: auto;
+        }
+
+        /* ═══════════════════════════
+         CANVAS
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-canvas {
+          flex: 1;
+          background: #1e1e1e;
+          position: relative;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .canvas-frame-label {
+          position: absolute;
+          top: 18px;
+          left: 50%;
+          transform: translateX(-50%);
+          font-size: 10px;
+          color: #555;
+          white-space: nowrap;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .artboard {
+          width: 520px;
+          height: 360px;
+          background: #ffffff;
+          border-radius: 4px;
+          overflow: hidden;
+          position: relative;
+          display: flex;
+          box-shadow:
+            0 8px 40px rgba(0, 0, 0, 0.5),
+            0 0 0 1px rgba(0, 0, 0, 0.08);
+          margin-top: 20px;
+        }
+
+        /* ── Artboard content ── */
+        [data-composition-id="ui-3d-reveal"] .ab-nav {
+          height: 44px;
+          background: #fff;
+          border-bottom: 1px solid #f0f0f0;
+          display: flex;
+          align-items: center;
+          padding: 0 20px;
+          gap: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-logo-mark {
+          width: 22px;
+          height: 22px;
+          background: #6366f1;
+          border-radius: 6px;
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-logo-text {
+          width: 48px;
+          height: 10px;
+          background: #1a1a1a;
+          border-radius: 3px;
+          margin-left: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-nav-links {
+          display: flex;
+          gap: 14px;
+          flex: 1;
+          justify-content: center;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-link {
+          width: 28px;
+          height: 8px;
+          background: #d0d0d0;
+          border-radius: 3px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-cta-btn {
+          background: #6366f1;
+          color: white;
+          font-size: 10px;
+          font-weight: 600;
+          padding: 6px 14px;
+          border-radius: 6px;
+          white-space: nowrap;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-hero {
+          padding: 28px 24px 20px;
+          background: #fafafa;
+          border-bottom: 1px solid #f0f0f0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-badge {
+          display: inline-flex;
+          align-items: center;
+          font-size: 9px;
+          font-weight: 500;
+          color: #6366f1;
+          background: #eef2ff;
+          padding: 3px 8px;
+          border-radius: 20px;
+          margin-bottom: 10px;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-h1 {
+          font-size: 22px;
+          font-weight: 700;
+          color: #111;
+          line-height: 1.2;
+          letter-spacing: -0.04em;
+          margin-bottom: 8px;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-sub {
+          font-size: 10px;
+          color: #6b6b6b;
+          margin-bottom: 14px;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-hero-btns {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-btn-primary {
+          background: #6366f1;
+          color: white;
+          font-size: 9px;
+          font-weight: 600;
+          padding: 7px 16px;
+          border-radius: 6px;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-btn-ghost {
+          font-size: 9px;
+          color: #6366f1;
+          font-weight: 500;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-cards {
+          display: flex;
+          gap: 10px;
+          padding: 16px 20px;
+          background: #fff;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-card {
+          flex: 1;
+          background: #f8f9fa;
+          border: 1px solid #efefef;
+          border-radius: 8px;
+          padding: 12px 10px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-card-icon {
+          width: 24px;
+          height: 24px;
+          border-radius: 6px;
+          margin-bottom: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-card-title {
+          width: 70%;
+          height: 7px;
+          background: #d0d0d0;
+          border-radius: 3px;
+          margin-bottom: 6px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .ab-card-body {
+          width: 90%;
+          height: 6px;
+          background: #e8e8e8;
+          border-radius: 3px;
+        }
+
+        /* ── Selection handles ── */
+        [data-composition-id="ui-3d-reveal"] .selection-ring {
+          position: absolute;
+          width: 322px;
+          height: 110px;
+          border: 1px solid #18a0fb;
+          pointer-events: none;
+          /* positioned over the create card in main content */
+          top: calc(50% - 40px);
+          left: calc(50% + 86px);
+          transform: translate(-50%, -50%);
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-handle {
+          position: absolute;
+          width: 7px;
+          height: 7px;
+          background: white;
+          border: 1.5px solid #18a0fb;
+          border-radius: 1px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-handle.tl {
+          top: -4px;
+          left: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.tr {
+          top: -4px;
+          right: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.bl {
+          bottom: -4px;
+          left: -4px;
+        }
+        [data-composition-id="ui-3d-reveal"] .sel-handle.br {
+          bottom: -4px;
+          right: -4px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .sel-label {
+          position: absolute;
+          top: -22px;
+          left: -1px;
+          font-size: 9px;
+          color: #18a0fb;
+          white-space: nowrap;
+          font-family: "Inter", sans-serif;
+          font-weight: 500;
+        }
+
+        /* ═══════════════════════════
+         PROPERTIES PANEL
+      ═══════════════════════════ */
+        [data-composition-id="ui-3d-reveal"] .fig-props {
+          width: 240px;
+          flex-shrink: 0;
+          background: #2c2c2c;
+          border-left: 1px solid rgba(255, 255, 255, 0.08);
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-align {
+          display: flex;
+          align-items: center;
+          gap: 3px;
+          padding: 8px 12px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .align-btn {
+          width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+          color: #868686;
+          font-size: 14px;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .active-align {
+          background: rgba(255, 255, 255, 0.08);
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .align-divider {
+          width: 1px;
+          height: 16px;
+          background: rgba(255, 255, 255, 0.1);
+          margin: 0 2px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section {
+          padding: 10px 12px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-head {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-label {
+          font-size: 11px;
+          font-weight: 500;
+          color: #e8e8e8;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-section-icon {
+          font-size: 14px;
+          color: #555;
+          cursor: default;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-row-2 {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 6px;
+          margin-bottom: 5px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-field {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          background: rgba(255, 255, 255, 0.06);
+          border-radius: 4px;
+          padding: 5px 7px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-pre {
+          font-size: 10px;
+          color: #555;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-val {
+          font-size: 11px;
+          color: #e8e8e8;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-row {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-preview {
+          width: 18px;
+          height: 18px;
+          border-radius: 3px;
+          border: 1px solid rgba(255, 255, 255, 0.15);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-hex {
+          font-size: 11px;
+          color: #e8e8e8;
+          font-family: "Inter", sans-serif;
+          flex: 1;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .fill-pct {
+          font-size: 11px;
+          color: #868686;
+          font-family: "Inter", sans-serif;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .prop-empty {
+          font-size: 11px;
+          color: #555;
+          font-style: italic;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-row {
+          display: flex;
+          align-items: center;
+          gap: 7px;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          flex-shrink: 0;
+        }
+
+        [data-composition-id="ui-3d-reveal"] .effect-name {
+          font-size: 11px;
+          color: #868686;
+        }
+
+        /* ═══════════════════════════
+         HEYGEN APP UI — LIGHT MODE
+      ═══════════════════════════ */
+
+        /* ── Icon nav (56px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-icnav {
+          width: 56px;
+          flex-shrink: 0;
+          height: 360px;
+          background: #ffffff;
+          border-right: 1px solid #ebebeb;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding-top: 0;
+          position: relative;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-iclogo {
+          width: 56px;
+          height: 50px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-bottom: 1px solid #f0f0f0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icitem {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 3px;
+          padding: 8px 0;
+          color: #9ca3af;
+          cursor: default;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icitem span {
+          font-size: 7px;
+          color: inherit;
+          font-family: "Inter", sans-serif;
+          text-align: center;
+          line-height: 1;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icactive {
+          color: #10b8a9 !important;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icactive span {
+          color: #10b8a9 !important;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icbg {
+          width: 34px;
+          height: 34px;
+          border-radius: 9px;
+          background: #10b8a9;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-icuser {
+          position: absolute;
+          bottom: 10px;
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          background: #1a1a1a;
+          font-size: 9px;
+          font-weight: 700;
+          color: white;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-family: "Inter", sans-serif;
+        }
+
+        /* ── History panel (120px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-histpanel {
+          width: 120px;
+          flex-shrink: 0;
+          height: 360px;
+          background: #f7f7f8;
+          border-right: 1px solid #ebebeb;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histhead {
+          height: 44px;
+          flex-shrink: 0;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 10px;
+          font-size: 10px;
+          font-weight: 600;
+          color: #111;
+          border-bottom: 1px solid #efefef;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-newitem {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 7px 8px;
+          margin: 6px 6px 0;
+          background: #e8f0fe;
+          border-radius: 7px;
+          font-size: 9.5px;
+          font-weight: 500;
+          color: #1a1a1a;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histcat {
+          font-size: 7px;
+          font-weight: 600;
+          color: #b0b0b0;
+          letter-spacing: 0.06em;
+          padding: 9px 10px 3px;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-histrow {
+          padding: 3.5px 10px;
+          font-size: 9px;
+          color: #444;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+
+        /* ── Main content (359px) ── */
+        [data-composition-id="ui-3d-reveal"] .hg-maincnt {
+          flex: 1;
+          height: 360px;
+          background: #ffffff;
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          padding: 10px 14px 10px;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-toprighticons {
+          position: absolute;
+          top: 9px;
+          right: 10px;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-ticon {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          border: 1px solid #e5e7eb;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #6b7280;
+          cursor: default;
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-notifico {
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-notifbadge {
+          position: absolute;
+          top: -5px;
+          right: -7px;
+          background: #ef4444;
+          color: white;
+          font-size: 5.5px;
+          font-weight: 700;
+          padding: 1.5px 3px;
+          border-radius: 8px;
+          font-family: "Inter", sans-serif;
+          border: 1.5px solid white;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-herotitle {
+          font-size: 15px;
+          font-weight: 800;
+          color: #111111;
+          line-height: 1.22;
+          letter-spacing: -0.04em;
+          margin-bottom: 12px;
+          font-family: "Inter", sans-serif;
+          padding-right: 84px;
+          margin-top: 2px;
+        }
+
+        /* ── Create card ── */
+        [data-composition-id="ui-3d-reveal"] .hg-createcard {
+          border: 2px solid #7dd4cf;
+          border-radius: 12px;
+          overflow: hidden;
+          background: #ffffff;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-selrow {
+          display: flex;
+          align-items: stretch;
+          border-bottom: 1px solid #f3f4f6;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sel {
+          flex: 1;
+          padding: 8px 10px;
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-seldiv {
+          width: 1px;
+          background: #f0f0f0;
+          flex-shrink: 0;
+          margin: 8px 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-settico {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 10px;
+          color: #9ca3af;
+          flex-shrink: 0;
+          border-left: 1px solid #f0f0f0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sellbl {
+          font-size: 8px;
+          color: #9ca3af;
+          font-weight: 500;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-selbox {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          background: #f4f4f5;
+          border-radius: 7px;
+          padding: 5px 7px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-avphoto {
+          width: 30px;
+          height: 26px;
+          border-radius: 5px;
+          flex-shrink: 0;
+          background: linear-gradient(170deg, #7a4b2a 0%, #b07540 45%, #d4a070 100%);
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-seltxt {
+          font-size: 9px;
+          font-weight: 500;
+          color: #1a1a1a;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-voicebars {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          width: 22px;
+          justify-content: center;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-vbar {
+          width: 2.5px;
+          background: #c4c4c4;
+          border-radius: 1.5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-styleico {
+          width: 22px;
+          height: 22px;
+          background: #e8e8e8;
+          border-radius: 5px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #888;
+          flex-shrink: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cinput {
+          padding: 10px 12px 8px;
+          font-size: 10px;
+          color: #c4c4c4;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbottom {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 6px 10px;
+          border-top: 1px solid #f3f4f6;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbleft {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbtn {
+          width: 24px;
+          height: 24px;
+          border: 1px solid #e4e4e7;
+          border-radius: 6px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: #6b7280;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-cbright {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-genbtn {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          background: #f4f4f5;
+          border: 1px solid #e4e4e7;
+          border-radius: 8px;
+          padding: 5px 9px;
+          font-size: 9px;
+          font-weight: 500;
+          color: #374151;
+          font-family: "Inter", sans-serif;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-submitbtn {
+          width: 26px;
+          height: 26px;
+          border-radius: 50%;
+          background: #111111;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: default;
+        }
+
+        /* ── Styles from community ── */
+        [data-composition-id="ui-3d-reveal"] .hg-stylessec {
+          margin-top: 10px;
+          flex: 1;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-stitle {
+          font-size: 10.5px;
+          font-weight: 600;
+          color: #111;
+          margin-bottom: 7px;
+          flex-shrink: 0;
+          font-family: "Inter", sans-serif;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spills {
+          display: flex;
+          gap: 5px;
+          margin-bottom: 8px;
+          flex-shrink: 0;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spill {
+          font-size: 8.5px;
+          font-weight: 500;
+          white-space: nowrap;
+          padding: 4px 9px;
+          border: 1.5px solid #e0e0e3;
+          border-radius: 20px;
+          color: #555;
+          font-family: "Inter", sans-serif;
+          cursor: default;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-spactive {
+          border-color: #10b8a9;
+          color: #10b8a9;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-scards {
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 6px;
+          flex: 1;
+          overflow: hidden;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sc {
+          border-radius: 6px;
+          overflow: hidden;
+          display: flex;
+          align-items: flex-end;
+          padding: 5px;
+          position: relative;
+        }
+        [data-composition-id="ui-3d-reveal"] .hg-sclbl {
+          font-size: 6px;
+          font-weight: 700;
+          color: rgba(255, 255, 255, 0.85);
+          font-family: "Inter", sans-serif;
+          letter-spacing: 0.04em;
+          line-height: 1.3;
+          text-transform: uppercase;
+        }
+
+        /* ══ INTRO LAYER ══ */
+        [data-composition-id="ui-3d-reveal"] .intro-layer {
+          position: absolute;
+          inset: 0;
+          z-index: 10;
+          pointer-events: none;
+        }
+        [data-composition-id="ui-3d-reveal"] .intro-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+        [data-composition-id="ui-3d-reveal"] .il-stroke {
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+
+        /* ══ OUTRO LAYER ══ */
+        [data-composition-id="ui-3d-reveal"] .outro-layer {
+          position: absolute;
+          inset: 0;
+          z-index: 10;
+          pointer-events: none;
+          opacity: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .outro-svg {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+        [data-composition-id="ui-3d-reveal"] .ol-stroke {
+          stroke-linecap: round;
+          stroke-linejoin: round;
+        }
+        [data-composition-id="ui-3d-reveal"] .outro-tagline {
+          font-family: "Inter", sans-serif;
+          font-size: 42px;
+          font-weight: 500;
+          fill: #fff;
+          letter-spacing: -0.5px;
+        }
+        [data-composition-id="ui-3d-reveal"] .otl {
+          opacity: 0;
+        }
+        [data-composition-id="ui-3d-reveal"] .url-border {
+          stroke-dasharray: 500;
+          stroke-dashoffset: 500;
+        }
+
+        /* ══ OUTRO FADE OVERLAY ══ */
+        [data-composition-id="ui-3d-reveal"] .outro-fade {
+          position: absolute;
+          inset: 0;
+          background: #000;
+          opacity: 0;
+          z-index: 20;
+          pointer-events: none;
+        }
+      </style>
+
+      <script>
+        (function () {
+          var S = '[data-composition-id="ui-3d-reveal"]';
+          var tl = gsap.timeline({ paused: true });
+
+          var wrapper = document.querySelector(S + " .card-wrapper");
+          var scene = document.querySelector(S + " .scene");
+          var cardGlow = document.querySelector(S + " .card-glow");
+
+          // ── Calculate intro stroke lengths ──
+          document.querySelectorAll(S + " .il-stroke").forEach(function (el) {
+            var len =
+              el.tagName === "circle"
+                ? 2 * Math.PI * parseFloat(el.getAttribute("r"))
+                : el.getTotalLength();
+            el.style.strokeDasharray = len;
+            el.style.strokeDashoffset = len;
+          });
+
+          // ── Calculate outro stroke lengths ──
+          document.querySelectorAll(S + " .ol-stroke").forEach(function (el) {
+            var len =
+              el.tagName === "circle"
+                ? 2 * Math.PI * parseFloat(el.getAttribute("r"))
+                : el.getTotalLength();
+            el.style.strokeDasharray = len;
+            el.style.strokeDashoffset = len;
+          });
+
+          // ─────────────────────────────────────────────────────
+          // INITIAL STATE
+          // ─────────────────────────────────────────────────────
+          gsap.set(wrapper, { opacity: 0, scale: 0.74, rotationY: 0, y: 24 });
+          gsap.set(
+            [
+              S + " .fig-toolbar",
+              S + " .fig-layers",
+              S + " .fig-props",
+              S + " .fig-canvas",
+              S + " .layer-item",
+              S + " .selection-ring",
+            ],
+            { opacity: 0 },
+          );
+          gsap.set(S + " .fig-toolbar", { y: -10 });
+          gsap.set(S + " .fig-layers", { x: -16 });
+          gsap.set(S + " .fig-props", { x: 16 });
+          gsap.set(S + " .layer-item", { x: -8 });
+          gsap.set(S + " .artboard", { scale: 0.94, opacity: 0 });
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 0 — LOGO INTRO  (0 – 1.35s)
+          // Stroke draw cascade → color fill flash → scale to 0
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            S + " .il-stroke-1",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.0,
+          );
+          tl.to(
+            S + " .il-stroke-2",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.06,
+          );
+          tl.to(
+            S + " .il-stroke-3",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.12,
+          );
+          tl.to(
+            S + " .il-stroke-4",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.18,
+          );
+          tl.to(
+            S + " .il-stroke-5",
+            { strokeDashoffset: 0, duration: 0.4, ease: "power1.inOut" },
+            0.24,
+          );
+
+          tl.to(S + " .il-fill-1", { opacity: 1, duration: 0.08 }, 0.5);
+          tl.to(S + " .il-fill-2", { opacity: 1, duration: 0.08 }, 0.54);
+          tl.to(S + " .il-fill-3", { opacity: 1, duration: 0.08 }, 0.58);
+          tl.to(S + " .il-fill-4", { opacity: 1, duration: 0.08 }, 0.62);
+          tl.to(S + " .il-fill-5", { opacity: 1, duration: 0.08 }, 0.66);
+          tl.to(S + " .il-stroke", { opacity: 0.3, duration: 0.15 }, 0.6);
+
+          // Scale the logo down to nothing
+          tl.to(S + " .il-stroke", { opacity: 0, duration: 0.2 }, 1.0);
+          tl.to(
+            S + " .intro-logo",
+            {
+              scale: 0,
+              transformOrigin: "95px 142.5px",
+              duration: 0.35,
+              ease: "power2.in",
+            },
+            1.0,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 1 — FLAT REVEAL  (1.5 – 3.4s)
+          // ═════════════════════════════════════════════════════
+          var T = 1.5;
+
+          tl.to(
+            wrapper,
+            {
+              opacity: 1,
+              scale: 0.79,
+              y: 0,
+              duration: 0.55,
+              ease: "expo.out",
+            },
+            T + 0.0,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.5,
+              duration: 0.8,
+              ease: "power2.out",
+            },
+            T + 0.05,
+          );
+
+          tl.to(
+            S + " .fig-toolbar",
+            {
+              opacity: 1,
+              y: 0,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            T + 0.23,
+          );
+
+          tl.to(
+            S + " .fig-layers",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.45,
+              ease: "expo.out",
+            },
+            T + 0.35,
+          );
+
+          tl.to(
+            S + " .fig-props",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.45,
+              ease: "expo.out",
+            },
+            T + 0.37,
+          );
+
+          tl.to(
+            S + " .fig-canvas",
+            {
+              opacity: 1,
+              duration: 0.4,
+              ease: "power2.out",
+            },
+            T + 0.45,
+          );
+
+          tl.to(
+            S + " .artboard",
+            {
+              opacity: 1,
+              scale: 1,
+              duration: 0.55,
+              ease: "back.out(1.4)",
+            },
+            T + 0.5,
+          );
+
+          tl.to(
+            S + " .layer-item",
+            {
+              opacity: 1,
+              x: 0,
+              duration: 0.35,
+              stagger: { each: 0.045, ease: "power1.in" },
+              ease: "power2.out",
+            },
+            T + 0.57,
+          );
+
+          tl.to(
+            S + " .selection-ring",
+            {
+              opacity: 1,
+              duration: 0.25,
+              ease: "power2.out",
+            },
+            T + 1.25,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 2 — CAMERA PUSH  (3.5 – 4.8s)
+          // Bigger zoom: 0.79 → 1.15 so the UI fills the frame
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              scale: 1.15,
+              duration: 1.3,
+              ease: "power3.inOut",
+            },
+            3.5,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.85,
+              scale: 1.25,
+              duration: 1.2,
+              ease: "power2.inOut",
+            },
+            3.5,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 3 — 3D TILT  (4.2 – 5.55s)
+          // Steeper angle (-34°) for more dramatic depth reveal
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              rotationY: -34,
+              duration: 1.35,
+              ease: "expo.out",
+            },
+            4.2,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              y: -16,
+              duration: 1.1,
+              ease: "power2.out",
+            },
+            4.3,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // PHASE 4 — 3D HOLD  (5.55 – 7.3s)
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            wrapper,
+            {
+              y: -8,
+              rotationY: -31,
+              duration: 0.9,
+              ease: "sine.inOut",
+            },
+            5.55,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              y: -20,
+              rotationY: -35,
+              duration: 0.9,
+              ease: "sine.inOut",
+            },
+            6.45,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0.7,
+              duration: 0.9,
+              ease: "sine.inOut",
+              yoyo: true,
+              repeat: 1,
+            },
+            5.55,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // SLIDE OFF — 3D depth fly-away  (7.3 – 7.85s)
+          // Scene x exits left. Wrapper z shrinks into distance.
+          // Deeper z (-4000) + steeper rotation (-55°) = very
+          // dramatic 3D exit — card turns away and vanishes.
+          // ═════════════════════════════════════════════════════
+
+          tl.to(
+            scene,
+            {
+              x: -2200,
+              duration: 0.55,
+              ease: "power4.in",
+            },
+            7.3,
+          );
+
+          tl.to(
+            wrapper,
+            {
+              z: -7500,
+              rotationY: -65,
+              duration: 0.55,
+              ease: "power4.in",
+            },
+            7.3,
+          );
+
+          tl.to(
+            cardGlow,
+            {
+              opacity: 0,
+              duration: 0.3,
+              ease: "power3.in",
+            },
+            7.3,
+          );
+
+          // ═════════════════════════════════════════════════════
+          // OUTRO — LOGO BUILD + TAGLINE + PILL  (7.9 – 13s)
+          // ═════════════════════════════════════════════════════
+          var O = 7.9;
+
+          tl.set(S + " .outro-layer", { opacity: 1 }, O);
+
+          // Stroke draw cascade
+          tl.to(
+            S + " .ol-stroke-1",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.0,
+          );
+          tl.to(
+            S + " .ol-stroke-2",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.15,
+          );
+          tl.to(
+            S + " .ol-stroke-3",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.3,
+          );
+          tl.to(
+            S + " .ol-stroke-4",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.45,
+          );
+          tl.to(
+            S + " .ol-stroke-5",
+            { strokeDashoffset: 0, duration: 0.8, ease: "power1.inOut" },
+            O + 0.6,
+          );
+
+          // Color fill cascade
+          tl.to(S + " .ol-fill-1", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.4);
+          tl.to(S + " .ol-fill-2", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.55);
+          tl.to(S + " .ol-fill-3", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.7);
+          tl.to(S + " .ol-fill-4", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 1.85);
+          tl.to(S + " .ol-fill-5", { opacity: 1, duration: 0.15, ease: "power1.out" }, O + 2.0);
+          tl.to(S + " .ol-stroke", { opacity: 0.3, duration: 0.4, ease: "none" }, O + 1.8);
+
+          // Subtle scale settle
+          tl.fromTo(
+            S + " .outro-logo",
+            { scale: 1, transformOrigin: "80px 120px" },
+            { scale: 1.04, duration: 0.2, ease: "power2.out" },
+            O + 2.3,
+          );
+          tl.to(
+            S + " .outro-logo",
+            {
+              scale: 1,
+              transformOrigin: "80px 120px",
+              duration: 0.2,
+              ease: "power2.inOut",
+            },
+            O + 2.5,
+          );
+
+          // Tagline letter stagger
+          var letters = document.querySelectorAll(S + " .otl");
+          for (var k = 0; k < letters.length; k++) {
+            tl.fromTo(
+              letters[k],
+              { opacity: 0, y: 8 },
+              { opacity: 1, y: 0, duration: 0.12, ease: "power2.out" },
+              O + 2.8 + k * 0.025,
+            );
+          }
+
+          // URL pill: stroke draw → fill → text
+          tl.to(
+            S + " .url-border",
+            {
+              strokeDashoffset: 0,
+              duration: 0.35,
+              ease: "power1.inOut",
+            },
+            O + 3.8,
+          );
+          tl.to(S + " .url-bg", { opacity: 1, duration: 0.15 }, O + 4.15);
+          tl.to(S + " .url-text", { opacity: 1, duration: 0.2 }, O + 4.2);
+
+          // Fade to black
+          tl.to(
+            S + " .outro-fade",
+            {
+              opacity: 1,
+              duration: 0.6,
+              ease: "none",
+            },
+            O + 4.8,
+          );
+
+          window.__timelines["ui-3d-reveal"] = tl;
+        })();
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/blocks/x-post/registry-item.json b/registry/blocks/x-post/registry-item.json
new file mode 100644
index 000000000..5c8047019
--- /dev/null
+++ b/registry/blocks/x-post/registry-item.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "x-post",
+  "type": "hyperframes:block",
+  "title": "X Post Card",
+  "description": "Animated X/Twitter post card overlay with engagement metrics",
+  "tags": ["social", "overlay", "twitter"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 5,
+  "files": [
+    {
+      "path": "x-post.html",
+      "target": "compositions/x-post.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
diff --git a/registry/blocks/x-post/x-post.html b/registry/blocks/x-post/x-post.html
new file mode 100644
index 000000000..237e8a97e
--- /dev/null
+++ b/registry/blocks/x-post/x-post.html
@@ -0,0 +1,442 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <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 {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "Inter", sans-serif;
+      }
+
+      .x-card {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 880px;
+        background: #15202b;
+        border-radius: 20px;
+        padding: 36px 36px 28px;
+        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
+        border: 1px solid #38444d;
+        overflow: hidden;
+      }
+
+      /* Bottom glow */
+      .x-card::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 80px;
+        background: linear-gradient(to top, rgba(29, 155, 240, 0.08), transparent);
+        pointer-events: none;
+      }
+
+      /* Header row */
+      .post-header {
+        display: flex;
+        align-items: flex-start;
+        gap: 14px;
+        margin-bottom: 18px;
+        position: relative;
+      }
+
+      .avatar {
+        width: 52px;
+        height: 52px;
+        flex-shrink: 0;
+        border-radius: 50%;
+        overflow: hidden;
+      }
+
+      .avatar svg {
+        width: 52px;
+        height: 52px;
+        display: block;
+      }
+
+      .user-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 1;
+      }
+
+      .name-row {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .display-name {
+        font-size: 26px;
+        font-weight: 700;
+        color: #e7e9ea;
+        line-height: 1.3;
+      }
+
+      .verified-badge svg {
+        width: 22px;
+        height: 22px;
+        display: block;
+      }
+
+      .handle {
+        font-size: 22px;
+        font-weight: 400;
+        color: #8b98a5;
+        line-height: 1.3;
+      }
+
+      /* X logo top-right */
+      .x-logo {
+        position: absolute;
+        top: 2px;
+        right: 0;
+        width: 32px;
+        height: 32px;
+      }
+
+      .x-logo svg {
+        width: 32px;
+        height: 32px;
+        display: block;
+      }
+
+      /* Tweet body */
+      .tweet-body {
+        font-size: 30px;
+        font-weight: 400;
+        color: #e7e9ea;
+        line-height: 1.45;
+        margin-bottom: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 4;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+
+      .hashtag {
+        color: #1d9bf0;
+      }
+
+      /* Timestamp */
+      .timestamp {
+        font-size: 22px;
+        color: #8b98a5;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #38444d;
+        margin-bottom: 16px;
+      }
+
+      /* Metrics bar — matches real X spacing */
+      .metrics-bar {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        position: relative;
+        z-index: 1;
+      }
+
+      .metrics-left {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        justify-content: space-between;
+        padding-right: 60px;
+      }
+
+      .metrics-right {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+      }
+
+      .metric {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .metric-icon {
+        width: 35px;
+        height: 35px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .metric-icon svg {
+        width: 35px;
+        height: 35px;
+        display: block;
+      }
+
+      .metric-count {
+        font-size: 20px;
+        font-weight: 400;
+        color: #8b98a5;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="x-post-overlay"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="5"
+    >
+      <div id="card" class="clip x-card" data-start="0" data-duration="5" data-track-index="0">
+        <!-- Header: prompt to replace display name, handle, and avatar -->
+        <div class="post-header">
+          <div class="avatar">
+            <svg viewBox="0 0 52 52" fill="none">
+              <circle cx="26" cy="26" r="26" fill="#536471" />
+              <circle cx="26" cy="21" r="10" fill="#8b98a5" />
+              <ellipse cx="26" cy="42" rx="16" ry="12" fill="#8b98a5" />
+            </svg>
+          </div>
+          <div class="user-info">
+            <div class="name-row">
+              <span class="display-name">Hyperframes</span>
+              <span class="verified-badge">
+                <svg viewBox="0 0 22 22" fill="none">
+                  <circle cx="11" cy="11" r="11" fill="#1d9bf0" />
+                  <path
+                    d="M9.5 14.25L6.25 11l1.06-1.06 2.19 2.19 4.69-4.69L15.25 8.5 9.5 14.25z"
+                    fill="#fff"
+                  />
+                </svg>
+              </span>
+            </div>
+            <span class="handle">@hyperframes</span>
+          </div>
+          <div class="x-logo">
+            <svg viewBox="0 0 24 24" fill="#e7e9ea">
+              <path
+                d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <!-- Tweet body: prompt to replace with your content -->
+        <div class="tweet-body">
+          Prompt to replace this text with your tweet. Change the display name, handle, timestamp,
+          and engagement counts to match your content. <span class="hashtag">#YourHashtag</span>
+        </div>
+
+        <!-- Timestamp: prompt to replace -->
+        <div class="timestamp">1:10 PM &middot; Apr 7, 2026</div>
+
+        <!-- Metrics bar -->
+        <div class="metrics-bar">
+          <div class="metrics-left">
+            <!-- Reply -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">34</span>
+            </div>
+
+            <!-- Repost -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">2.3K</span>
+            </div>
+
+            <!-- Like -->
+            <div id="like-btn" class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24">
+                  <!-- Outline heart (visible initially) -->
+                  <path
+                    id="heart-outline"
+                    d="M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
+                    fill="#8b98a5"
+                  />
+                  <!-- Filled heart (hidden initially, shown on like) -->
+                  <path
+                    id="heart-filled"
+                    d="M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z"
+                    fill="#f91880"
+                    opacity="0"
+                  />
+                </svg>
+              </div>
+              <span id="like-count" class="metric-count">10.9K</span>
+            </div>
+
+            <!-- Views -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z"
+                  />
+                </svg>
+              </div>
+              <span class="metric-count">150K</span>
+            </div>
+          </div>
+
+          <div class="metrics-right">
+            <!-- Bookmark -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z"
+                  />
+                </svg>
+              </div>
+            </div>
+
+            <!-- Share -->
+            <div class="metric">
+              <div class="metric-icon">
+                <svg viewBox="0 0 24 24" fill="#8b98a5">
+                  <path
+                    d="M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var likeBtn = document.getElementById("like-btn");
+      var heartOutline = document.getElementById("heart-outline");
+      var heartFilled = document.getElementById("heart-filled");
+      var likeCount = document.getElementById("like-count");
+
+      // Start off-screen below
+      gsap.set(card, { y: 400, opacity: 0 });
+
+      // Slide in from bottom
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.6,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Like press-in
+      tl.to(
+        likeBtn,
+        {
+          scale: 0.85,
+          duration: 0.12,
+          ease: "power2.out",
+        },
+        1.5,
+      );
+
+      // Like release with spring bounce
+      tl.to(
+        likeBtn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.62,
+      );
+
+      // Hide outline heart
+      tl.to(
+        heartOutline,
+        {
+          opacity: 0,
+          duration: 0.01,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Show filled heart
+      tl.to(
+        heartFilled,
+        {
+          opacity: 1,
+          duration: 0.12,
+          ease: "none",
+        },
+        1.62,
+      );
+
+      // Like count turns pink + increments
+      tl.to(
+        likeCount,
+        {
+          color: "#f91880",
+          duration: 0.12,
+          ease: "none",
+          onStart: function () {
+            likeCount.textContent = "11.0K";
+          },
+        },
+        1.62,
+      );
+
+      // Slide out to bottom
+      tl.to(
+        card,
+        {
+          y: 400,
+          opacity: 0,
+          duration: 0.3,
+          ease: "power3.in",
+        },
+        4.2,
+      );
+
+      window.__timelines["x-post-overlay"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/yt-lower-third/assets/avatar.jpg b/registry/blocks/yt-lower-third/assets/avatar.jpg
new file mode 100644
index 000000000..d5ca2e945
Binary files /dev/null and b/registry/blocks/yt-lower-third/assets/avatar.jpg differ
diff --git a/registry/blocks/yt-lower-third/registry-item.json b/registry/blocks/yt-lower-third/registry-item.json
new file mode 100644
index 000000000..c3688485a
--- /dev/null
+++ b/registry/blocks/yt-lower-third/registry-item.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "yt-lower-third",
+  "type": "hyperframes:block",
+  "title": "YouTube Lower Third",
+  "description": "Animated YouTube subscribe lower third with avatar and channel info",
+  "tags": ["social", "overlay", "youtube"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 4.5,
+  "files": [
+    {
+      "path": "yt-lower-third.html",
+      "target": "compositions/yt-lower-third.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/avatar.jpg",
+      "target": "assets/avatar.jpg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
diff --git a/registry/blocks/yt-lower-third/yt-lower-third.html b/registry/blocks/yt-lower-third/yt-lower-third.html
new file mode 100644
index 000000000..3580b469c
--- /dev/null
+++ b/registry/blocks/yt-lower-third/yt-lower-third.html
@@ -0,0 +1,242 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      body {
+        width: 1920px;
+        height: 1080px;
+        font-family: "DM Sans", sans-serif;
+      }
+
+      .lower-third {
+        position: absolute;
+        bottom: 80px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        align-items: center;
+        gap: 28px;
+        background: #ffffff;
+        border-radius: 60px;
+        padding: 20px 32px 20px 20px;
+        box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);
+      }
+
+      .avatar {
+        width: 96px;
+        height: 96px;
+        border-radius: 50%;
+        object-fit: cover;
+        flex-shrink: 0;
+      }
+
+      .channel-info {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        margin-right: 20px;
+      }
+
+      .channel-name {
+        font-size: 34px;
+        font-weight: 700;
+        color: #0f0f0f;
+        line-height: 1.3;
+        letter-spacing: -0.01em;
+      }
+
+      .subscriber-count {
+        font-size: 22px;
+        font-weight: 400;
+        color: #606060;
+        line-height: 1.3;
+      }
+
+      .subscribe-btn {
+        position: relative;
+        width: 220px;
+        height: 68px;
+        border-radius: 34px;
+        background: #0f0f0f;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+
+      .btn-text {
+        position: absolute;
+        font-family: "DM Sans", sans-serif;
+        font-size: 24px;
+        font-weight: 700;
+        color: #ffffff;
+        letter-spacing: 0.02em;
+        white-space: nowrap;
+      }
+
+      .btn-text-subscribe {
+        opacity: 1;
+      }
+
+      .btn-text-subscribed {
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .check-icon {
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+      }
+
+      .check-icon svg {
+        width: 24px;
+        height: 24px;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root"
+      data-composition-id="yt-lower-third"
+      data-width="1920"
+      data-height="1080"
+      data-start="0"
+      data-duration="4.5"
+    >
+      <div
+        id="card"
+        class="clip lower-third"
+        data-start="0"
+        data-duration="4.5"
+        data-track-index="0"
+      >
+        <img class="avatar" src="assets/avatar.jpg" alt="HeyGen" crossorigin="anonymous" />
+        <div class="channel-info">
+          <div class="channel-name">HeyGen</div>
+          <div class="subscriber-count">82.2K subscribers</div>
+        </div>
+        <div id="subscribe-btn" class="subscribe-btn">
+          <span id="btn-subscribe" class="btn-text btn-text-subscribe">Subscribe</span>
+          <span id="btn-subscribed" class="btn-text btn-text-subscribed">
+            <span class="check-icon"
+              ><svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="#fff"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="20 6 9 17 4 12"></polyline></svg
+            ></span>
+            Subscribed
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      var tl = gsap.timeline({ paused: true });
+
+      var card = document.getElementById("card");
+      var btn = document.getElementById("subscribe-btn");
+      var textSub = document.getElementById("btn-subscribe");
+      var textSubd = document.getElementById("btn-subscribed");
+
+      // Slide in from bottom
+      gsap.set(card, { y: 300, opacity: 0 });
+
+      tl.to(
+        card,
+        {
+          y: 0,
+          opacity: 1,
+          duration: 0.5,
+          ease: "power3.out",
+        },
+        0.1,
+      );
+
+      // Hold, then button press-in
+      tl.to(
+        btn,
+        {
+          scale: 0.92,
+          duration: 0.15,
+          ease: "power2.out",
+        },
+        1.0,
+      );
+
+      // Button release with spring bounce + text swap
+      tl.to(
+        btn,
+        {
+          scale: 1,
+          duration: 0.4,
+          ease: "elastic.out(1, 0.4)",
+        },
+        1.15,
+      );
+
+      // Fade out "Subscribe", fade in "Subscribed"
+      tl.to(
+        textSub,
+        {
+          opacity: 0,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.15,
+      );
+
+      tl.to(
+        textSubd,
+        {
+          opacity: 1,
+          duration: 0.08,
+          ease: "none",
+        },
+        1.18,
+      );
+
+      // Slide out to bottom (inverse of entrance)
+      tl.to(
+        card,
+        {
+          y: 300,
+          opacity: 0,
+          duration: 0.25,
+          ease: "power3.in",
+        },
+        3.8,
+      );
+
+      window.__timelines["yt-lower-third"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/registry.json b/registry/registry.json
index c5ce44978..deedfc85f 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -58,6 +58,50 @@
     {
       "name": "grid-pixelate-wipe",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "instagram-follow",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "tiktok-follow",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "yt-lower-third",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "x-post",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "reddit-post",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "spotify-card",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "macos-notification",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "ascii-dashboard",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "ascii-lightning",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "app-showcase",
+      "type": "hyperframes:block"
+    },
+    {
+      "name": "ui-3d-reveal",
+      "type": "hyperframes:block"
     }
   ]
 }