diff --git a/docs/catalog/components/ai-generation-canvas.mdx b/docs/catalog/components/ai-generation-canvas.mdx
new file mode 100644
index 0000000000..72763baeb5
--- /dev/null
+++ b/docs/catalog/components/ai-generation-canvas.mdx
@@ -0,0 +1,38 @@
+---
+title: "AI Generation Canvas"
+description: "A prompt composer expands into a generated dashboard preview."
+---
+
+# AI Generation Canvas
+
+A prompt composer expands into a generated dashboard preview.
+
+`showcase` `remocn-port` `ai`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ai-generation-canvas.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ai-generation-canvas.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add ai-generation-canvas
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `ai-generation-canvas.html` | `compositions/components/ai-generation-canvas.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/ai-generation-canvas.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/animated-bar-chart.mdx b/docs/catalog/components/animated-bar-chart.mdx
new file mode 100644
index 0000000000..66be838a12
--- /dev/null
+++ b/docs/catalog/components/animated-bar-chart.mdx
@@ -0,0 +1,38 @@
+---
+title: "Animated Bar Chart"
+description: "A compact data card with deterministic bar growth and value callouts."
+---
+
+# Animated Bar Chart
+
+A compact data card with deterministic bar growth and value callouts.
+
+`data` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add animated-bar-chart
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `animated-bar-chart.html` | `compositions/components/animated-bar-chart.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/animated-bar-chart.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/animated-line-chart.mdx b/docs/catalog/components/animated-line-chart.mdx
new file mode 100644
index 0000000000..8ab3f0fbff
--- /dev/null
+++ b/docs/catalog/components/animated-line-chart.mdx
@@ -0,0 +1,38 @@
+---
+title: "Animated Line Chart"
+description: "A line chart draws across the card with endpoint emphasis."
+---
+
+# Animated Line Chart
+
+A line chart draws across the card with endpoint emphasis.
+
+`data` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-line-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-line-chart.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add animated-line-chart
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `animated-line-chart.html` | `compositions/components/animated-line-chart.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/animated-line-chart.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/backdrop.mdx b/docs/catalog/components/backdrop.mdx
new file mode 100644
index 0000000000..bc848ab720
--- /dev/null
+++ b/docs/catalog/components/backdrop.mdx
@@ -0,0 +1,38 @@
+---
+title: "Backdrop"
+description: "A composable glass backdrop layer for dialog, drawer, and modal scenes."
+---
+
+# Backdrop
+
+A composable glass backdrop layer for dialog, drawer, and modal scenes.
+
+`ui-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/backdrop.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/backdrop.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add backdrop
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `backdrop.html` | `compositions/components/backdrop.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/backdrop.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/browser-flow.mdx b/docs/catalog/components/browser-flow.mdx
new file mode 100644
index 0000000000..77eebafd3e
--- /dev/null
+++ b/docs/catalog/components/browser-flow.mdx
@@ -0,0 +1,38 @@
+---
+title: "Browser Flow"
+description: "A browser frame walks through a three-step product flow."
+---
+
+# Browser Flow
+
+A browser frame walks through a three-step product flow.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/browser-flow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/browser-flow.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add browser-flow
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `browser-flow.html` | `compositions/components/browser-flow.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/browser-flow.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/chat-gpt.mdx b/docs/catalog/components/chat-gpt.mdx
new file mode 100644
index 0000000000..0bb3b5dc59
--- /dev/null
+++ b/docs/catalog/components/chat-gpt.mdx
@@ -0,0 +1,38 @@
+---
+title: "ChatGPT"
+description: "A chat composer types a prompt and morphs the voice button into send."
+---
+
+# ChatGPT
+
+A chat composer types a prompt and morphs the voice button into send.
+
+`showcase` `remocn-port` `chat`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-gpt.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-gpt.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add chat-gpt
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `chat-gpt.html` | `compositions/components/chat-gpt.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/chat-gpt.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/chat-to-preview-layout.mdx b/docs/catalog/components/chat-to-preview-layout.mdx
new file mode 100644
index 0000000000..aa7a4c9dba
--- /dev/null
+++ b/docs/catalog/components/chat-to-preview-layout.mdx
@@ -0,0 +1,38 @@
+---
+title: "Chat to Preview Layout"
+description: "Split-pane chat and preview layout for agent-generated UI."
+---
+
+# Chat to Preview Layout
+
+Split-pane chat and preview layout for agent-generated UI.
+
+`showcase` `remocn-port` `ai`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-to-preview-layout.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-to-preview-layout.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add chat-to-preview-layout
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `chat-to-preview-layout.html` | `compositions/components/chat-to-preview-layout.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/chat-to-preview-layout.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/chromatic-aberration-wipe.mdx b/docs/catalog/components/chromatic-aberration-wipe.mdx
new file mode 100644
index 0000000000..ea4e9eb355
--- /dev/null
+++ b/docs/catalog/components/chromatic-aberration-wipe.mdx
@@ -0,0 +1,38 @@
+---
+title: "Chromatic Aberration Wipe"
+description: "A fast slide wipe with RGB channel split on peak frames."
+---
+
+# Chromatic Aberration Wipe
+
+A fast slide wipe with RGB channel split on peak frames.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add chromatic-aberration-wipe
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `chromatic-aberration-wipe.html` | `compositions/components/chromatic-aberration-wipe.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/chromatic-aberration-wipe.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/claude-chat.mdx b/docs/catalog/components/claude-chat.mdx
new file mode 100644
index 0000000000..8bc0455178
--- /dev/null
+++ b/docs/catalog/components/claude-chat.mdx
@@ -0,0 +1,38 @@
+---
+title: "Claude Chat"
+description: "A calm assistant chat layout with staged response cards."
+---
+
+# Claude Chat
+
+A calm assistant chat layout with staged response cards.
+
+`showcase` `remocn-port` `chat`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/claude-chat.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/claude-chat.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add claude-chat
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `claude-chat.html` | `compositions/components/claude-chat.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/claude-chat.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/claude-code.mdx b/docs/catalog/components/claude-code.mdx
new file mode 100644
index 0000000000..d1afeb539a
--- /dev/null
+++ b/docs/catalog/components/claude-code.mdx
@@ -0,0 +1,38 @@
+---
+title: "Claude Code"
+description: "A code-agent workbench with file tree, terminal, and patch panel."
+---
+
+# Claude Code
+
+A code-agent workbench with file tree, terminal, and patch panel.
+
+`code-animation` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/claude-code.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/claude-code.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add claude-code
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `claude-code.html` | `compositions/components/claude-code.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/claude-code.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/code-accordion.mdx b/docs/catalog/components/code-accordion.mdx
new file mode 100644
index 0000000000..6af8fcf814
--- /dev/null
+++ b/docs/catalog/components/code-accordion.mdx
@@ -0,0 +1,38 @@
+---
+title: "Code Accordion"
+description: "Stacked code sections expand one at a time with line highlights."
+---
+
+# Code Accordion
+
+Stacked code sections expand one at a time with line highlights.
+
+`code-animation` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-accordion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-accordion.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-accordion
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-accordion.html` | `compositions/components/code-accordion.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/code-accordion.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/code-diff-wipe.mdx b/docs/catalog/components/code-diff-wipe.mdx
new file mode 100644
index 0000000000..9c30ef8c2d
--- /dev/null
+++ b/docs/catalog/components/code-diff-wipe.mdx
@@ -0,0 +1,38 @@
+---
+title: "Code Diff Wipe"
+description: "A scene transition that wipes through added and removed code lines."
+---
+
+# Code Diff Wipe
+
+A scene transition that wipes through added and removed code lines.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-diff-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-diff-wipe.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-diff-wipe
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-diff-wipe.html` | `compositions/components/code-diff-wipe.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/code-diff-wipe.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/command-menu-item.mdx b/docs/catalog/components/command-menu-item.mdx
new file mode 100644
index 0000000000..033baa23d1
--- /dev/null
+++ b/docs/catalog/components/command-menu-item.mdx
@@ -0,0 +1,38 @@
+---
+title: "Command Menu Item"
+description: "A focused command-row primitive with shortcut and selection states."
+---
+
+# Command Menu Item
+
+A focused command-row primitive with shortcut and selection states.
+
+`ui-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/command-menu-item.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/command-menu-item.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add command-menu-item
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `command-menu-item.html` | `compositions/components/command-menu-item.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/command-menu-item.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/confetti.mdx b/docs/catalog/components/confetti.mdx
new file mode 100644
index 0000000000..d60715a3b9
--- /dev/null
+++ b/docs/catalog/components/confetti.mdx
@@ -0,0 +1,38 @@
+---
+title: "Confetti"
+description: "A deterministic celebration burst with seeded particles and gravity."
+---
+
+# Confetti
+
+A deterministic celebration burst with seeded particles and gravity.
+
+`effect` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add confetti
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `confetti.html` | `compositions/components/confetti.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/confetti.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/dashboard-populate.mdx b/docs/catalog/components/dashboard-populate.mdx
new file mode 100644
index 0000000000..e8f5822f2c
--- /dev/null
+++ b/docs/catalog/components/dashboard-populate.mdx
@@ -0,0 +1,38 @@
+---
+title: "Dashboard Populate"
+description: "Skeleton dashboard cards resolve into populated charts and metrics."
+---
+
+# Dashboard Populate
+
+Skeleton dashboard cards resolve into populated charts and metrics.
+
+`data` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dashboard-populate.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dashboard-populate.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add dashboard-populate
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `dashboard-populate.html` | `compositions/components/dashboard-populate.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/dashboard-populate.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/data-flow-pipes.mdx b/docs/catalog/components/data-flow-pipes.mdx
new file mode 100644
index 0000000000..d9ed3ca368
--- /dev/null
+++ b/docs/catalog/components/data-flow-pipes.mdx
@@ -0,0 +1,38 @@
+---
+title: "Data Flow Pipes"
+description: "Animated pipe routes move packets between data nodes."
+---
+
+# Data Flow Pipes
+
+Animated pipe routes move packets between data nodes.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/data-flow-pipes.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/data-flow-pipes.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add data-flow-pipes
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `data-flow-pipes.html` | `compositions/components/data-flow-pipes.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/data-flow-pipes.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/device-mockup-zoom.mdx b/docs/catalog/components/device-mockup-zoom.mdx
new file mode 100644
index 0000000000..9462d20c50
--- /dev/null
+++ b/docs/catalog/components/device-mockup-zoom.mdx
@@ -0,0 +1,38 @@
+---
+title: "Device Mockup Zoom"
+description: "A device frame scales forward while UI panels parallax behind it."
+---
+
+# Device Mockup Zoom
+
+A device frame scales forward while UI panels parallax behind it.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/device-mockup-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/device-mockup-zoom.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add device-mockup-zoom
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `device-mockup-zoom.html` | `compositions/components/device-mockup-zoom.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/device-mockup-zoom.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/directional-wipe.mdx b/docs/catalog/components/directional-wipe.mdx
new file mode 100644
index 0000000000..5102715fe6
--- /dev/null
+++ b/docs/catalog/components/directional-wipe.mdx
@@ -0,0 +1,38 @@
+---
+title: "Directional Wipe"
+description: "A directional scene push that slides one panel over another."
+---
+
+# Directional Wipe
+
+A directional scene push that slides one panel over another.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add directional-wipe
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `directional-wipe.html` | `compositions/components/directional-wipe.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/directional-wipe.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/drag-and-drop-flow.mdx b/docs/catalog/components/drag-and-drop-flow.mdx
new file mode 100644
index 0000000000..51c2d3889f
--- /dev/null
+++ b/docs/catalog/components/drag-and-drop-flow.mdx
@@ -0,0 +1,38 @@
+---
+title: "Drag and Drop Flow"
+description: "Cards drag from backlog to timeline with snap feedback."
+---
+
+# Drag and Drop Flow
+
+Cards drag from backlog to timeline with snap feedback.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/drag-and-drop-flow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/drag-and-drop-flow.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add drag-and-drop-flow
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `drag-and-drop-flow.html` | `compositions/components/drag-and-drop-flow.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/drag-and-drop-flow.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/dropdown-menu-item.mdx b/docs/catalog/components/dropdown-menu-item.mdx
new file mode 100644
index 0000000000..2af86f5ff6
--- /dev/null
+++ b/docs/catalog/components/dropdown-menu-item.mdx
@@ -0,0 +1,38 @@
+---
+title: "Dropdown Menu Item"
+description: "A menu-row primitive with icon, label, hint, and active state."
+---
+
+# Dropdown Menu Item
+
+A menu-row primitive with icon, label, hint, and active state.
+
+`ui-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dropdown-menu-item.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dropdown-menu-item.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add dropdown-menu-item
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `dropdown-menu-item.html` | `compositions/components/dropdown-menu-item.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/dropdown-menu-item.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/ecosystem-constellation.mdx b/docs/catalog/components/ecosystem-constellation.mdx
new file mode 100644
index 0000000000..92da6d8c46
--- /dev/null
+++ b/docs/catalog/components/ecosystem-constellation.mdx
@@ -0,0 +1,38 @@
+---
+title: "Ecosystem Constellation"
+description: "Orbiting product nodes connect into a constellation graph."
+---
+
+# Ecosystem Constellation
+
+Orbiting product nodes connect into a constellation graph.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ecosystem-constellation.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ecosystem-constellation.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add ecosystem-constellation
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `ecosystem-constellation.html` | `compositions/components/ecosystem-constellation.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/ecosystem-constellation.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/frosted-glass-wipe.mdx b/docs/catalog/components/frosted-glass-wipe.mdx
new file mode 100644
index 0000000000..54d970eae9
--- /dev/null
+++ b/docs/catalog/components/frosted-glass-wipe.mdx
@@ -0,0 +1,38 @@
+---
+title: "Frosted Glass Wipe"
+description: "A scene transition through a moving frosted glass pane."
+---
+
+# Frosted Glass Wipe
+
+A scene transition through a moving frosted glass pane.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/frosted-glass-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/frosted-glass-wipe.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add frosted-glass-wipe
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `frosted-glass-wipe.html` | `compositions/components/frosted-glass-wipe.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/frosted-glass-wipe.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/github-stars.mdx b/docs/catalog/components/github-stars.mdx
new file mode 100644
index 0000000000..d776856106
--- /dev/null
+++ b/docs/catalog/components/github-stars.mdx
@@ -0,0 +1,38 @@
+---
+title: "GitHub Stars"
+description: "A repo star-count card with avatars, velocity line, and odometer."
+---
+
+# GitHub Stars
+
+A repo star-count card with avatars, velocity line, and odometer.
+
+`social-overlay` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/github-stars.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/github-stars.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add github-stars
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `github-stars.html` | `compositions/components/github-stars.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/github-stars.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/glass-code-block.mdx b/docs/catalog/components/glass-code-block.mdx
new file mode 100644
index 0000000000..132ff5bf0b
--- /dev/null
+++ b/docs/catalog/components/glass-code-block.mdx
@@ -0,0 +1,38 @@
+---
+title: "Glass Code Block"
+description: "A translucent code block with scanned line highlights."
+---
+
+# Glass Code Block
+
+A translucent code block with scanned line highlights.
+
+`code-animation` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/glass-code-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/glass-code-block.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add glass-code-block
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `glass-code-block.html` | `compositions/components/glass-code-block.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/glass-code-block.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/hero-device-assemble.mdx b/docs/catalog/components/hero-device-assemble.mdx
new file mode 100644
index 0000000000..c9ea6f9e4a
--- /dev/null
+++ b/docs/catalog/components/hero-device-assemble.mdx
@@ -0,0 +1,38 @@
+---
+title: "Hero Device Assemble"
+description: "A landing-page device hero assembles from layers."
+---
+
+# Hero Device Assemble
+
+A landing-page device hero assembles from layers.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hero-device-assemble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hero-device-assemble.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add hero-device-assemble
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `hero-device-assemble.html` | `compositions/components/hero-device-assemble.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/hero-device-assemble.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/image-expand-to-fullscreen.mdx b/docs/catalog/components/image-expand-to-fullscreen.mdx
new file mode 100644
index 0000000000..e36f35334f
--- /dev/null
+++ b/docs/catalog/components/image-expand-to-fullscreen.mdx
@@ -0,0 +1,38 @@
+---
+title: "Image Expand to Fullscreen"
+description: "An image tile expands into a full-frame scene transition."
+---
+
+# Image Expand to Fullscreen
+
+An image tile expands into a full-frame scene transition.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/image-expand-to-fullscreen.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/image-expand-to-fullscreen.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add image-expand-to-fullscreen
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `image-expand-to-fullscreen.html` | `compositions/components/image-expand-to-fullscreen.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/image-expand-to-fullscreen.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/infinite-bento-pan.mdx b/docs/catalog/components/infinite-bento-pan.mdx
new file mode 100644
index 0000000000..ec10ee8c2e
--- /dev/null
+++ b/docs/catalog/components/infinite-bento-pan.mdx
@@ -0,0 +1,38 @@
+---
+title: "Infinite Bento Pan"
+description: "A bento board pans forever with feature cards at different depths."
+---
+
+# Infinite Bento Pan
+
+A bento board pans forever with feature cards at different depths.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/infinite-bento-pan.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/infinite-bento-pan.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add infinite-bento-pan
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `infinite-bento-pan.html` | `compositions/components/infinite-bento-pan.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/infinite-bento-pan.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/infinite-marquee.mdx b/docs/catalog/components/infinite-marquee.mdx
new file mode 100644
index 0000000000..b094d0fbb1
--- /dev/null
+++ b/docs/catalog/components/infinite-marquee.mdx
@@ -0,0 +1,38 @@
+---
+title: "Infinite Marquee"
+description: "A looping marquee primitive for logos, tags, and feature pills."
+---
+
+# Infinite Marquee
+
+A looping marquee primitive for logos, tags, and feature pills.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/infinite-marquee.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/infinite-marquee.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add infinite-marquee
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `infinite-marquee.html` | `compositions/components/infinite-marquee.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/infinite-marquee.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/landing-code-showcase.mdx b/docs/catalog/components/landing-code-showcase.mdx
new file mode 100644
index 0000000000..6cc36de165
--- /dev/null
+++ b/docs/catalog/components/landing-code-showcase.mdx
@@ -0,0 +1,38 @@
+---
+title: "Landing Code Showcase"
+description: "A product hero where code output becomes a live preview card."
+---
+
+# Landing Code Showcase
+
+A product hero where code output becomes a live preview card.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/landing-code-showcase.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/landing-code-showcase.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add landing-code-showcase
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `landing-code-showcase.html` | `compositions/components/landing-code-showcase.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/landing-code-showcase.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/live-code-compilation.mdx b/docs/catalog/components/live-code-compilation.mdx
new file mode 100644
index 0000000000..fd7437d75e
--- /dev/null
+++ b/docs/catalog/components/live-code-compilation.mdx
@@ -0,0 +1,38 @@
+---
+title: "Live Code Compilation"
+description: "A code editor compiles into a preview panel with status ticks."
+---
+
+# Live Code Compilation
+
+A code editor compiles into a preview panel with status ticks.
+
+`code-animation` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/live-code-compilation.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/live-code-compilation.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add live-code-compilation
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `live-code-compilation.html` | `compositions/components/live-code-compilation.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/live-code-compilation.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/mesh-gradient-bg.mdx b/docs/catalog/components/mesh-gradient-bg.mdx
new file mode 100644
index 0000000000..f947255e6b
--- /dev/null
+++ b/docs/catalog/components/mesh-gradient-bg.mdx
@@ -0,0 +1,38 @@
+---
+title: "Mesh Gradient Background"
+description: "A render-safe mesh gradient using animated radial layers."
+---
+
+# Mesh Gradient Background
+
+A render-safe mesh gradient using animated radial layers.
+
+`effect` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add mesh-gradient-bg
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `mesh-gradient-bg.html` | `compositions/components/mesh-gradient-bg.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/mesh-gradient-bg.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/micro-scale-fade.mdx b/docs/catalog/components/micro-scale-fade.mdx
new file mode 100644
index 0000000000..f29cd36f77
--- /dev/null
+++ b/docs/catalog/components/micro-scale-fade.mdx
@@ -0,0 +1,38 @@
+---
+title: "Micro Scale Fade"
+description: "A tiny scale-and-opacity transition for UI state changes."
+---
+
+# Micro Scale Fade
+
+A tiny scale-and-opacity transition for UI state changes.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-scale-fade.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-scale-fade.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add micro-scale-fade
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `micro-scale-fade.html` | `compositions/components/micro-scale-fade.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/micro-scale-fade.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/opencode.mdx b/docs/catalog/components/opencode.mdx
new file mode 100644
index 0000000000..a87fa7b627
--- /dev/null
+++ b/docs/catalog/components/opencode.mdx
@@ -0,0 +1,38 @@
+---
+title: "OpenCode"
+description: "A terminal-first coding agent surface with streaming task output."
+---
+
+# OpenCode
+
+A terminal-first coding agent surface with streaming task output.
+
+`code-animation` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/opencode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/opencode.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add opencode
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `opencode.html` | `compositions/components/opencode.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/opencode.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/pricing-tier-focus.mdx b/docs/catalog/components/pricing-tier-focus.mdx
new file mode 100644
index 0000000000..163846a247
--- /dev/null
+++ b/docs/catalog/components/pricing-tier-focus.mdx
@@ -0,0 +1,38 @@
+---
+title: "Pricing Tier Focus"
+description: "Pricing cards shift focus from free to pro with spotlight emphasis."
+---
+
+# Pricing Tier Focus
+
+Pricing cards shift focus from free to pro with spotlight emphasis.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/pricing-tier-focus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/pricing-tier-focus.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add pricing-tier-focus
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `pricing-tier-focus.html` | `compositions/components/pricing-tier-focus.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/pricing-tier-focus.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/progress-steps.mdx b/docs/catalog/components/progress-steps.mdx
new file mode 100644
index 0000000000..62547ee060
--- /dev/null
+++ b/docs/catalog/components/progress-steps.mdx
@@ -0,0 +1,38 @@
+---
+title: "Progress Steps"
+description: "A multi-step progress indicator with active, pending, and done states."
+---
+
+# Progress Steps
+
+A multi-step progress indicator with active, pending, and done states.
+
+`ui-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/progress-steps.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/progress-steps.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add progress-steps
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `progress-steps.html` | `compositions/components/progress-steps.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/progress-steps.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/registry.mdx b/docs/catalog/components/registry.mdx
new file mode 100644
index 0000000000..090707a9dd
--- /dev/null
+++ b/docs/catalog/components/registry.mdx
@@ -0,0 +1,38 @@
+---
+title: "Registry"
+description: "A catalog registry card for showing installable component metadata."
+---
+
+# Registry
+
+A catalog registry card for showing installable component metadata.
+
+`ui-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/registry.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/registry.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add registry
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `registry.html` | `compositions/components/registry.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/registry.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/remocn-ui.mdx b/docs/catalog/components/remocn-ui.mdx
new file mode 100644
index 0000000000..a3b90243a0
--- /dev/null
+++ b/docs/catalog/components/remocn-ui.mdx
@@ -0,0 +1,38 @@
+---
+title: "Remocn UI"
+description: "A compact kit card that explains the remocn primitives now available in HyperFrames."
+---
+
+# Remocn UI
+
+A compact kit card that explains the remocn primitives now available in HyperFrames.
+
+`ui-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/remocn-ui.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/remocn-ui.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add remocn-ui
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `remocn-ui.html` | `compositions/components/remocn-ui.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/remocn-ui.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/select-item.mdx b/docs/catalog/components/select-item.mdx
new file mode 100644
index 0000000000..73715e8e16
--- /dev/null
+++ b/docs/catalog/components/select-item.mdx
@@ -0,0 +1,38 @@
+---
+title: "Select Item"
+description: "A select-row primitive with check mark, hint, and active highlight."
+---
+
+# Select Item
+
+A select-row primitive with check mark, hint, and active highlight.
+
+`ui-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/select-item.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/select-item.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add select-item
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `select-item.html` | `compositions/components/select-item.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/select-item.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/skeleton-block.mdx b/docs/catalog/components/skeleton-block.mdx
new file mode 100644
index 0000000000..8910b7c00a
--- /dev/null
+++ b/docs/catalog/components/skeleton-block.mdx
@@ -0,0 +1,38 @@
+---
+title: "Skeleton Block"
+description: "A skeleton loading block that resolves into real content."
+---
+
+# Skeleton Block
+
+A skeleton loading block that resolves into real content.
+
+`ui-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-block.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add skeleton-block
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `skeleton-block.html` | `compositions/components/skeleton-block.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/skeleton-block.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/spatial-push.mdx b/docs/catalog/components/spatial-push.mdx
new file mode 100644
index 0000000000..ce975f3213
--- /dev/null
+++ b/docs/catalog/components/spatial-push.mdx
@@ -0,0 +1,38 @@
+---
+title: "Spatial Push"
+description: "A physical depth transition that presses the old scene backward."
+---
+
+# Spatial Push
+
+A physical depth transition that presses the old scene backward.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spatial-push.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spatial-push.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add spatial-push
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `spatial-push.html` | `compositions/components/spatial-push.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/spatial-push.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/spotlight-card.mdx b/docs/catalog/components/spotlight-card.mdx
new file mode 100644
index 0000000000..889f4ef983
--- /dev/null
+++ b/docs/catalog/components/spotlight-card.mdx
@@ -0,0 +1,38 @@
+---
+title: "Spotlight Card"
+description: "A card with a scripted cursor spotlight and lit border."
+---
+
+# Spotlight Card
+
+A card with a scripted cursor spotlight and lit border.
+
+`effect` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add spotlight-card
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `spotlight-card.html` | `compositions/components/spotlight-card.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/spotlight-card.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/terminal-simulator.mdx b/docs/catalog/components/terminal-simulator.mdx
new file mode 100644
index 0000000000..e17bebe398
--- /dev/null
+++ b/docs/catalog/components/terminal-simulator.mdx
@@ -0,0 +1,38 @@
+---
+title: "Terminal Simulator"
+description: "A terminal window types commands and streams log output."
+---
+
+# Terminal Simulator
+
+A terminal window types commands and streams log output.
+
+`code-animation` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add terminal-simulator
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `terminal-simulator.html` | `compositions/components/terminal-simulator.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/terminal-simulator.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/terminal-to-browser-deploy.mdx b/docs/catalog/components/terminal-to-browser-deploy.mdx
new file mode 100644
index 0000000000..fcd875c7a1
--- /dev/null
+++ b/docs/catalog/components/terminal-to-browser-deploy.mdx
@@ -0,0 +1,38 @@
+---
+title: "Terminal to Browser Deploy"
+description: "Terminal deploy logs hand off into a live browser preview."
+---
+
+# Terminal to Browser Deploy
+
+Terminal deploy logs hand off into a live browser preview.
+
+`showcase` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-to-browser-deploy.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-to-browser-deploy.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add terminal-to-browser-deploy
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `terminal-to-browser-deploy.html` | `compositions/components/terminal-to-browser-deploy.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/terminal-to-browser-deploy.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/tool-menu-slide-in.mdx b/docs/catalog/components/tool-menu-slide-in.mdx
new file mode 100644
index 0000000000..f48141644e
--- /dev/null
+++ b/docs/catalog/components/tool-menu-slide-in.mdx
@@ -0,0 +1,38 @@
+---
+title: "Tool Menu Slide In"
+description: "A tool menu enters with short-axis slide and icon stagger."
+---
+
+# Tool Menu Slide In
+
+A tool menu enters with short-axis slide and icon stagger.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tool-menu-slide-in.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tool-menu-slide-in.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add tool-menu-slide-in
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `tool-menu-slide-in.html` | `compositions/components/tool-menu-slide-in.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/tool-menu-slide-in.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/v0.mdx b/docs/catalog/components/v0.mdx
new file mode 100644
index 0000000000..7124fc7aa4
--- /dev/null
+++ b/docs/catalog/components/v0.mdx
@@ -0,0 +1,38 @@
+---
+title: "v0"
+description: "A prompt-to-interface agent surface with generated component preview."
+---
+
+# v0
+
+A prompt-to-interface agent surface with generated component preview.
+
+`showcase` `remocn-port` `ai`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/v0.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/v0.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add v0
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `v0.html` | `compositions/components/v0.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/v0.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/x-follow-card.mdx b/docs/catalog/components/x-follow-card.mdx
new file mode 100644
index 0000000000..0630b8b761
--- /dev/null
+++ b/docs/catalog/components/x-follow-card.mdx
@@ -0,0 +1,38 @@
+---
+title: "X Follow Card"
+description: "A social follow card with avatar, handle, and follower motion."
+---
+
+# X Follow Card
+
+A social follow card with avatar, handle, and follower motion.
+
+`social-overlay` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add x-follow-card
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `x-follow-card.html` | `compositions/components/x-follow-card.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/x-follow-card.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/x-followers-overview.mdx b/docs/catalog/components/x-followers-overview.mdx
new file mode 100644
index 0000000000..71dd41cb07
--- /dev/null
+++ b/docs/catalog/components/x-followers-overview.mdx
@@ -0,0 +1,38 @@
+---
+title: "X Followers Overview"
+description: "A social analytics card with count-up and audience pills."
+---
+
+# X Followers Overview
+
+A social analytics card with count-up and audience pills.
+
+`social-overlay` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-followers-overview.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-followers-overview.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add x-followers-overview
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `x-followers-overview.html` | `compositions/components/x-followers-overview.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/x-followers-overview.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/catalog/components/zoom-through-transition.mdx b/docs/catalog/components/zoom-through-transition.mdx
new file mode 100644
index 0000000000..bfc18f7a48
--- /dev/null
+++ b/docs/catalog/components/zoom-through-transition.mdx
@@ -0,0 +1,38 @@
+---
+title: "Zoom Through Transition"
+description: "A transition that zooms through a focal card into the next scene."
+---
+
+# Zoom Through Transition
+
+A transition that zooms through a focal card into the next scene.
+
+`transition-primitive` `remocn-port`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add zoom-through-transition
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `zoom-through-transition.html` | `compositions/components/zoom-through-transition.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/zoom-through-transition.html` and paste its contents into your composition. See the comment header in the file for timeline integration guidance.
diff --git a/docs/docs.json b/docs/docs.json
index 59aabb4893..e79db02450 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -118,14 +118,20 @@
             "group": "Code Animations",
             "pages": [
               "catalog/blocks/code-3d-extrude",
-              "catalog/blocks/code-shader-dissolve",
-              "catalog/blocks/code-particle-assemble",
-              "catalog/blocks/code-morph",
-              "catalog/blocks/code-snippet-flight",
-              "catalog/blocks/code-typing",
               "catalog/blocks/code-diff",
               "catalog/blocks/code-highlight",
-              "catalog/blocks/code-scroll"
+              "catalog/blocks/code-morph",
+              "catalog/blocks/code-particle-assemble",
+              "catalog/blocks/code-scroll",
+              "catalog/blocks/code-shader-dissolve",
+              "catalog/blocks/code-snippet-flight",
+              "catalog/blocks/code-typing",
+              "catalog/components/claude-code",
+              "catalog/components/code-accordion",
+              "catalog/components/glass-code-block",
+              "catalog/components/live-code-compilation",
+              "catalog/components/opencode",
+              "catalog/components/terminal-simulator"
             ]
           },
           {
@@ -174,7 +180,10 @@
               "catalog/blocks/spotify-card",
               "catalog/blocks/tiktok-follow",
               "catalog/blocks/x-post",
-              "catalog/blocks/yt-lower-third"
+              "catalog/blocks/yt-lower-third",
+              "catalog/components/github-stars",
+              "catalog/components/x-follow-card",
+              "catalog/components/x-followers-overview"
             ]
           },
           {
@@ -223,7 +232,23 @@
               "catalog/blocks/north-korea-locked-down",
               "catalog/blocks/nyc-paris-flight",
               "catalog/blocks/ui-3d-reveal",
-              "catalog/blocks/vpn-youtube-spot"
+              "catalog/blocks/vpn-youtube-spot",
+              "catalog/components/ai-generation-canvas",
+              "catalog/components/browser-flow",
+              "catalog/components/chat-gpt",
+              "catalog/components/chat-to-preview-layout",
+              "catalog/components/claude-chat",
+              "catalog/components/data-flow-pipes",
+              "catalog/components/device-mockup-zoom",
+              "catalog/components/drag-and-drop-flow",
+              "catalog/components/ecosystem-constellation",
+              "catalog/components/hero-device-assemble",
+              "catalog/components/infinite-bento-pan",
+              "catalog/components/infinite-marquee",
+              "catalog/components/landing-code-showcase",
+              "catalog/components/pricing-tier-focus",
+              "catalog/components/terminal-to-browser-deploy",
+              "catalog/components/v0"
             ]
           },
           {
@@ -235,7 +260,10 @@
               "catalog/blocks/us-map-bubble",
               "catalog/blocks/us-map-flow",
               "catalog/blocks/us-map-hex",
-              "catalog/blocks/world-map"
+              "catalog/blocks/world-map",
+              "catalog/components/animated-bar-chart",
+              "catalog/components/animated-line-chart",
+              "catalog/components/dashboard-populate"
             ]
           },
           {
@@ -246,6 +274,7 @@
               "catalog/components/alert-dialog",
               "catalog/components/aspect-ratio",
               "catalog/components/avatar",
+              "catalog/components/backdrop",
               "catalog/components/badge",
               "catalog/components/blur-in",
               "catalog/components/breadcrumb",
@@ -260,11 +289,13 @@
               "catalog/components/collapsible",
               "catalog/components/combobox",
               "catalog/components/command-menu",
+              "catalog/components/command-menu-item",
               "catalog/components/context-menu",
               "catalog/components/cursor",
               "catalog/components/dialog",
               "catalog/components/drawer",
               "catalog/components/dropdown-menu",
+              "catalog/components/dropdown-menu-item",
               "catalog/components/empty",
               "catalog/components/field",
               "catalog/components/hover-card",
@@ -280,14 +311,19 @@
               "catalog/components/pagination",
               "catalog/components/popover",
               "catalog/components/progress",
+              "catalog/components/progress-steps",
               "catalog/components/radio",
+              "catalog/components/registry",
+              "catalog/components/remocn-ui",
               "catalog/components/resizable",
               "catalog/components/scroll-area",
               "catalog/components/select",
+              "catalog/components/select-item",
               "catalog/components/separator",
               "catalog/components/sheet",
               "catalog/components/sidebar",
               "catalog/components/skeleton",
+              "catalog/components/skeleton-block",
               "catalog/components/slider",
               "catalog/components/spinner",
               "catalog/components/stepper",
@@ -317,19 +353,28 @@
               "catalog/components/avatar-group-hover",
               "catalog/components/badge-pop",
               "catalog/components/card-resize",
+              "catalog/components/chromatic-aberration-wipe",
+              "catalog/components/code-diff-wipe",
+              "catalog/components/directional-wipe",
+              "catalog/components/frosted-glass-wipe",
               "catalog/components/icon-swap",
+              "catalog/components/image-expand-to-fullscreen",
               "catalog/components/input-feedback",
               "catalog/components/menu-morph",
+              "catalog/components/micro-scale-fade",
               "catalog/components/micro-transitions",
               "catalog/components/number-pop-in",
               "catalog/components/page-slide",
               "catalog/components/panel-reveal",
               "catalog/components/skeleton-reveal",
+              "catalog/components/spatial-push",
               "catalog/components/success-check",
               "catalog/components/tabs-slide-indicator",
               "catalog/components/text-stagger",
               "catalog/components/text-state-swap",
-              "catalog/components/tilt-card"
+              "catalog/components/tilt-card",
+              "catalog/components/tool-menu-slide-in",
+              "catalog/components/zoom-through-transition"
             ]
           },
           {
@@ -372,11 +417,14 @@
           {
             "group": "Effects",
             "pages": [
+              "catalog/components/confetti",
               "catalog/components/grain-overlay",
               "catalog/components/grid-pixelate-wipe",
+              "catalog/components/mesh-gradient-bg",
               "catalog/components/parallax-unzoom",
               "catalog/components/parallax-zoom",
               "catalog/components/shimmer-sweep",
+              "catalog/components/spotlight-card",
               "catalog/components/vignette"
             ]
           },
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 1e6980b174..1b2d5fa5e2 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -2696,5 +2696,586 @@
         ],
         "href": "/catalog/components/typewriter",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/typewriter.png"
+    },
+    {
+        "name": "ai-generation-canvas",
+        "type": "component",
+        "title": "AI Generation Canvas",
+        "description": "A prompt composer expands into a generated dashboard preview.",
+        "tags": [
+            "showcase",
+            "remocn-port",
+            "ai"
+        ],
+        "href": "/catalog/components/ai-generation-canvas",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ai-generation-canvas.png"
+    },
+    {
+        "name": "animated-bar-chart",
+        "type": "component",
+        "title": "Animated Bar Chart",
+        "description": "A compact data card with deterministic bar growth and value callouts.",
+        "tags": [
+            "data",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/animated-bar-chart",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png"
+    },
+    {
+        "name": "animated-line-chart",
+        "type": "component",
+        "title": "Animated Line Chart",
+        "description": "A line chart draws across the card with endpoint emphasis.",
+        "tags": [
+            "data",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/animated-line-chart",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-line-chart.png"
+    },
+    {
+        "name": "backdrop",
+        "type": "component",
+        "title": "Backdrop",
+        "description": "A composable glass backdrop layer for dialog, drawer, and modal scenes.",
+        "tags": [
+            "ui-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/backdrop",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/backdrop.png"
+    },
+    {
+        "name": "browser-flow",
+        "type": "component",
+        "title": "Browser Flow",
+        "description": "A browser frame walks through a three-step product flow.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/browser-flow",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/browser-flow.png"
+    },
+    {
+        "name": "chat-gpt",
+        "type": "component",
+        "title": "ChatGPT",
+        "description": "A chat composer types a prompt and morphs the voice button into send.",
+        "tags": [
+            "showcase",
+            "remocn-port",
+            "chat"
+        ],
+        "href": "/catalog/components/chat-gpt",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-gpt.png"
+    },
+    {
+        "name": "chat-to-preview-layout",
+        "type": "component",
+        "title": "Chat to Preview Layout",
+        "description": "Split-pane chat and preview layout for agent-generated UI.",
+        "tags": [
+            "showcase",
+            "remocn-port",
+            "ai"
+        ],
+        "href": "/catalog/components/chat-to-preview-layout",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-to-preview-layout.png"
+    },
+    {
+        "name": "chromatic-aberration-wipe",
+        "type": "component",
+        "title": "Chromatic Aberration Wipe",
+        "description": "A fast slide wipe with RGB channel split on peak frames.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/chromatic-aberration-wipe",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png"
+    },
+    {
+        "name": "claude-chat",
+        "type": "component",
+        "title": "Claude Chat",
+        "description": "A calm assistant chat layout with staged response cards.",
+        "tags": [
+            "showcase",
+            "remocn-port",
+            "chat"
+        ],
+        "href": "/catalog/components/claude-chat",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/claude-chat.png"
+    },
+    {
+        "name": "claude-code",
+        "type": "component",
+        "title": "Claude Code",
+        "description": "A code-agent workbench with file tree, terminal, and patch panel.",
+        "tags": [
+            "code-animation",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/claude-code",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/claude-code.png"
+    },
+    {
+        "name": "code-accordion",
+        "type": "component",
+        "title": "Code Accordion",
+        "description": "Stacked code sections expand one at a time with line highlights.",
+        "tags": [
+            "code-animation",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/code-accordion",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-accordion.png"
+    },
+    {
+        "name": "code-diff-wipe",
+        "type": "component",
+        "title": "Code Diff Wipe",
+        "description": "A scene transition that wipes through added and removed code lines.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/code-diff-wipe",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-diff-wipe.png"
+    },
+    {
+        "name": "command-menu-item",
+        "type": "component",
+        "title": "Command Menu Item",
+        "description": "A focused command-row primitive with shortcut and selection states.",
+        "tags": [
+            "ui-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/command-menu-item",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/command-menu-item.png"
+    },
+    {
+        "name": "confetti",
+        "type": "component",
+        "title": "Confetti",
+        "description": "A deterministic celebration burst with seeded particles and gravity.",
+        "tags": [
+            "effect",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/confetti",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png"
+    },
+    {
+        "name": "dashboard-populate",
+        "type": "component",
+        "title": "Dashboard Populate",
+        "description": "Skeleton dashboard cards resolve into populated charts and metrics.",
+        "tags": [
+            "data",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/dashboard-populate",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dashboard-populate.png"
+    },
+    {
+        "name": "data-flow-pipes",
+        "type": "component",
+        "title": "Data Flow Pipes",
+        "description": "Animated pipe routes move packets between data nodes.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/data-flow-pipes",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/data-flow-pipes.png"
+    },
+    {
+        "name": "device-mockup-zoom",
+        "type": "component",
+        "title": "Device Mockup Zoom",
+        "description": "A device frame scales forward while UI panels parallax behind it.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/device-mockup-zoom",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/device-mockup-zoom.png"
+    },
+    {
+        "name": "directional-wipe",
+        "type": "component",
+        "title": "Directional Wipe",
+        "description": "A directional scene push that slides one panel over another.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/directional-wipe",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png"
+    },
+    {
+        "name": "drag-and-drop-flow",
+        "type": "component",
+        "title": "Drag and Drop Flow",
+        "description": "Cards drag from backlog to timeline with snap feedback.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/drag-and-drop-flow",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/drag-and-drop-flow.png"
+    },
+    {
+        "name": "dropdown-menu-item",
+        "type": "component",
+        "title": "Dropdown Menu Item",
+        "description": "A menu-row primitive with icon, label, hint, and active state.",
+        "tags": [
+            "ui-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/dropdown-menu-item",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dropdown-menu-item.png"
+    },
+    {
+        "name": "ecosystem-constellation",
+        "type": "component",
+        "title": "Ecosystem Constellation",
+        "description": "Orbiting product nodes connect into a constellation graph.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/ecosystem-constellation",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ecosystem-constellation.png"
+    },
+    {
+        "name": "frosted-glass-wipe",
+        "type": "component",
+        "title": "Frosted Glass Wipe",
+        "description": "A scene transition through a moving frosted glass pane.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/frosted-glass-wipe",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/frosted-glass-wipe.png"
+    },
+    {
+        "name": "github-stars",
+        "type": "component",
+        "title": "GitHub Stars",
+        "description": "A repo star-count card with avatars, velocity line, and odometer.",
+        "tags": [
+            "social-overlay",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/github-stars",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/github-stars.png"
+    },
+    {
+        "name": "glass-code-block",
+        "type": "component",
+        "title": "Glass Code Block",
+        "description": "A translucent code block with scanned line highlights.",
+        "tags": [
+            "code-animation",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/glass-code-block",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/glass-code-block.png"
+    },
+    {
+        "name": "hero-device-assemble",
+        "type": "component",
+        "title": "Hero Device Assemble",
+        "description": "A landing-page device hero assembles from layers.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/hero-device-assemble",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hero-device-assemble.png"
+    },
+    {
+        "name": "image-expand-to-fullscreen",
+        "type": "component",
+        "title": "Image Expand to Fullscreen",
+        "description": "An image tile expands into a full-frame scene transition.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/image-expand-to-fullscreen",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/image-expand-to-fullscreen.png"
+    },
+    {
+        "name": "infinite-bento-pan",
+        "type": "component",
+        "title": "Infinite Bento Pan",
+        "description": "A bento board pans forever with feature cards at different depths.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/infinite-bento-pan",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/infinite-bento-pan.png"
+    },
+    {
+        "name": "infinite-marquee",
+        "type": "component",
+        "title": "Infinite Marquee",
+        "description": "A looping marquee primitive for logos, tags, and feature pills.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/infinite-marquee",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/infinite-marquee.png"
+    },
+    {
+        "name": "landing-code-showcase",
+        "type": "component",
+        "title": "Landing Code Showcase",
+        "description": "A product hero where code output becomes a live preview card.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/landing-code-showcase",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/landing-code-showcase.png"
+    },
+    {
+        "name": "live-code-compilation",
+        "type": "component",
+        "title": "Live Code Compilation",
+        "description": "A code editor compiles into a preview panel with status ticks.",
+        "tags": [
+            "code-animation",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/live-code-compilation",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/live-code-compilation.png"
+    },
+    {
+        "name": "mesh-gradient-bg",
+        "type": "component",
+        "title": "Mesh Gradient Background",
+        "description": "A render-safe mesh gradient using animated radial layers.",
+        "tags": [
+            "effect",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/mesh-gradient-bg",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png"
+    },
+    {
+        "name": "micro-scale-fade",
+        "type": "component",
+        "title": "Micro Scale Fade",
+        "description": "A tiny scale-and-opacity transition for UI state changes.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/micro-scale-fade",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-scale-fade.png"
+    },
+    {
+        "name": "opencode",
+        "type": "component",
+        "title": "OpenCode",
+        "description": "A terminal-first coding agent surface with streaming task output.",
+        "tags": [
+            "code-animation",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/opencode",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/opencode.png"
+    },
+    {
+        "name": "pricing-tier-focus",
+        "type": "component",
+        "title": "Pricing Tier Focus",
+        "description": "Pricing cards shift focus from free to pro with spotlight emphasis.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/pricing-tier-focus",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/pricing-tier-focus.png"
+    },
+    {
+        "name": "progress-steps",
+        "type": "component",
+        "title": "Progress Steps",
+        "description": "A multi-step progress indicator with active, pending, and done states.",
+        "tags": [
+            "ui-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/progress-steps",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/progress-steps.png"
+    },
+    {
+        "name": "registry",
+        "type": "component",
+        "title": "Registry",
+        "description": "A catalog registry card for showing installable component metadata.",
+        "tags": [
+            "ui-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/registry",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/registry.png"
+    },
+    {
+        "name": "remocn-ui",
+        "type": "component",
+        "title": "Remocn UI",
+        "description": "A compact kit card that explains the remocn primitives now available in HyperFrames.",
+        "tags": [
+            "ui-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/remocn-ui",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/remocn-ui.png"
+    },
+    {
+        "name": "select-item",
+        "type": "component",
+        "title": "Select Item",
+        "description": "A select-row primitive with check mark, hint, and active highlight.",
+        "tags": [
+            "ui-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/select-item",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/select-item.png"
+    },
+    {
+        "name": "skeleton-block",
+        "type": "component",
+        "title": "Skeleton Block",
+        "description": "A skeleton loading block that resolves into real content.",
+        "tags": [
+            "ui-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/skeleton-block",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-block.png"
+    },
+    {
+        "name": "spatial-push",
+        "type": "component",
+        "title": "Spatial Push",
+        "description": "A physical depth transition that presses the old scene backward.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/spatial-push",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spatial-push.png"
+    },
+    {
+        "name": "spotlight-card",
+        "type": "component",
+        "title": "Spotlight Card",
+        "description": "A card with a scripted cursor spotlight and lit border.",
+        "tags": [
+            "effect",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/spotlight-card",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png"
+    },
+    {
+        "name": "terminal-simulator",
+        "type": "component",
+        "title": "Terminal Simulator",
+        "description": "A terminal window types commands and streams log output.",
+        "tags": [
+            "code-animation",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/terminal-simulator",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png"
+    },
+    {
+        "name": "terminal-to-browser-deploy",
+        "type": "component",
+        "title": "Terminal to Browser Deploy",
+        "description": "Terminal deploy logs hand off into a live browser preview.",
+        "tags": [
+            "showcase",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/terminal-to-browser-deploy",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-to-browser-deploy.png"
+    },
+    {
+        "name": "tool-menu-slide-in",
+        "type": "component",
+        "title": "Tool Menu Slide In",
+        "description": "A tool menu enters with short-axis slide and icon stagger.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/tool-menu-slide-in",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tool-menu-slide-in.png"
+    },
+    {
+        "name": "v0",
+        "type": "component",
+        "title": "v0",
+        "description": "A prompt-to-interface agent surface with generated component preview.",
+        "tags": [
+            "showcase",
+            "remocn-port",
+            "ai"
+        ],
+        "href": "/catalog/components/v0",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/v0.png"
+    },
+    {
+        "name": "x-follow-card",
+        "type": "component",
+        "title": "X Follow Card",
+        "description": "A social follow card with avatar, handle, and follower motion.",
+        "tags": [
+            "social-overlay",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/x-follow-card",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png"
+    },
+    {
+        "name": "x-followers-overview",
+        "type": "component",
+        "title": "X Followers Overview",
+        "description": "A social analytics card with count-up and audience pills.",
+        "tags": [
+            "social-overlay",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/x-followers-overview",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-followers-overview.png"
+    },
+    {
+        "name": "zoom-through-transition",
+        "type": "component",
+        "title": "Zoom Through Transition",
+        "description": "A transition that zooms through a focal card into the next scene.",
+        "tags": [
+            "transition-primitive",
+            "remocn-port"
+        ],
+        "href": "/catalog/components/zoom-through-transition",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png"
     }
 ]
diff --git a/packages/core/src/registry/remocnUiPrimitivesCatalog.test.ts b/packages/core/src/registry/remocnUiPrimitivesCatalog.test.ts
index 78796f7ca2..f8e1491055 100644
--- a/packages/core/src/registry/remocnUiPrimitivesCatalog.test.ts
+++ b/packages/core/src/registry/remocnUiPrimitivesCatalog.test.ts
@@ -122,6 +122,57 @@ const typographyPrimitives = [
   "typewriter",
 ] as const;
 
+const remainingRemocnComponents = [
+  "ai-generation-canvas",
+  "animated-bar-chart",
+  "animated-line-chart",
+  "backdrop",
+  "browser-flow",
+  "chat-gpt",
+  "chat-to-preview-layout",
+  "chromatic-aberration-wipe",
+  "claude-chat",
+  "claude-code",
+  "code-accordion",
+  "code-diff-wipe",
+  "command-menu-item",
+  "confetti",
+  "dashboard-populate",
+  "data-flow-pipes",
+  "device-mockup-zoom",
+  "directional-wipe",
+  "drag-and-drop-flow",
+  "dropdown-menu-item",
+  "ecosystem-constellation",
+  "frosted-glass-wipe",
+  "github-stars",
+  "glass-code-block",
+  "hero-device-assemble",
+  "image-expand-to-fullscreen",
+  "infinite-bento-pan",
+  "infinite-marquee",
+  "landing-code-showcase",
+  "live-code-compilation",
+  "mesh-gradient-bg",
+  "micro-scale-fade",
+  "opencode",
+  "pricing-tier-focus",
+  "progress-steps",
+  "registry",
+  "remocn-ui",
+  "select-item",
+  "skeleton-block",
+  "spatial-push",
+  "spotlight-card",
+  "terminal-simulator",
+  "terminal-to-browser-deploy",
+  "tool-menu-slide-in",
+  "v0",
+  "x-follow-card",
+  "x-followers-overview",
+  "zoom-through-transition",
+] as const;
+
 function readJson<T>(path: string): T {
   return JSON.parse(readFileSync(path, "utf-8")) as T;
 }
@@ -185,4 +236,8 @@ describe("remocn UI primitives catalog slice", () => {
       "typography",
     ]);
   });
+
+  it("ports the remaining remocn showcase, effect, transition, and social entries", () => {
+    expectRegisteredComponents(remainingRemocnComponents, ["remocn-port"]);
+  });
 });
diff --git a/registry/components/ai-generation-canvas/ai-generation-canvas.html b/registry/components/ai-generation-canvas/ai-generation-canvas.html
new file mode 100644
index 0000000000..bfd72f0f52
--- /dev/null
+++ b/registry/components/ai-generation-canvas/ai-generation-canvas.html
@@ -0,0 +1,94 @@
+<!--
+  AI Generation Canvas - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-ai-generation-canvas">
+  <div class="panel prompt">
+    <h3>AI Generation Canvas</h3>
+    <p>A prompt composer expands into a generated dashboard preview.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-ai-generation-canvas {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-ai-generation-canvas {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-ai-generation-canvas .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-ai-generation-canvas .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-ai-generation-canvas .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-ai-generation-canvas .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-ai-generation-canvas .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-ai-generation-canvas h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-ai-generation-canvas p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-ai-generation-canvas .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-ai-generation-canvas .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/ai-generation-canvas/demo.html b/registry/components/ai-generation-canvas/demo.html
new file mode 100644
index 0000000000..41787e7a44
--- /dev/null
+++ b/registry/components/ai-generation-canvas/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>AI Generation Canvas - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-ai-generation-canvas {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-ai-generation-canvas {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-ai-generation-canvas .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-ai-generation-canvas .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-ai-generation-canvas .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-ai-generation-canvas .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-ai-generation-canvas .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-ai-generation-canvas h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-ai-generation-canvas p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="ai-generation-canvas-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-ai-generation-canvas">
+          <div class="panel prompt">
+            <h3>AI Generation Canvas</h3>
+            <p>A prompt composer expands into a generated dashboard preview.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-ai-generation-canvas .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-ai-generation-canvas .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["ai-generation-canvas-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/ai-generation-canvas/registry-item.json b/registry/components/ai-generation-canvas/registry-item.json
new file mode 100644
index 0000000000..bf7717de64
--- /dev/null
+++ b/registry/components/ai-generation-canvas/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ai-generation-canvas",
+  "type": "hyperframes:component",
+  "title": "AI Generation Canvas",
+  "description": "A prompt composer expands into a generated dashboard preview.",
+  "tags": ["showcase", "remocn-port", "ai"],
+  "files": [
+    {
+      "path": "ai-generation-canvas.html",
+      "target": "compositions/components/ai-generation-canvas.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ai-generation-canvas.png"
+  }
+}
diff --git a/registry/components/animated-bar-chart/animated-bar-chart.html b/registry/components/animated-bar-chart/animated-bar-chart.html
new file mode 100644
index 0000000000..045aeb5a75
--- /dev/null
+++ b/registry/components/animated-bar-chart/animated-bar-chart.html
@@ -0,0 +1,92 @@
+<!--
+  Animated Bar Chart - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-animated-bar-chart">
+  <header>
+    <div>
+      <h3>Animated Bar Chart</h3>
+      <p>A compact data card with deterministic bar growth and value callouts.</p>
+    </div>
+    <strong>+42%</strong>
+  </header>
+  <div class="bars">
+    <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+    ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+    ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+    ><span class="bar" style="--h: 78%"></span>
+  </div>
+  <svg viewBox="0 0 700 210">
+    <path
+      d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+      fill="none"
+      stroke="#2563eb"
+      stroke-width="10"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-remocn-animated-bar-chart {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-animated-bar-chart {
+    width: 760px;
+    min-height: 420px;
+    border-radius: 28px;
+    background: #fff;
+    padding: 34px;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    gap: 22px;
+  }
+  .hf-remocn-animated-bar-chart header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .hf-remocn-animated-bar-chart h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-animated-bar-chart strong {
+    font-size: 54px;
+    letter-spacing: -0.06em;
+  }
+  .hf-remocn-animated-bar-chart .bars {
+    height: 210px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-items: end;
+    gap: 14px;
+  }
+  .hf-remocn-animated-bar-chart .bar {
+    height: calc(var(--h) * var(--hf-grow, 1));
+    border-radius: 14px 14px 5px 5px;
+    background: linear-gradient(180deg, #60a5fa, #2563eb);
+  }
+  .hf-remocn-animated-bar-chart svg {
+    width: 100%;
+    height: 210px;
+    overflow: visible;
+  }
+  .hf-remocn-animated-bar-chart path {
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-animated-bar-chart', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/animated-bar-chart/demo.html b/registry/components/animated-bar-chart/demo.html
new file mode 100644
index 0000000000..3ee80673fa
--- /dev/null
+++ b/registry/components/animated-bar-chart/demo.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Animated Bar Chart - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-animated-bar-chart {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-animated-bar-chart {
+        width: 760px;
+        min-height: 420px;
+        border-radius: 28px;
+        background: #fff;
+        padding: 34px;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        display: grid;
+        gap: 22px;
+      }
+      .hf-remocn-animated-bar-chart header {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+      }
+      .hf-remocn-animated-bar-chart h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-animated-bar-chart strong {
+        font-size: 54px;
+        letter-spacing: -0.06em;
+      }
+      .hf-remocn-animated-bar-chart .bars {
+        height: 210px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: end;
+        gap: 14px;
+      }
+      .hf-remocn-animated-bar-chart .bar {
+        height: calc(var(--h) * var(--hf-grow, 1));
+        border-radius: 14px 14px 5px 5px;
+        background: linear-gradient(180deg, #60a5fa, #2563eb);
+      }
+      .hf-remocn-animated-bar-chart svg {
+        width: 100%;
+        height: 210px;
+        overflow: visible;
+      }
+      .hf-remocn-animated-bar-chart path {
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="animated-bar-chart-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-animated-bar-chart">
+          <header>
+            <div>
+              <h3>Animated Bar Chart</h3>
+              <p>A compact data card with deterministic bar growth and value callouts.</p>
+            </div>
+            <strong>+42%</strong>
+          </header>
+          <div class="bars">
+            <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+            ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+            ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+            ><span class="bar" style="--h: 78%"></span>
+          </div>
+          <svg viewBox="0 0 700 210">
+            <path
+              d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+              fill="none"
+              stroke="#2563eb"
+              stroke-width="10"
+              stroke-linecap="round"
+            />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-animated-bar-chart",
+          { "--hf-grow": 0, "--hf-dash": 900 },
+          { "--hf-grow": 1, "--hf-dash": 0, duration: 1.2, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["animated-bar-chart-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/animated-bar-chart/registry-item.json b/registry/components/animated-bar-chart/registry-item.json
new file mode 100644
index 0000000000..a5a22ca6c7
--- /dev/null
+++ b/registry/components/animated-bar-chart/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "animated-bar-chart",
+  "type": "hyperframes:component",
+  "title": "Animated Bar Chart",
+  "description": "A compact data card with deterministic bar growth and value callouts.",
+  "tags": ["data", "remocn-port"],
+  "files": [
+    {
+      "path": "animated-bar-chart.html",
+      "target": "compositions/components/animated-bar-chart.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png"
+  }
+}
diff --git a/registry/components/animated-line-chart/animated-line-chart.html b/registry/components/animated-line-chart/animated-line-chart.html
new file mode 100644
index 0000000000..d7c3e3bba9
--- /dev/null
+++ b/registry/components/animated-line-chart/animated-line-chart.html
@@ -0,0 +1,92 @@
+<!--
+  Animated Line Chart - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-animated-line-chart">
+  <header>
+    <div>
+      <h3>Animated Line Chart</h3>
+      <p>A line chart draws across the card with endpoint emphasis.</p>
+    </div>
+    <strong>+42%</strong>
+  </header>
+  <div class="bars">
+    <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+    ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+    ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+    ><span class="bar" style="--h: 78%"></span>
+  </div>
+  <svg viewBox="0 0 700 210">
+    <path
+      d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+      fill="none"
+      stroke="#2563eb"
+      stroke-width="10"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-remocn-animated-line-chart {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-animated-line-chart {
+    width: 760px;
+    min-height: 420px;
+    border-radius: 28px;
+    background: #fff;
+    padding: 34px;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    gap: 22px;
+  }
+  .hf-remocn-animated-line-chart header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .hf-remocn-animated-line-chart h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-animated-line-chart strong {
+    font-size: 54px;
+    letter-spacing: -0.06em;
+  }
+  .hf-remocn-animated-line-chart .bars {
+    height: 210px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-items: end;
+    gap: 14px;
+  }
+  .hf-remocn-animated-line-chart .bar {
+    height: calc(var(--h) * var(--hf-grow, 1));
+    border-radius: 14px 14px 5px 5px;
+    background: linear-gradient(180deg, #60a5fa, #2563eb);
+  }
+  .hf-remocn-animated-line-chart svg {
+    width: 100%;
+    height: 210px;
+    overflow: visible;
+  }
+  .hf-remocn-animated-line-chart path {
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-animated-line-chart', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/animated-line-chart/demo.html b/registry/components/animated-line-chart/demo.html
new file mode 100644
index 0000000000..ad3c129c84
--- /dev/null
+++ b/registry/components/animated-line-chart/demo.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Animated Line Chart - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-animated-line-chart {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-animated-line-chart {
+        width: 760px;
+        min-height: 420px;
+        border-radius: 28px;
+        background: #fff;
+        padding: 34px;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        display: grid;
+        gap: 22px;
+      }
+      .hf-remocn-animated-line-chart header {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+      }
+      .hf-remocn-animated-line-chart h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-animated-line-chart strong {
+        font-size: 54px;
+        letter-spacing: -0.06em;
+      }
+      .hf-remocn-animated-line-chart .bars {
+        height: 210px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: end;
+        gap: 14px;
+      }
+      .hf-remocn-animated-line-chart .bar {
+        height: calc(var(--h) * var(--hf-grow, 1));
+        border-radius: 14px 14px 5px 5px;
+        background: linear-gradient(180deg, #60a5fa, #2563eb);
+      }
+      .hf-remocn-animated-line-chart svg {
+        width: 100%;
+        height: 210px;
+        overflow: visible;
+      }
+      .hf-remocn-animated-line-chart path {
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="animated-line-chart-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-animated-line-chart">
+          <header>
+            <div>
+              <h3>Animated Line Chart</h3>
+              <p>A line chart draws across the card with endpoint emphasis.</p>
+            </div>
+            <strong>+42%</strong>
+          </header>
+          <div class="bars">
+            <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+            ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+            ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+            ><span class="bar" style="--h: 78%"></span>
+          </div>
+          <svg viewBox="0 0 700 210">
+            <path
+              d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+              fill="none"
+              stroke="#2563eb"
+              stroke-width="10"
+              stroke-linecap="round"
+            />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-animated-line-chart",
+          { "--hf-grow": 0, "--hf-dash": 900 },
+          { "--hf-grow": 1, "--hf-dash": 0, duration: 1.2, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["animated-line-chart-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/animated-line-chart/registry-item.json b/registry/components/animated-line-chart/registry-item.json
new file mode 100644
index 0000000000..cb636af6ac
--- /dev/null
+++ b/registry/components/animated-line-chart/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "animated-line-chart",
+  "type": "hyperframes:component",
+  "title": "Animated Line Chart",
+  "description": "A line chart draws across the card with endpoint emphasis.",
+  "tags": ["data", "remocn-port"],
+  "files": [
+    {
+      "path": "animated-line-chart.html",
+      "target": "compositions/components/animated-line-chart.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-line-chart.png"
+  }
+}
diff --git a/registry/components/backdrop/backdrop.html b/registry/components/backdrop/backdrop.html
new file mode 100644
index 0000000000..6c28f4242e
--- /dev/null
+++ b/registry/components/backdrop/backdrop.html
@@ -0,0 +1,55 @@
+<!--
+  Backdrop - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-backdrop">
+  <div class="row"><span class="label">Backdrop</span><span class="hint">Ctrl K</span></div>
+  <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+  <div class="row"><span class="label">Disabled</span><span class="hint">pending</span></div>
+</div>
+
+<style>
+  .hf-remocn-backdrop {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-backdrop {
+    width: 560px;
+    border-radius: 22px;
+    background: #fff;
+    padding: 22px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-backdrop .row {
+    height: 52px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    transform: translateX(var(--hf-row-x, 0px));
+    opacity: var(--hf-row-opacity, 1);
+  }
+  .hf-remocn-backdrop .label {
+    font-weight: 800;
+  }
+  .hf-remocn-backdrop .hint {
+    color: #71717a;
+    font-size: 13px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-backdrop .row', { '--hf-row-x': '-16px', '--hf-row-opacity': 0 }, { '--hf-row-x': '0px', '--hf-row-opacity': 1, duration: 0.22, stagger: 0.07, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/backdrop/demo.html b/registry/components/backdrop/demo.html
new file mode 100644
index 0000000000..d480aed0ad
--- /dev/null
+++ b/registry/components/backdrop/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Backdrop - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-backdrop {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-backdrop {
+        width: 560px;
+        border-radius: 22px;
+        background: #fff;
+        padding: 22px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-backdrop .row {
+        height: 52px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        transform: translateX(var(--hf-row-x, 0px));
+        opacity: var(--hf-row-opacity, 1);
+      }
+      .hf-remocn-backdrop .label {
+        font-weight: 800;
+      }
+      .hf-remocn-backdrop .hint {
+        color: #71717a;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="backdrop-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-backdrop">
+          <div class="row"><span class="label">Backdrop</span><span class="hint">Ctrl K</span></div>
+          <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+          <div class="row">
+            <span class="label">Disabled</span><span class="hint">pending</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-backdrop .row",
+          { "--hf-row-x": "-16px", "--hf-row-opacity": 0 },
+          {
+            "--hf-row-x": "0px",
+            "--hf-row-opacity": 1,
+            duration: 0.22,
+            stagger: 0.07,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["backdrop-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/backdrop/registry-item.json b/registry/components/backdrop/registry-item.json
new file mode 100644
index 0000000000..7a70825767
--- /dev/null
+++ b/registry/components/backdrop/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "backdrop",
+  "type": "hyperframes:component",
+  "title": "Backdrop",
+  "description": "A composable glass backdrop layer for dialog, drawer, and modal scenes.",
+  "tags": ["ui-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "backdrop.html",
+      "target": "compositions/components/backdrop.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/backdrop.png"
+  }
+}
diff --git a/registry/components/browser-flow/browser-flow.html b/registry/components/browser-flow/browser-flow.html
new file mode 100644
index 0000000000..09ce9d2c35
--- /dev/null
+++ b/registry/components/browser-flow/browser-flow.html
@@ -0,0 +1,94 @@
+<!--
+  Browser Flow - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-browser-flow">
+  <div class="panel prompt">
+    <h3>Browser Flow</h3>
+    <p>A browser frame walks through a three-step product flow.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-browser-flow {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-browser-flow {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-browser-flow .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-browser-flow .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-browser-flow .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-browser-flow .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-browser-flow .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-browser-flow h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-browser-flow p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-browser-flow .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-browser-flow .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/browser-flow/demo.html b/registry/components/browser-flow/demo.html
new file mode 100644
index 0000000000..e686bbc2f3
--- /dev/null
+++ b/registry/components/browser-flow/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Browser Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-browser-flow {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-browser-flow {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-browser-flow .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-browser-flow .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-browser-flow .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-browser-flow .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-browser-flow .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-browser-flow h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-browser-flow p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="browser-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-browser-flow">
+          <div class="panel prompt">
+            <h3>Browser Flow</h3>
+            <p>A browser frame walks through a three-step product flow.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-browser-flow .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-browser-flow .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["browser-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/browser-flow/registry-item.json b/registry/components/browser-flow/registry-item.json
new file mode 100644
index 0000000000..9fa4970709
--- /dev/null
+++ b/registry/components/browser-flow/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "browser-flow",
+  "type": "hyperframes:component",
+  "title": "Browser Flow",
+  "description": "A browser frame walks through a three-step product flow.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "browser-flow.html",
+      "target": "compositions/components/browser-flow.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/browser-flow.png"
+  }
+}
diff --git a/registry/components/chat-gpt/chat-gpt.html b/registry/components/chat-gpt/chat-gpt.html
new file mode 100644
index 0000000000..6ced4e271f
--- /dev/null
+++ b/registry/components/chat-gpt/chat-gpt.html
@@ -0,0 +1,94 @@
+<!--
+  ChatGPT - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-chat-gpt">
+  <div class="panel prompt">
+    <h3>ChatGPT</h3>
+    <p>A chat composer types a prompt and morphs the voice button into send.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-chat-gpt {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-chat-gpt {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-chat-gpt .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-chat-gpt .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-chat-gpt .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-chat-gpt .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-chat-gpt .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-chat-gpt h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-chat-gpt p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-chat-gpt .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-chat-gpt .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/chat-gpt/demo.html b/registry/components/chat-gpt/demo.html
new file mode 100644
index 0000000000..ab19f5ae8f
--- /dev/null
+++ b/registry/components/chat-gpt/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>ChatGPT - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-chat-gpt {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-chat-gpt {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-chat-gpt .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-chat-gpt .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-chat-gpt .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-chat-gpt .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-chat-gpt .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-chat-gpt h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-chat-gpt p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="chat-gpt-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-chat-gpt">
+          <div class="panel prompt">
+            <h3>ChatGPT</h3>
+            <p>A chat composer types a prompt and morphs the voice button into send.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-chat-gpt .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-chat-gpt .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["chat-gpt-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/chat-gpt/registry-item.json b/registry/components/chat-gpt/registry-item.json
new file mode 100644
index 0000000000..5bc10f0522
--- /dev/null
+++ b/registry/components/chat-gpt/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "chat-gpt",
+  "type": "hyperframes:component",
+  "title": "ChatGPT",
+  "description": "A chat composer types a prompt and morphs the voice button into send.",
+  "tags": ["showcase", "remocn-port", "chat"],
+  "files": [
+    {
+      "path": "chat-gpt.html",
+      "target": "compositions/components/chat-gpt.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-gpt.png"
+  }
+}
diff --git a/registry/components/chat-to-preview-layout/chat-to-preview-layout.html b/registry/components/chat-to-preview-layout/chat-to-preview-layout.html
new file mode 100644
index 0000000000..764963a554
--- /dev/null
+++ b/registry/components/chat-to-preview-layout/chat-to-preview-layout.html
@@ -0,0 +1,94 @@
+<!--
+  Chat to Preview Layout - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-chat-to-preview-layout">
+  <div class="panel prompt">
+    <h3>Chat to Preview Layout</h3>
+    <p>Split-pane chat and preview layout for agent-generated UI.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-chat-to-preview-layout {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-chat-to-preview-layout {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-chat-to-preview-layout .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-chat-to-preview-layout .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-chat-to-preview-layout .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-chat-to-preview-layout .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-chat-to-preview-layout .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-chat-to-preview-layout h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-chat-to-preview-layout p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-chat-to-preview-layout .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-chat-to-preview-layout .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/chat-to-preview-layout/demo.html b/registry/components/chat-to-preview-layout/demo.html
new file mode 100644
index 0000000000..0eacf7ce70
--- /dev/null
+++ b/registry/components/chat-to-preview-layout/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Chat to Preview Layout - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-chat-to-preview-layout {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-chat-to-preview-layout {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-chat-to-preview-layout .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-chat-to-preview-layout .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-chat-to-preview-layout .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-chat-to-preview-layout .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-chat-to-preview-layout .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-chat-to-preview-layout h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-chat-to-preview-layout p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="chat-to-preview-layout-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-chat-to-preview-layout">
+          <div class="panel prompt">
+            <h3>Chat to Preview Layout</h3>
+            <p>Split-pane chat and preview layout for agent-generated UI.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-chat-to-preview-layout .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-chat-to-preview-layout .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["chat-to-preview-layout-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/chat-to-preview-layout/registry-item.json b/registry/components/chat-to-preview-layout/registry-item.json
new file mode 100644
index 0000000000..dcec0c53ae
--- /dev/null
+++ b/registry/components/chat-to-preview-layout/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "chat-to-preview-layout",
+  "type": "hyperframes:component",
+  "title": "Chat to Preview Layout",
+  "description": "Split-pane chat and preview layout for agent-generated UI.",
+  "tags": ["showcase", "remocn-port", "ai"],
+  "files": [
+    {
+      "path": "chat-to-preview-layout.html",
+      "target": "compositions/components/chat-to-preview-layout.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chat-to-preview-layout.png"
+  }
+}
diff --git a/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html b/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
new file mode 100644
index 0000000000..1845053229
--- /dev/null
+++ b/registry/components/chromatic-aberration-wipe/chromatic-aberration-wipe.html
@@ -0,0 +1,82 @@
+<!--
+  Chromatic Aberration Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-chromatic-aberration-wipe">
+  <div class="scene from">Before</div>
+  <div class="scene to">Chromatic Aberration Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-chromatic-aberration-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-chromatic-aberration-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-chromatic-aberration-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-chromatic-aberration-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-chromatic-aberration-wipe .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-chromatic-aberration-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-chromatic-aberration-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-chromatic-aberration-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-chromatic-aberration-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-chromatic-aberration-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/chromatic-aberration-wipe/demo.html b/registry/components/chromatic-aberration-wipe/demo.html
new file mode 100644
index 0000000000..fcaa4d5da9
--- /dev/null
+++ b/registry/components/chromatic-aberration-wipe/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Chromatic Aberration Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-chromatic-aberration-wipe {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-chromatic-aberration-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-chromatic-aberration-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-chromatic-aberration-wipe .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-chromatic-aberration-wipe .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-chromatic-aberration-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-chromatic-aberration-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="chromatic-aberration-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-chromatic-aberration-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Chromatic Aberration Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-chromatic-aberration-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-chromatic-aberration-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["chromatic-aberration-wipe-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/chromatic-aberration-wipe/registry-item.json b/registry/components/chromatic-aberration-wipe/registry-item.json
new file mode 100644
index 0000000000..fe9d8ac885
--- /dev/null
+++ b/registry/components/chromatic-aberration-wipe/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "chromatic-aberration-wipe",
+  "type": "hyperframes:component",
+  "title": "Chromatic Aberration Wipe",
+  "description": "A fast slide wipe with RGB channel split on peak frames.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "chromatic-aberration-wipe.html",
+      "target": "compositions/components/chromatic-aberration-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/chromatic-aberration-wipe.png"
+  }
+}
diff --git a/registry/components/claude-chat/claude-chat.html b/registry/components/claude-chat/claude-chat.html
new file mode 100644
index 0000000000..d13e82d806
--- /dev/null
+++ b/registry/components/claude-chat/claude-chat.html
@@ -0,0 +1,94 @@
+<!--
+  Claude Chat - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-claude-chat">
+  <div class="panel prompt">
+    <h3>Claude Chat</h3>
+    <p>A calm assistant chat layout with staged response cards.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-claude-chat {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-claude-chat {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-claude-chat .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-claude-chat .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-claude-chat .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-claude-chat .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-claude-chat .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-claude-chat h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-claude-chat p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-claude-chat .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-claude-chat .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/claude-chat/demo.html b/registry/components/claude-chat/demo.html
new file mode 100644
index 0000000000..c37a473c77
--- /dev/null
+++ b/registry/components/claude-chat/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Claude Chat - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-claude-chat {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-claude-chat {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-claude-chat .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-claude-chat .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-claude-chat .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-claude-chat .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-claude-chat .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-claude-chat h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-claude-chat p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="claude-chat-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-claude-chat">
+          <div class="panel prompt">
+            <h3>Claude Chat</h3>
+            <p>A calm assistant chat layout with staged response cards.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-claude-chat .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-claude-chat .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["claude-chat-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/claude-chat/registry-item.json b/registry/components/claude-chat/registry-item.json
new file mode 100644
index 0000000000..0b8d8804f1
--- /dev/null
+++ b/registry/components/claude-chat/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "claude-chat",
+  "type": "hyperframes:component",
+  "title": "Claude Chat",
+  "description": "A calm assistant chat layout with staged response cards.",
+  "tags": ["showcase", "remocn-port", "chat"],
+  "files": [
+    {
+      "path": "claude-chat.html",
+      "target": "compositions/components/claude-chat.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/claude-chat.png"
+  }
+}
diff --git a/registry/components/claude-code/claude-code.html b/registry/components/claude-code/claude-code.html
new file mode 100644
index 0000000000..4779a14a75
--- /dev/null
+++ b/registry/components/claude-code/claude-code.html
@@ -0,0 +1,92 @@
+<!--
+  Claude Code - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-claude-code">
+  <div class="chrome"><span class="dot"></span><span>Claude Code</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=claude-code</div>
+</div>
+
+<style>
+  .hf-remocn-claude-code {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-claude-code {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-claude-code .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-claude-code .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-claude-code .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-claude-code .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-claude-code .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-claude-code .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-claude-code .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-claude-code .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-claude-code .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/registry/components/claude-code/demo.html b/registry/components/claude-code/demo.html
new file mode 100644
index 0000000000..8a087f7429
--- /dev/null
+++ b/registry/components/claude-code/demo.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Claude Code - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-claude-code {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-claude-code {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-claude-code .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+      }
+      .hf-remocn-claude-code .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-claude-code .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-claude-code .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+      }
+      .hf-remocn-claude-code .editor {
+        padding: 22px;
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-claude-code .line {
+        display: block;
+        height: 16px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-claude-code .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="claude-code-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-claude-code">
+          <div class="chrome"><span class="dot"></span><span>Claude Code</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=claude-code</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-claude-code .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-claude-code .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["claude-code-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/claude-code/registry-item.json b/registry/components/claude-code/registry-item.json
new file mode 100644
index 0000000000..78056d1254
--- /dev/null
+++ b/registry/components/claude-code/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "claude-code",
+  "type": "hyperframes:component",
+  "title": "Claude Code",
+  "description": "A code-agent workbench with file tree, terminal, and patch panel.",
+  "tags": ["code-animation", "remocn-port"],
+  "files": [
+    {
+      "path": "claude-code.html",
+      "target": "compositions/components/claude-code.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/claude-code.png"
+  }
+}
diff --git a/registry/components/code-accordion/code-accordion.html b/registry/components/code-accordion/code-accordion.html
new file mode 100644
index 0000000000..125944bfc4
--- /dev/null
+++ b/registry/components/code-accordion/code-accordion.html
@@ -0,0 +1,92 @@
+<!--
+  Code Accordion - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-code-accordion">
+  <div class="chrome"><span class="dot"></span><span>Code Accordion</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=code-accordion</div>
+</div>
+
+<style>
+  .hf-remocn-code-accordion {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-code-accordion {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-code-accordion .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-code-accordion .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-code-accordion .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-code-accordion .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-code-accordion .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-code-accordion .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-code-accordion .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-code-accordion .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-code-accordion .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/registry/components/code-accordion/demo.html b/registry/components/code-accordion/demo.html
new file mode 100644
index 0000000000..122ba1ab66
--- /dev/null
+++ b/registry/components/code-accordion/demo.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Accordion - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-code-accordion {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-code-accordion {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-code-accordion .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+      }
+      .hf-remocn-code-accordion .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-code-accordion .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-code-accordion .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+      }
+      .hf-remocn-code-accordion .editor {
+        padding: 22px;
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-code-accordion .line {
+        display: block;
+        height: 16px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-code-accordion .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="code-accordion-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-code-accordion">
+          <div class="chrome"><span class="dot"></span><span>Code Accordion</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=code-accordion</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-code-accordion .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-accordion .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["code-accordion-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/code-accordion/registry-item.json b/registry/components/code-accordion/registry-item.json
new file mode 100644
index 0000000000..11f9f8629e
--- /dev/null
+++ b/registry/components/code-accordion/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-accordion",
+  "type": "hyperframes:component",
+  "title": "Code Accordion",
+  "description": "Stacked code sections expand one at a time with line highlights.",
+  "tags": ["code-animation", "remocn-port"],
+  "files": [
+    {
+      "path": "code-accordion.html",
+      "target": "compositions/components/code-accordion.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-accordion.png"
+  }
+}
diff --git a/registry/components/code-diff-wipe/code-diff-wipe.html b/registry/components/code-diff-wipe/code-diff-wipe.html
new file mode 100644
index 0000000000..7e68f04a17
--- /dev/null
+++ b/registry/components/code-diff-wipe/code-diff-wipe.html
@@ -0,0 +1,82 @@
+<!--
+  Code Diff Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-code-diff-wipe">
+  <div class="scene from">Before</div>
+  <div class="scene to">Code Diff Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-code-diff-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-code-diff-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-code-diff-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-code-diff-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-code-diff-wipe .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-code-diff-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-code-diff-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-code-diff-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-code-diff-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-code-diff-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-code-diff-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/code-diff-wipe/demo.html b/registry/components/code-diff-wipe/demo.html
new file mode 100644
index 0000000000..50fbfffacd
--- /dev/null
+++ b/registry/components/code-diff-wipe/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Code Diff Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-code-diff-wipe {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-code-diff-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-code-diff-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-code-diff-wipe .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-code-diff-wipe .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-code-diff-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-code-diff-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="code-diff-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-code-diff-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Code Diff Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-code-diff-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-code-diff-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["code-diff-wipe-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/code-diff-wipe/registry-item.json b/registry/components/code-diff-wipe/registry-item.json
new file mode 100644
index 0000000000..f761fccc54
--- /dev/null
+++ b/registry/components/code-diff-wipe/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-diff-wipe",
+  "type": "hyperframes:component",
+  "title": "Code Diff Wipe",
+  "description": "A scene transition that wipes through added and removed code lines.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "code-diff-wipe.html",
+      "target": "compositions/components/code-diff-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/code-diff-wipe.png"
+  }
+}
diff --git a/registry/components/command-menu-item/command-menu-item.html b/registry/components/command-menu-item/command-menu-item.html
new file mode 100644
index 0000000000..b5b166ced8
--- /dev/null
+++ b/registry/components/command-menu-item/command-menu-item.html
@@ -0,0 +1,57 @@
+<!--
+  Command Menu Item - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-command-menu-item">
+  <div class="row">
+    <span class="label">Command Menu Item</span><span class="hint">Ctrl K</span>
+  </div>
+  <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+  <div class="row"><span class="label">Disabled</span><span class="hint">pending</span></div>
+</div>
+
+<style>
+  .hf-remocn-command-menu-item {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-command-menu-item {
+    width: 560px;
+    border-radius: 22px;
+    background: #fff;
+    padding: 22px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-command-menu-item .row {
+    height: 52px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    transform: translateX(var(--hf-row-x, 0px));
+    opacity: var(--hf-row-opacity, 1);
+  }
+  .hf-remocn-command-menu-item .label {
+    font-weight: 800;
+  }
+  .hf-remocn-command-menu-item .hint {
+    color: #71717a;
+    font-size: 13px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-command-menu-item .row', { '--hf-row-x': '-16px', '--hf-row-opacity': 0 }, { '--hf-row-x': '0px', '--hf-row-opacity': 1, duration: 0.22, stagger: 0.07, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/command-menu-item/demo.html b/registry/components/command-menu-item/demo.html
new file mode 100644
index 0000000000..1d4401372c
--- /dev/null
+++ b/registry/components/command-menu-item/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Command Menu Item - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-command-menu-item {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-command-menu-item {
+        width: 560px;
+        border-radius: 22px;
+        background: #fff;
+        padding: 22px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-command-menu-item .row {
+        height: 52px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        transform: translateX(var(--hf-row-x, 0px));
+        opacity: var(--hf-row-opacity, 1);
+      }
+      .hf-remocn-command-menu-item .label {
+        font-weight: 800;
+      }
+      .hf-remocn-command-menu-item .hint {
+        color: #71717a;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="command-menu-item-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-command-menu-item">
+          <div class="row">
+            <span class="label">Command Menu Item</span><span class="hint">Ctrl K</span>
+          </div>
+          <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+          <div class="row">
+            <span class="label">Disabled</span><span class="hint">pending</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-command-menu-item .row",
+          { "--hf-row-x": "-16px", "--hf-row-opacity": 0 },
+          {
+            "--hf-row-x": "0px",
+            "--hf-row-opacity": 1,
+            duration: 0.22,
+            stagger: 0.07,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["command-menu-item-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/command-menu-item/registry-item.json b/registry/components/command-menu-item/registry-item.json
new file mode 100644
index 0000000000..b677f0158a
--- /dev/null
+++ b/registry/components/command-menu-item/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "command-menu-item",
+  "type": "hyperframes:component",
+  "title": "Command Menu Item",
+  "description": "A focused command-row primitive with shortcut and selection states.",
+  "tags": ["ui-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "command-menu-item.html",
+      "target": "compositions/components/command-menu-item.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/command-menu-item.png"
+  }
+}
diff --git a/registry/components/confetti/confetti.html b/registry/components/confetti/confetti.html
new file mode 100644
index 0000000000..23cb2debdc
--- /dev/null
+++ b/registry/components/confetti/confetti.html
@@ -0,0 +1,123 @@
+<!--
+  Confetti - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-confetti">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Confetti</h3>
+      <p>A deterministic celebration burst with seeded particles and gravity.</p>
+    </div>
+  </div>
+  <span class="particle" style="--c: #f43f5e"></span
+  ><span class="particle" style="--c: #f59e0b"></span
+  ><span class="particle" style="--c: #22c55e"></span
+  ><span class="particle" style="--c: #38bdf8"></span
+  ><span class="particle" style="--c: #a855f7"></span
+  ><span class="particle" style="--c: #f43f5e"></span
+  ><span class="particle" style="--c: #f59e0b"></span
+  ><span class="particle" style="--c: #22c55e"></span
+  ><span class="particle" style="--c: #38bdf8"></span
+  ><span class="particle" style="--c: #a855f7"></span
+  ><span class="particle" style="--c: #f43f5e"></span
+  ><span class="particle" style="--c: #f59e0b"></span
+  ><span class="particle" style="--c: #22c55e"></span
+  ><span class="particle" style="--c: #38bdf8"></span
+  ><span class="particle" style="--c: #a855f7"></span
+  ><span class="particle" style="--c: #f43f5e"></span
+  ><span class="particle" style="--c: #f59e0b"></span
+  ><span class="particle" style="--c: #22c55e"></span
+  ><span class="particle" style="--c: #38bdf8"></span
+  ><span class="particle" style="--c: #a855f7"></span
+  ><span class="particle" style="--c: #f43f5e"></span
+  ><span class="particle" style="--c: #f59e0b"></span>
+</div>
+
+<style>
+  .hf-remocn-confetti {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-confetti {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-confetti .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        #60a5fa 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        #f472b6 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
+  }
+  .hf-remocn-confetti .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-confetti .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-confetti .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-confetti h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-confetti p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-confetti .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-confetti .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-confetti .particle', { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': () => (Math.cos(gsap.utils.wrap(0, 6.28, 1)) * 240) + 'px', '--hf-py': '-180px', '--hf-pr': '360deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/confetti/demo.html b/registry/components/confetti/demo.html
new file mode 100644
index 0000000000..c0074bed2f
--- /dev/null
+++ b/registry/components/confetti/demo.html
@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Confetti - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-confetti {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-confetti {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #080b12;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-confetti .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            #60a5fa 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            #f472b6 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            #34d399 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-confetti .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 26px;
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-confetti .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-confetti .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-confetti h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-confetti p {
+        margin: 8px 0 0;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="confetti-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-confetti">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Confetti</h3>
+              <p>A deterministic celebration burst with seeded particles and gravity.</p>
+            </div>
+          </div>
+          <span class="particle" style="--c: #f43f5e"></span
+          ><span class="particle" style="--c: #f59e0b"></span
+          ><span class="particle" style="--c: #22c55e"></span
+          ><span class="particle" style="--c: #38bdf8"></span
+          ><span class="particle" style="--c: #a855f7"></span
+          ><span class="particle" style="--c: #f43f5e"></span
+          ><span class="particle" style="--c: #f59e0b"></span
+          ><span class="particle" style="--c: #22c55e"></span
+          ><span class="particle" style="--c: #38bdf8"></span
+          ><span class="particle" style="--c: #a855f7"></span
+          ><span class="particle" style="--c: #f43f5e"></span
+          ><span class="particle" style="--c: #f59e0b"></span
+          ><span class="particle" style="--c: #22c55e"></span
+          ><span class="particle" style="--c: #38bdf8"></span
+          ><span class="particle" style="--c: #a855f7"></span
+          ><span class="particle" style="--c: #f43f5e"></span
+          ><span class="particle" style="--c: #f59e0b"></span
+          ><span class="particle" style="--c: #22c55e"></span
+          ><span class="particle" style="--c: #38bdf8"></span
+          ><span class="particle" style="--c: #a855f7"></span
+          ><span class="particle" style="--c: #f43f5e"></span
+          ><span class="particle" style="--c: #f59e0b"></span>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-confetti .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-confetti .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-confetti .particle",
+          { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+          {
+            "--hf-po": 1,
+            "--hf-px": () => Math.cos(gsap.utils.wrap(0, 6.28, 1)) * 240 + "px",
+            "--hf-py": "-180px",
+            "--hf-pr": "360deg",
+            duration: 0.8,
+            stagger: 0.015,
+            ease: "power2.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["confetti-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/confetti/registry-item.json b/registry/components/confetti/registry-item.json
new file mode 100644
index 0000000000..3b9c07a6d8
--- /dev/null
+++ b/registry/components/confetti/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "confetti",
+  "type": "hyperframes:component",
+  "title": "Confetti",
+  "description": "A deterministic celebration burst with seeded particles and gravity.",
+  "tags": ["effect", "remocn-port"],
+  "files": [
+    {
+      "path": "confetti.html",
+      "target": "compositions/components/confetti.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png"
+  }
+}
diff --git a/registry/components/dashboard-populate/dashboard-populate.html b/registry/components/dashboard-populate/dashboard-populate.html
new file mode 100644
index 0000000000..973ac75b51
--- /dev/null
+++ b/registry/components/dashboard-populate/dashboard-populate.html
@@ -0,0 +1,92 @@
+<!--
+  Dashboard Populate - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-dashboard-populate">
+  <header>
+    <div>
+      <h3>Dashboard Populate</h3>
+      <p>Skeleton dashboard cards resolve into populated charts and metrics.</p>
+    </div>
+    <strong>+42%</strong>
+  </header>
+  <div class="bars">
+    <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+    ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+    ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+    ><span class="bar" style="--h: 78%"></span>
+  </div>
+  <svg viewBox="0 0 700 210">
+    <path
+      d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+      fill="none"
+      stroke="#2563eb"
+      stroke-width="10"
+      stroke-linecap="round"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-remocn-dashboard-populate {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-dashboard-populate {
+    width: 760px;
+    min-height: 420px;
+    border-radius: 28px;
+    background: #fff;
+    padding: 34px;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+    display: grid;
+    gap: 22px;
+  }
+  .hf-remocn-dashboard-populate header {
+    display: flex;
+    justify-content: space-between;
+    align-items: end;
+  }
+  .hf-remocn-dashboard-populate h3 {
+    margin: 0;
+    font-size: 34px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-dashboard-populate strong {
+    font-size: 54px;
+    letter-spacing: -0.06em;
+  }
+  .hf-remocn-dashboard-populate .bars {
+    height: 210px;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    align-items: end;
+    gap: 14px;
+  }
+  .hf-remocn-dashboard-populate .bar {
+    height: calc(var(--h) * var(--hf-grow, 1));
+    border-radius: 14px 14px 5px 5px;
+    background: linear-gradient(180deg, #60a5fa, #2563eb);
+  }
+  .hf-remocn-dashboard-populate svg {
+    width: 100%;
+    height: 210px;
+    overflow: visible;
+  }
+  .hf-remocn-dashboard-populate path {
+    stroke-dasharray: 900;
+    stroke-dashoffset: var(--hf-dash, 0);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-dashboard-populate', { '--hf-grow': 0, '--hf-dash': 900 }, { '--hf-grow': 1, '--hf-dash': 0, duration: 1.2, ease: 'power3.out' }, startTime);
+-->
diff --git a/registry/components/dashboard-populate/demo.html b/registry/components/dashboard-populate/demo.html
new file mode 100644
index 0000000000..98b30b1411
--- /dev/null
+++ b/registry/components/dashboard-populate/demo.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dashboard Populate - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-dashboard-populate {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-dashboard-populate {
+        width: 760px;
+        min-height: 420px;
+        border-radius: 28px;
+        background: #fff;
+        padding: 34px;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
+        display: grid;
+        gap: 22px;
+      }
+      .hf-remocn-dashboard-populate header {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+      }
+      .hf-remocn-dashboard-populate h3 {
+        margin: 0;
+        font-size: 34px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-dashboard-populate strong {
+        font-size: 54px;
+        letter-spacing: -0.06em;
+      }
+      .hf-remocn-dashboard-populate .bars {
+        height: 210px;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        align-items: end;
+        gap: 14px;
+      }
+      .hf-remocn-dashboard-populate .bar {
+        height: calc(var(--h) * var(--hf-grow, 1));
+        border-radius: 14px 14px 5px 5px;
+        background: linear-gradient(180deg, #60a5fa, #2563eb);
+      }
+      .hf-remocn-dashboard-populate svg {
+        width: 100%;
+        height: 210px;
+        overflow: visible;
+      }
+      .hf-remocn-dashboard-populate path {
+        stroke-dasharray: 900;
+        stroke-dashoffset: var(--hf-dash, 0);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="dashboard-populate-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-dashboard-populate">
+          <header>
+            <div>
+              <h3>Dashboard Populate</h3>
+              <p>Skeleton dashboard cards resolve into populated charts and metrics.</p>
+            </div>
+            <strong>+42%</strong>
+          </header>
+          <div class="bars">
+            <span class="bar" style="--h: 42%"></span><span class="bar" style="--h: 72%"></span
+            ><span class="bar" style="--h: 56%"></span><span class="bar" style="--h: 88%"></span
+            ><span class="bar" style="--h: 64%"></span><span class="bar" style="--h: 95%"></span
+            ><span class="bar" style="--h: 78%"></span>
+          </div>
+          <svg viewBox="0 0 700 210">
+            <path
+              d="M20 172 C120 90, 190 118, 260 74 S430 112, 508 42 S620 82, 680 30"
+              fill="none"
+              stroke="#2563eb"
+              stroke-width="10"
+              stroke-linecap="round"
+            />
+          </svg>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-dashboard-populate",
+          { "--hf-grow": 0, "--hf-dash": 900 },
+          { "--hf-grow": 1, "--hf-dash": 0, duration: 1.2, ease: "power3.out" },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["dashboard-populate-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/dashboard-populate/registry-item.json b/registry/components/dashboard-populate/registry-item.json
new file mode 100644
index 0000000000..24fb5d91b2
--- /dev/null
+++ b/registry/components/dashboard-populate/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "dashboard-populate",
+  "type": "hyperframes:component",
+  "title": "Dashboard Populate",
+  "description": "Skeleton dashboard cards resolve into populated charts and metrics.",
+  "tags": ["data", "remocn-port"],
+  "files": [
+    {
+      "path": "dashboard-populate.html",
+      "target": "compositions/components/dashboard-populate.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dashboard-populate.png"
+  }
+}
diff --git a/registry/components/data-flow-pipes/data-flow-pipes.html b/registry/components/data-flow-pipes/data-flow-pipes.html
new file mode 100644
index 0000000000..a86e386dd5
--- /dev/null
+++ b/registry/components/data-flow-pipes/data-flow-pipes.html
@@ -0,0 +1,94 @@
+<!--
+  Data Flow Pipes - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-data-flow-pipes">
+  <div class="panel prompt">
+    <h3>Data Flow Pipes</h3>
+    <p>Animated pipe routes move packets between data nodes.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-data-flow-pipes {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-data-flow-pipes {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-data-flow-pipes .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-data-flow-pipes .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-data-flow-pipes .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-data-flow-pipes .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-data-flow-pipes .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-data-flow-pipes h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-data-flow-pipes p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-data-flow-pipes .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-data-flow-pipes .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/data-flow-pipes/demo.html b/registry/components/data-flow-pipes/demo.html
new file mode 100644
index 0000000000..8d090164a6
--- /dev/null
+++ b/registry/components/data-flow-pipes/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Data Flow Pipes - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-data-flow-pipes {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-data-flow-pipes {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-data-flow-pipes .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-data-flow-pipes .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-data-flow-pipes .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-data-flow-pipes .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-data-flow-pipes .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-data-flow-pipes h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-data-flow-pipes p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="data-flow-pipes-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-data-flow-pipes">
+          <div class="panel prompt">
+            <h3>Data Flow Pipes</h3>
+            <p>Animated pipe routes move packets between data nodes.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-data-flow-pipes .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-data-flow-pipes .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["data-flow-pipes-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/data-flow-pipes/registry-item.json b/registry/components/data-flow-pipes/registry-item.json
new file mode 100644
index 0000000000..c93f72992e
--- /dev/null
+++ b/registry/components/data-flow-pipes/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "data-flow-pipes",
+  "type": "hyperframes:component",
+  "title": "Data Flow Pipes",
+  "description": "Animated pipe routes move packets between data nodes.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "data-flow-pipes.html",
+      "target": "compositions/components/data-flow-pipes.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/data-flow-pipes.png"
+  }
+}
diff --git a/registry/components/device-mockup-zoom/demo.html b/registry/components/device-mockup-zoom/demo.html
new file mode 100644
index 0000000000..b333fc9411
--- /dev/null
+++ b/registry/components/device-mockup-zoom/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Device Mockup Zoom - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-device-mockup-zoom {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-device-mockup-zoom {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-device-mockup-zoom .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-device-mockup-zoom .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-device-mockup-zoom .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-device-mockup-zoom .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-device-mockup-zoom .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-device-mockup-zoom h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-device-mockup-zoom p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="device-mockup-zoom-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-device-mockup-zoom">
+          <div class="panel prompt">
+            <h3>Device Mockup Zoom</h3>
+            <p>A device frame scales forward while UI panels parallax behind it.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-device-mockup-zoom .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-device-mockup-zoom .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["device-mockup-zoom-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/device-mockup-zoom/device-mockup-zoom.html b/registry/components/device-mockup-zoom/device-mockup-zoom.html
new file mode 100644
index 0000000000..c1a66e4514
--- /dev/null
+++ b/registry/components/device-mockup-zoom/device-mockup-zoom.html
@@ -0,0 +1,94 @@
+<!--
+  Device Mockup Zoom - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-device-mockup-zoom">
+  <div class="panel prompt">
+    <h3>Device Mockup Zoom</h3>
+    <p>A device frame scales forward while UI panels parallax behind it.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-device-mockup-zoom {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-device-mockup-zoom {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-device-mockup-zoom .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-device-mockup-zoom .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-device-mockup-zoom .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-device-mockup-zoom .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-device-mockup-zoom .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-device-mockup-zoom h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-device-mockup-zoom p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-device-mockup-zoom .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-device-mockup-zoom .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/device-mockup-zoom/registry-item.json b/registry/components/device-mockup-zoom/registry-item.json
new file mode 100644
index 0000000000..f2c243dbe9
--- /dev/null
+++ b/registry/components/device-mockup-zoom/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "device-mockup-zoom",
+  "type": "hyperframes:component",
+  "title": "Device Mockup Zoom",
+  "description": "A device frame scales forward while UI panels parallax behind it.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "device-mockup-zoom.html",
+      "target": "compositions/components/device-mockup-zoom.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/device-mockup-zoom.png"
+  }
+}
diff --git a/registry/components/directional-wipe/demo.html b/registry/components/directional-wipe/demo.html
new file mode 100644
index 0000000000..a50ef45922
--- /dev/null
+++ b/registry/components/directional-wipe/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Directional Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-directional-wipe {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-directional-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-directional-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-directional-wipe .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-directional-wipe .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-directional-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-directional-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="directional-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-directional-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Directional Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-directional-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-directional-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["directional-wipe-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/directional-wipe/directional-wipe.html b/registry/components/directional-wipe/directional-wipe.html
new file mode 100644
index 0000000000..81aa823c0f
--- /dev/null
+++ b/registry/components/directional-wipe/directional-wipe.html
@@ -0,0 +1,82 @@
+<!--
+  Directional Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-directional-wipe">
+  <div class="scene from">Before</div>
+  <div class="scene to">Directional Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-directional-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-directional-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-directional-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-directional-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-directional-wipe .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-directional-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-directional-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-directional-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-directional-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-directional-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-directional-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/directional-wipe/registry-item.json b/registry/components/directional-wipe/registry-item.json
new file mode 100644
index 0000000000..5cacbf6f79
--- /dev/null
+++ b/registry/components/directional-wipe/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "directional-wipe",
+  "type": "hyperframes:component",
+  "title": "Directional Wipe",
+  "description": "A directional scene push that slides one panel over another.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "directional-wipe.html",
+      "target": "compositions/components/directional-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/directional-wipe.png"
+  }
+}
diff --git a/registry/components/drag-and-drop-flow/demo.html b/registry/components/drag-and-drop-flow/demo.html
new file mode 100644
index 0000000000..ee8c6639a1
--- /dev/null
+++ b/registry/components/drag-and-drop-flow/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Drag and Drop Flow - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-drag-and-drop-flow {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-drag-and-drop-flow {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-drag-and-drop-flow .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-drag-and-drop-flow .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-drag-and-drop-flow .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-drag-and-drop-flow .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-drag-and-drop-flow .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-drag-and-drop-flow h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-drag-and-drop-flow p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="drag-and-drop-flow-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-drag-and-drop-flow">
+          <div class="panel prompt">
+            <h3>Drag and Drop Flow</h3>
+            <p>Cards drag from backlog to timeline with snap feedback.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-drag-and-drop-flow .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-drag-and-drop-flow .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["drag-and-drop-flow-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/drag-and-drop-flow/drag-and-drop-flow.html b/registry/components/drag-and-drop-flow/drag-and-drop-flow.html
new file mode 100644
index 0000000000..aacb475598
--- /dev/null
+++ b/registry/components/drag-and-drop-flow/drag-and-drop-flow.html
@@ -0,0 +1,94 @@
+<!--
+  Drag and Drop Flow - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-drag-and-drop-flow">
+  <div class="panel prompt">
+    <h3>Drag and Drop Flow</h3>
+    <p>Cards drag from backlog to timeline with snap feedback.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-drag-and-drop-flow {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-drag-and-drop-flow {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-drag-and-drop-flow .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-drag-and-drop-flow .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-drag-and-drop-flow .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-drag-and-drop-flow .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-drag-and-drop-flow .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-drag-and-drop-flow h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-drag-and-drop-flow p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-drag-and-drop-flow .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-drag-and-drop-flow .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/drag-and-drop-flow/registry-item.json b/registry/components/drag-and-drop-flow/registry-item.json
new file mode 100644
index 0000000000..38ba0a6c98
--- /dev/null
+++ b/registry/components/drag-and-drop-flow/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "drag-and-drop-flow",
+  "type": "hyperframes:component",
+  "title": "Drag and Drop Flow",
+  "description": "Cards drag from backlog to timeline with snap feedback.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "drag-and-drop-flow.html",
+      "target": "compositions/components/drag-and-drop-flow.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/drag-and-drop-flow.png"
+  }
+}
diff --git a/registry/components/dropdown-menu-item/demo.html b/registry/components/dropdown-menu-item/demo.html
new file mode 100644
index 0000000000..3eca4758bb
--- /dev/null
+++ b/registry/components/dropdown-menu-item/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dropdown Menu Item - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-dropdown-menu-item {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-dropdown-menu-item {
+        width: 560px;
+        border-radius: 22px;
+        background: #fff;
+        padding: 22px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-dropdown-menu-item .row {
+        height: 52px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        transform: translateX(var(--hf-row-x, 0px));
+        opacity: var(--hf-row-opacity, 1);
+      }
+      .hf-remocn-dropdown-menu-item .label {
+        font-weight: 800;
+      }
+      .hf-remocn-dropdown-menu-item .hint {
+        color: #71717a;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="dropdown-menu-item-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-dropdown-menu-item">
+          <div class="row">
+            <span class="label">Dropdown Menu Item</span><span class="hint">Ctrl K</span>
+          </div>
+          <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+          <div class="row">
+            <span class="label">Disabled</span><span class="hint">pending</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-dropdown-menu-item .row",
+          { "--hf-row-x": "-16px", "--hf-row-opacity": 0 },
+          {
+            "--hf-row-x": "0px",
+            "--hf-row-opacity": 1,
+            duration: 0.22,
+            stagger: 0.07,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["dropdown-menu-item-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/dropdown-menu-item/dropdown-menu-item.html b/registry/components/dropdown-menu-item/dropdown-menu-item.html
new file mode 100644
index 0000000000..afdd658355
--- /dev/null
+++ b/registry/components/dropdown-menu-item/dropdown-menu-item.html
@@ -0,0 +1,57 @@
+<!--
+  Dropdown Menu Item - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-dropdown-menu-item">
+  <div class="row">
+    <span class="label">Dropdown Menu Item</span><span class="hint">Ctrl K</span>
+  </div>
+  <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+  <div class="row"><span class="label">Disabled</span><span class="hint">pending</span></div>
+</div>
+
+<style>
+  .hf-remocn-dropdown-menu-item {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-dropdown-menu-item {
+    width: 560px;
+    border-radius: 22px;
+    background: #fff;
+    padding: 22px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-dropdown-menu-item .row {
+    height: 52px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    transform: translateX(var(--hf-row-x, 0px));
+    opacity: var(--hf-row-opacity, 1);
+  }
+  .hf-remocn-dropdown-menu-item .label {
+    font-weight: 800;
+  }
+  .hf-remocn-dropdown-menu-item .hint {
+    color: #71717a;
+    font-size: 13px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-dropdown-menu-item .row', { '--hf-row-x': '-16px', '--hf-row-opacity': 0 }, { '--hf-row-x': '0px', '--hf-row-opacity': 1, duration: 0.22, stagger: 0.07, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/dropdown-menu-item/registry-item.json b/registry/components/dropdown-menu-item/registry-item.json
new file mode 100644
index 0000000000..1051c667ee
--- /dev/null
+++ b/registry/components/dropdown-menu-item/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "dropdown-menu-item",
+  "type": "hyperframes:component",
+  "title": "Dropdown Menu Item",
+  "description": "A menu-row primitive with icon, label, hint, and active state.",
+  "tags": ["ui-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "dropdown-menu-item.html",
+      "target": "compositions/components/dropdown-menu-item.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dropdown-menu-item.png"
+  }
+}
diff --git a/registry/components/ecosystem-constellation/demo.html b/registry/components/ecosystem-constellation/demo.html
new file mode 100644
index 0000000000..7a6e17d7bd
--- /dev/null
+++ b/registry/components/ecosystem-constellation/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Ecosystem Constellation - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-ecosystem-constellation {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-ecosystem-constellation {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-ecosystem-constellation .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-ecosystem-constellation .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-ecosystem-constellation .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-ecosystem-constellation .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-ecosystem-constellation .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-ecosystem-constellation h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-ecosystem-constellation p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="ecosystem-constellation-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-ecosystem-constellation">
+          <div class="panel prompt">
+            <h3>Ecosystem Constellation</h3>
+            <p>Orbiting product nodes connect into a constellation graph.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-ecosystem-constellation .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-ecosystem-constellation .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["ecosystem-constellation-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/ecosystem-constellation/ecosystem-constellation.html b/registry/components/ecosystem-constellation/ecosystem-constellation.html
new file mode 100644
index 0000000000..bf017190cb
--- /dev/null
+++ b/registry/components/ecosystem-constellation/ecosystem-constellation.html
@@ -0,0 +1,94 @@
+<!--
+  Ecosystem Constellation - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-ecosystem-constellation">
+  <div class="panel prompt">
+    <h3>Ecosystem Constellation</h3>
+    <p>Orbiting product nodes connect into a constellation graph.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-ecosystem-constellation {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-ecosystem-constellation {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-ecosystem-constellation .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-ecosystem-constellation .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-ecosystem-constellation .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-ecosystem-constellation .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-ecosystem-constellation .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-ecosystem-constellation h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-ecosystem-constellation p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-ecosystem-constellation .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-ecosystem-constellation .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/ecosystem-constellation/registry-item.json b/registry/components/ecosystem-constellation/registry-item.json
new file mode 100644
index 0000000000..737ffa14f0
--- /dev/null
+++ b/registry/components/ecosystem-constellation/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "ecosystem-constellation",
+  "type": "hyperframes:component",
+  "title": "Ecosystem Constellation",
+  "description": "Orbiting product nodes connect into a constellation graph.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "ecosystem-constellation.html",
+      "target": "compositions/components/ecosystem-constellation.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/ecosystem-constellation.png"
+  }
+}
diff --git a/registry/components/frosted-glass-wipe/demo.html b/registry/components/frosted-glass-wipe/demo.html
new file mode 100644
index 0000000000..9863a5816c
--- /dev/null
+++ b/registry/components/frosted-glass-wipe/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Frosted Glass Wipe - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-frosted-glass-wipe {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-frosted-glass-wipe {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-frosted-glass-wipe .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-frosted-glass-wipe .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-frosted-glass-wipe .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-frosted-glass-wipe .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-frosted-glass-wipe .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="frosted-glass-wipe-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-frosted-glass-wipe">
+          <div class="scene from">Before</div>
+          <div class="scene to">Frosted Glass Wipe</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-frosted-glass-wipe .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-frosted-glass-wipe .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["frosted-glass-wipe-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/frosted-glass-wipe/frosted-glass-wipe.html b/registry/components/frosted-glass-wipe/frosted-glass-wipe.html
new file mode 100644
index 0000000000..28032d35f3
--- /dev/null
+++ b/registry/components/frosted-glass-wipe/frosted-glass-wipe.html
@@ -0,0 +1,82 @@
+<!--
+  Frosted Glass Wipe - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-frosted-glass-wipe">
+  <div class="scene from">Before</div>
+  <div class="scene to">Frosted Glass Wipe</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-frosted-glass-wipe {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-frosted-glass-wipe {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-frosted-glass-wipe .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-frosted-glass-wipe .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-frosted-glass-wipe .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-frosted-glass-wipe .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-frosted-glass-wipe .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-frosted-glass-wipe .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-frosted-glass-wipe .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-frosted-glass-wipe .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-frosted-glass-wipe .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/frosted-glass-wipe/registry-item.json b/registry/components/frosted-glass-wipe/registry-item.json
new file mode 100644
index 0000000000..d228fb36a1
--- /dev/null
+++ b/registry/components/frosted-glass-wipe/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "frosted-glass-wipe",
+  "type": "hyperframes:component",
+  "title": "Frosted Glass Wipe",
+  "description": "A scene transition through a moving frosted glass pane.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "frosted-glass-wipe.html",
+      "target": "compositions/components/frosted-glass-wipe.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/frosted-glass-wipe.png"
+  }
+}
diff --git a/registry/components/github-stars/demo.html b/registry/components/github-stars/demo.html
new file mode 100644
index 0000000000..4d4c05eeb0
--- /dev/null
+++ b/registry/components/github-stars/demo.html
@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>GitHub Stars - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-github-stars {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-github-stars {
+        width: 700px;
+        border-radius: 30px;
+        padding: 34px;
+        background: #0f172a;
+        color: #fff;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-github-stars header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+      .hf-remocn-github-stars .avatar {
+        width: 70px;
+        height: 70px;
+        border-radius: 22px;
+        background: linear-gradient(135deg, #38bdf8, #8b5cf6);
+      }
+      .hf-remocn-github-stars h3 {
+        margin: 0;
+        font-size: 36px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-github-stars p {
+        color: #94a3b8;
+        margin: 4px 0 0;
+      }
+      .hf-remocn-github-stars .stat {
+        margin-top: 30px;
+        font-size: 82px;
+        font-weight: 900;
+        letter-spacing: -0.08em;
+        transform: translateY(var(--hf-stat-y, 0px));
+      }
+      .hf-remocn-github-stars .avatars {
+        display: flex;
+        margin-top: 18px;
+      }
+      .hf-remocn-github-stars .avatars span {
+        width: 46px;
+        height: 46px;
+        border-radius: 999px;
+        border: 3px solid #0f172a;
+        margin-left: -10px;
+        background: var(--c);
+        opacity: var(--hf-avatar-opacity, 1);
+        transform: translateY(var(--hf-avatar-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="github-stars-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-github-stars">
+          <header>
+            <div class="avatar"></div>
+            <div>
+              <h3>GitHub Stars</h3>
+              <p>A repo star-count card with avatars, velocity line, and odometer.</p>
+            </div>
+          </header>
+          <div class="stat">30.6K</div>
+          <div class="avatars">
+            <span style="--c: #38bdf8"></span><span style="--c: #f472b6"></span
+            ><span style="--c: #34d399"></span><span style="--c: #f59e0b"></span
+            ><span style="--c: #a78bfa"></span><span style="--c: #fb7185"></span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-github-stars .stat",
+          { "--hf-stat-y": "28px", opacity: 0 },
+          { "--hf-stat-y": "0px", opacity: 1, duration: 0.46, ease: "back.out(1.6)" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-github-stars .avatars span",
+          { "--hf-avatar-y": "18px", "--hf-avatar-opacity": 0 },
+          {
+            "--hf-avatar-y": "0px",
+            "--hf-avatar-opacity": 1,
+            duration: 0.28,
+            stagger: 0.05,
+            ease: "power2.out",
+          },
+          startTime + 0.22,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["github-stars-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/github-stars/github-stars.html b/registry/components/github-stars/github-stars.html
new file mode 100644
index 0000000000..278469368b
--- /dev/null
+++ b/registry/components/github-stars/github-stars.html
@@ -0,0 +1,87 @@
+<!--
+  GitHub Stars - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-github-stars">
+  <header>
+    <div class="avatar"></div>
+    <div>
+      <h3>GitHub Stars</h3>
+      <p>A repo star-count card with avatars, velocity line, and odometer.</p>
+    </div>
+  </header>
+  <div class="stat">30.6K</div>
+  <div class="avatars">
+    <span style="--c: #38bdf8"></span><span style="--c: #f472b6"></span
+    ><span style="--c: #34d399"></span><span style="--c: #f59e0b"></span
+    ><span style="--c: #a78bfa"></span><span style="--c: #fb7185"></span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-github-stars {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-github-stars {
+    width: 700px;
+    border-radius: 30px;
+    padding: 34px;
+    background: #0f172a;
+    color: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-github-stars header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .hf-remocn-github-stars .avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 22px;
+    background: linear-gradient(135deg, #38bdf8, #8b5cf6);
+  }
+  .hf-remocn-github-stars h3 {
+    margin: 0;
+    font-size: 36px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-github-stars p {
+    color: #94a3b8;
+    margin: 4px 0 0;
+  }
+  .hf-remocn-github-stars .stat {
+    margin-top: 30px;
+    font-size: 82px;
+    font-weight: 900;
+    letter-spacing: -0.08em;
+    transform: translateY(var(--hf-stat-y, 0px));
+  }
+  .hf-remocn-github-stars .avatars {
+    display: flex;
+    margin-top: 18px;
+  }
+  .hf-remocn-github-stars .avatars span {
+    width: 46px;
+    height: 46px;
+    border-radius: 999px;
+    border: 3px solid #0f172a;
+    margin-left: -10px;
+    background: var(--c);
+    opacity: var(--hf-avatar-opacity, 1);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-github-stars .stat', { '--hf-stat-y': '28px', opacity: 0 }, { '--hf-stat-y': '0px', opacity: 1, duration: 0.46, ease: 'back.out(1.6)' }, startTime); tl.fromTo('.hf-remocn-github-stars .avatars span', { '--hf-avatar-y': '18px', '--hf-avatar-opacity': 0 }, { '--hf-avatar-y': '0px', '--hf-avatar-opacity': 1, duration: 0.28, stagger: 0.05, ease: 'power2.out' }, startTime + 0.22);
+-->
diff --git a/registry/components/github-stars/registry-item.json b/registry/components/github-stars/registry-item.json
new file mode 100644
index 0000000000..c9bc745ef3
--- /dev/null
+++ b/registry/components/github-stars/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "github-stars",
+  "type": "hyperframes:component",
+  "title": "GitHub Stars",
+  "description": "A repo star-count card with avatars, velocity line, and odometer.",
+  "tags": ["social-overlay", "remocn-port"],
+  "files": [
+    {
+      "path": "github-stars.html",
+      "target": "compositions/components/github-stars.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/github-stars.png"
+  }
+}
diff --git a/registry/components/glass-code-block/demo.html b/registry/components/glass-code-block/demo.html
new file mode 100644
index 0000000000..29575ed305
--- /dev/null
+++ b/registry/components/glass-code-block/demo.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Glass Code Block - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-glass-code-block {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-glass-code-block {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-glass-code-block .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+      }
+      .hf-remocn-glass-code-block .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-glass-code-block .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-glass-code-block .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+      }
+      .hf-remocn-glass-code-block .editor {
+        padding: 22px;
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-glass-code-block .line {
+        display: block;
+        height: 16px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-glass-code-block .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="glass-code-block-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-glass-code-block">
+          <div class="chrome"><span class="dot"></span><span>Glass Code Block</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=glass-code-block</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-glass-code-block .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-glass-code-block .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["glass-code-block-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/glass-code-block/glass-code-block.html b/registry/components/glass-code-block/glass-code-block.html
new file mode 100644
index 0000000000..377ae96f76
--- /dev/null
+++ b/registry/components/glass-code-block/glass-code-block.html
@@ -0,0 +1,92 @@
+<!--
+  Glass Code Block - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-glass-code-block">
+  <div class="chrome"><span class="dot"></span><span>Glass Code Block</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=glass-code-block</div>
+</div>
+
+<style>
+  .hf-remocn-glass-code-block {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-glass-code-block {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-glass-code-block .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-glass-code-block .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-glass-code-block .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-glass-code-block .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-glass-code-block .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-glass-code-block .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-glass-code-block .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-glass-code-block .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-glass-code-block .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/registry/components/glass-code-block/registry-item.json b/registry/components/glass-code-block/registry-item.json
new file mode 100644
index 0000000000..cc8486cf65
--- /dev/null
+++ b/registry/components/glass-code-block/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "glass-code-block",
+  "type": "hyperframes:component",
+  "title": "Glass Code Block",
+  "description": "A translucent code block with scanned line highlights.",
+  "tags": ["code-animation", "remocn-port"],
+  "files": [
+    {
+      "path": "glass-code-block.html",
+      "target": "compositions/components/glass-code-block.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/glass-code-block.png"
+  }
+}
diff --git a/registry/components/hero-device-assemble/demo.html b/registry/components/hero-device-assemble/demo.html
new file mode 100644
index 0000000000..82162fb67a
--- /dev/null
+++ b/registry/components/hero-device-assemble/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Hero Device Assemble - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-hero-device-assemble {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-hero-device-assemble {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-hero-device-assemble .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-hero-device-assemble .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-hero-device-assemble .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-hero-device-assemble .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-hero-device-assemble .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-hero-device-assemble h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-hero-device-assemble p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="hero-device-assemble-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-hero-device-assemble">
+          <div class="panel prompt">
+            <h3>Hero Device Assemble</h3>
+            <p>A landing-page device hero assembles from layers.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-hero-device-assemble .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-hero-device-assemble .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["hero-device-assemble-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/hero-device-assemble/hero-device-assemble.html b/registry/components/hero-device-assemble/hero-device-assemble.html
new file mode 100644
index 0000000000..5b02dba6fb
--- /dev/null
+++ b/registry/components/hero-device-assemble/hero-device-assemble.html
@@ -0,0 +1,94 @@
+<!--
+  Hero Device Assemble - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-hero-device-assemble">
+  <div class="panel prompt">
+    <h3>Hero Device Assemble</h3>
+    <p>A landing-page device hero assembles from layers.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-hero-device-assemble {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-hero-device-assemble {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-hero-device-assemble .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-hero-device-assemble .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-hero-device-assemble .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-hero-device-assemble .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-hero-device-assemble .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-hero-device-assemble h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-hero-device-assemble p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-hero-device-assemble .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-hero-device-assemble .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/hero-device-assemble/registry-item.json b/registry/components/hero-device-assemble/registry-item.json
new file mode 100644
index 0000000000..36a577d824
--- /dev/null
+++ b/registry/components/hero-device-assemble/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "hero-device-assemble",
+  "type": "hyperframes:component",
+  "title": "Hero Device Assemble",
+  "description": "A landing-page device hero assembles from layers.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "hero-device-assemble.html",
+      "target": "compositions/components/hero-device-assemble.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hero-device-assemble.png"
+  }
+}
diff --git a/registry/components/image-expand-to-fullscreen/demo.html b/registry/components/image-expand-to-fullscreen/demo.html
new file mode 100644
index 0000000000..74dd1dc18f
--- /dev/null
+++ b/registry/components/image-expand-to-fullscreen/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Image Expand to Fullscreen - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-image-expand-to-fullscreen {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-image-expand-to-fullscreen {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-image-expand-to-fullscreen .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-image-expand-to-fullscreen .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-image-expand-to-fullscreen .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-image-expand-to-fullscreen .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-image-expand-to-fullscreen .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="image-expand-to-fullscreen-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-image-expand-to-fullscreen">
+          <div class="scene from">Before</div>
+          <div class="scene to">Image Expand to Fullscreen</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-image-expand-to-fullscreen .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-image-expand-to-fullscreen .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["image-expand-to-fullscreen-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/image-expand-to-fullscreen/image-expand-to-fullscreen.html b/registry/components/image-expand-to-fullscreen/image-expand-to-fullscreen.html
new file mode 100644
index 0000000000..7a1a102790
--- /dev/null
+++ b/registry/components/image-expand-to-fullscreen/image-expand-to-fullscreen.html
@@ -0,0 +1,82 @@
+<!--
+  Image Expand to Fullscreen - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-image-expand-to-fullscreen">
+  <div class="scene from">Before</div>
+  <div class="scene to">Image Expand to Fullscreen</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-image-expand-to-fullscreen {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-image-expand-to-fullscreen {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-image-expand-to-fullscreen .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-image-expand-to-fullscreen .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-image-expand-to-fullscreen .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-image-expand-to-fullscreen .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-image-expand-to-fullscreen .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-image-expand-to-fullscreen .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-image-expand-to-fullscreen .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-image-expand-to-fullscreen .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-image-expand-to-fullscreen .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/image-expand-to-fullscreen/registry-item.json b/registry/components/image-expand-to-fullscreen/registry-item.json
new file mode 100644
index 0000000000..99b66e7f49
--- /dev/null
+++ b/registry/components/image-expand-to-fullscreen/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "image-expand-to-fullscreen",
+  "type": "hyperframes:component",
+  "title": "Image Expand to Fullscreen",
+  "description": "An image tile expands into a full-frame scene transition.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "image-expand-to-fullscreen.html",
+      "target": "compositions/components/image-expand-to-fullscreen.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/image-expand-to-fullscreen.png"
+  }
+}
diff --git a/registry/components/infinite-bento-pan/demo.html b/registry/components/infinite-bento-pan/demo.html
new file mode 100644
index 0000000000..145f96ef48
--- /dev/null
+++ b/registry/components/infinite-bento-pan/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Infinite Bento Pan - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-infinite-bento-pan {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-infinite-bento-pan {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-infinite-bento-pan .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-infinite-bento-pan .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-infinite-bento-pan .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-infinite-bento-pan .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-infinite-bento-pan .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-infinite-bento-pan h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-infinite-bento-pan p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="infinite-bento-pan-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-infinite-bento-pan">
+          <div class="panel prompt">
+            <h3>Infinite Bento Pan</h3>
+            <p>A bento board pans forever with feature cards at different depths.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-infinite-bento-pan .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-infinite-bento-pan .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["infinite-bento-pan-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/infinite-bento-pan/infinite-bento-pan.html b/registry/components/infinite-bento-pan/infinite-bento-pan.html
new file mode 100644
index 0000000000..07e1d73b83
--- /dev/null
+++ b/registry/components/infinite-bento-pan/infinite-bento-pan.html
@@ -0,0 +1,94 @@
+<!--
+  Infinite Bento Pan - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-infinite-bento-pan">
+  <div class="panel prompt">
+    <h3>Infinite Bento Pan</h3>
+    <p>A bento board pans forever with feature cards at different depths.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-infinite-bento-pan {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-infinite-bento-pan {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-infinite-bento-pan .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-infinite-bento-pan .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-infinite-bento-pan .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-infinite-bento-pan .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-infinite-bento-pan .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-infinite-bento-pan h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-infinite-bento-pan p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-infinite-bento-pan .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-infinite-bento-pan .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/infinite-bento-pan/registry-item.json b/registry/components/infinite-bento-pan/registry-item.json
new file mode 100644
index 0000000000..bbd480bf91
--- /dev/null
+++ b/registry/components/infinite-bento-pan/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "infinite-bento-pan",
+  "type": "hyperframes:component",
+  "title": "Infinite Bento Pan",
+  "description": "A bento board pans forever with feature cards at different depths.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "infinite-bento-pan.html",
+      "target": "compositions/components/infinite-bento-pan.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/infinite-bento-pan.png"
+  }
+}
diff --git a/registry/components/infinite-marquee/demo.html b/registry/components/infinite-marquee/demo.html
new file mode 100644
index 0000000000..798ccc03e4
--- /dev/null
+++ b/registry/components/infinite-marquee/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Infinite Marquee - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-infinite-marquee {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-infinite-marquee {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-infinite-marquee .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-infinite-marquee .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-infinite-marquee .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-infinite-marquee .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-infinite-marquee .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-infinite-marquee h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-infinite-marquee p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="infinite-marquee-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-infinite-marquee">
+          <div class="panel prompt">
+            <h3>Infinite Marquee</h3>
+            <p>A looping marquee primitive for logos, tags, and feature pills.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-infinite-marquee .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-infinite-marquee .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["infinite-marquee-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/infinite-marquee/infinite-marquee.html b/registry/components/infinite-marquee/infinite-marquee.html
new file mode 100644
index 0000000000..71c2b234e7
--- /dev/null
+++ b/registry/components/infinite-marquee/infinite-marquee.html
@@ -0,0 +1,94 @@
+<!--
+  Infinite Marquee - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-infinite-marquee">
+  <div class="panel prompt">
+    <h3>Infinite Marquee</h3>
+    <p>A looping marquee primitive for logos, tags, and feature pills.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-infinite-marquee {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-infinite-marquee {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-infinite-marquee .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-infinite-marquee .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-infinite-marquee .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-infinite-marquee .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-infinite-marquee .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-infinite-marquee h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-infinite-marquee p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-infinite-marquee .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-infinite-marquee .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/infinite-marquee/registry-item.json b/registry/components/infinite-marquee/registry-item.json
new file mode 100644
index 0000000000..8ac3fddab1
--- /dev/null
+++ b/registry/components/infinite-marquee/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "infinite-marquee",
+  "type": "hyperframes:component",
+  "title": "Infinite Marquee",
+  "description": "A looping marquee primitive for logos, tags, and feature pills.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "infinite-marquee.html",
+      "target": "compositions/components/infinite-marquee.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/infinite-marquee.png"
+  }
+}
diff --git a/registry/components/landing-code-showcase/demo.html b/registry/components/landing-code-showcase/demo.html
new file mode 100644
index 0000000000..3302e38e26
--- /dev/null
+++ b/registry/components/landing-code-showcase/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Landing Code Showcase - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-landing-code-showcase {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-landing-code-showcase {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-landing-code-showcase .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-landing-code-showcase .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-landing-code-showcase .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-landing-code-showcase .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-landing-code-showcase .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-landing-code-showcase h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-landing-code-showcase p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="landing-code-showcase-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-landing-code-showcase">
+          <div class="panel prompt">
+            <h3>Landing Code Showcase</h3>
+            <p>A product hero where code output becomes a live preview card.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-landing-code-showcase .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-landing-code-showcase .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["landing-code-showcase-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/landing-code-showcase/landing-code-showcase.html b/registry/components/landing-code-showcase/landing-code-showcase.html
new file mode 100644
index 0000000000..5f21c24f73
--- /dev/null
+++ b/registry/components/landing-code-showcase/landing-code-showcase.html
@@ -0,0 +1,94 @@
+<!--
+  Landing Code Showcase - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-landing-code-showcase">
+  <div class="panel prompt">
+    <h3>Landing Code Showcase</h3>
+    <p>A product hero where code output becomes a live preview card.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-landing-code-showcase {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-landing-code-showcase {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-landing-code-showcase .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-landing-code-showcase .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-landing-code-showcase .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-landing-code-showcase .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-landing-code-showcase .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-landing-code-showcase h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-landing-code-showcase p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-landing-code-showcase .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-landing-code-showcase .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/landing-code-showcase/registry-item.json b/registry/components/landing-code-showcase/registry-item.json
new file mode 100644
index 0000000000..fc92759669
--- /dev/null
+++ b/registry/components/landing-code-showcase/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "landing-code-showcase",
+  "type": "hyperframes:component",
+  "title": "Landing Code Showcase",
+  "description": "A product hero where code output becomes a live preview card.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "landing-code-showcase.html",
+      "target": "compositions/components/landing-code-showcase.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/landing-code-showcase.png"
+  }
+}
diff --git a/registry/components/live-code-compilation/demo.html b/registry/components/live-code-compilation/demo.html
new file mode 100644
index 0000000000..40ff3e7570
--- /dev/null
+++ b/registry/components/live-code-compilation/demo.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Live Code Compilation - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-live-code-compilation {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-live-code-compilation {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-live-code-compilation .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+      }
+      .hf-remocn-live-code-compilation .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-live-code-compilation .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-live-code-compilation .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+      }
+      .hf-remocn-live-code-compilation .editor {
+        padding: 22px;
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-live-code-compilation .line {
+        display: block;
+        height: 16px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-live-code-compilation .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="live-code-compilation-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-live-code-compilation">
+          <div class="chrome"><span class="dot"></span><span>Live Code Compilation</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=live-code-compilation</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-live-code-compilation .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-live-code-compilation .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["live-code-compilation-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/live-code-compilation/live-code-compilation.html b/registry/components/live-code-compilation/live-code-compilation.html
new file mode 100644
index 0000000000..974b3d97d8
--- /dev/null
+++ b/registry/components/live-code-compilation/live-code-compilation.html
@@ -0,0 +1,92 @@
+<!--
+  Live Code Compilation - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-live-code-compilation">
+  <div class="chrome"><span class="dot"></span><span>Live Code Compilation</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=live-code-compilation</div>
+</div>
+
+<style>
+  .hf-remocn-live-code-compilation {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-live-code-compilation {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-live-code-compilation .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-live-code-compilation .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-live-code-compilation .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-live-code-compilation .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-live-code-compilation .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-live-code-compilation .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-live-code-compilation .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-live-code-compilation .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-live-code-compilation .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/registry/components/live-code-compilation/registry-item.json b/registry/components/live-code-compilation/registry-item.json
new file mode 100644
index 0000000000..a494af35d7
--- /dev/null
+++ b/registry/components/live-code-compilation/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "live-code-compilation",
+  "type": "hyperframes:component",
+  "title": "Live Code Compilation",
+  "description": "A code editor compiles into a preview panel with status ticks.",
+  "tags": ["code-animation", "remocn-port"],
+  "files": [
+    {
+      "path": "live-code-compilation.html",
+      "target": "compositions/components/live-code-compilation.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/live-code-compilation.png"
+  }
+}
diff --git a/registry/components/mesh-gradient-bg/demo.html b/registry/components/mesh-gradient-bg/demo.html
new file mode 100644
index 0000000000..98fa2fd328
--- /dev/null
+++ b/registry/components/mesh-gradient-bg/demo.html
@@ -0,0 +1,186 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Mesh Gradient Background - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-mesh-gradient-bg {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-mesh-gradient-bg {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #080b12;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-mesh-gradient-bg .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            #60a5fa 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            #f472b6 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            #34d399 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-mesh-gradient-bg .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 26px;
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-mesh-gradient-bg .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-mesh-gradient-bg .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-mesh-gradient-bg h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-mesh-gradient-bg p {
+        margin: 8px 0 0;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="mesh-gradient-bg-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-mesh-gradient-bg">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Mesh Gradient Background</h3>
+              <p>A render-safe mesh gradient using animated radial layers.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-mesh-gradient-bg .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-mesh-gradient-bg .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-mesh-gradient-bg .particle",
+          { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+          {
+            "--hf-po": 1,
+            "--hf-px": () => Math.cos(gsap.utils.wrap(0, 6.28, 1)) * 240 + "px",
+            "--hf-py": "-180px",
+            "--hf-pr": "360deg",
+            duration: 0.8,
+            stagger: 0.015,
+            ease: "power2.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["mesh-gradient-bg-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/mesh-gradient-bg/mesh-gradient-bg.html b/registry/components/mesh-gradient-bg/mesh-gradient-bg.html
new file mode 100644
index 0000000000..bae8e3c4d7
--- /dev/null
+++ b/registry/components/mesh-gradient-bg/mesh-gradient-bg.html
@@ -0,0 +1,101 @@
+<!--
+  Mesh Gradient Background - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-mesh-gradient-bg">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Mesh Gradient Background</h3>
+      <p>A render-safe mesh gradient using animated radial layers.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-mesh-gradient-bg {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-mesh-gradient-bg {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-mesh-gradient-bg .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        #60a5fa 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        #f472b6 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
+  }
+  .hf-remocn-mesh-gradient-bg .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-mesh-gradient-bg .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-mesh-gradient-bg .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-mesh-gradient-bg h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-mesh-gradient-bg p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-mesh-gradient-bg .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-mesh-gradient-bg .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-mesh-gradient-bg .particle', { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': () => (Math.cos(gsap.utils.wrap(0, 6.28, 1)) * 240) + 'px', '--hf-py': '-180px', '--hf-pr': '360deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/mesh-gradient-bg/registry-item.json b/registry/components/mesh-gradient-bg/registry-item.json
new file mode 100644
index 0000000000..bd76f31dcf
--- /dev/null
+++ b/registry/components/mesh-gradient-bg/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "mesh-gradient-bg",
+  "type": "hyperframes:component",
+  "title": "Mesh Gradient Background",
+  "description": "A render-safe mesh gradient using animated radial layers.",
+  "tags": ["effect", "remocn-port"],
+  "files": [
+    {
+      "path": "mesh-gradient-bg.html",
+      "target": "compositions/components/mesh-gradient-bg.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png"
+  }
+}
diff --git a/registry/components/micro-scale-fade/demo.html b/registry/components/micro-scale-fade/demo.html
new file mode 100644
index 0000000000..b4db68de29
--- /dev/null
+++ b/registry/components/micro-scale-fade/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Micro Scale Fade - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-micro-scale-fade {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-micro-scale-fade {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-micro-scale-fade .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-micro-scale-fade .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-micro-scale-fade .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-micro-scale-fade .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-micro-scale-fade .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="micro-scale-fade-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-micro-scale-fade">
+          <div class="scene from">Before</div>
+          <div class="scene to">Micro Scale Fade</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-micro-scale-fade .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-micro-scale-fade .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["micro-scale-fade-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/micro-scale-fade/micro-scale-fade.html b/registry/components/micro-scale-fade/micro-scale-fade.html
new file mode 100644
index 0000000000..43be7536f1
--- /dev/null
+++ b/registry/components/micro-scale-fade/micro-scale-fade.html
@@ -0,0 +1,82 @@
+<!--
+  Micro Scale Fade - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-micro-scale-fade">
+  <div class="scene from">Before</div>
+  <div class="scene to">Micro Scale Fade</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-micro-scale-fade {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-micro-scale-fade {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-micro-scale-fade .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-micro-scale-fade .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-micro-scale-fade .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-micro-scale-fade .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-micro-scale-fade .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-micro-scale-fade .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-micro-scale-fade .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-micro-scale-fade .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-micro-scale-fade .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/micro-scale-fade/registry-item.json b/registry/components/micro-scale-fade/registry-item.json
new file mode 100644
index 0000000000..00e0711f48
--- /dev/null
+++ b/registry/components/micro-scale-fade/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "micro-scale-fade",
+  "type": "hyperframes:component",
+  "title": "Micro Scale Fade",
+  "description": "A tiny scale-and-opacity transition for UI state changes.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "micro-scale-fade.html",
+      "target": "compositions/components/micro-scale-fade.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/micro-scale-fade.png"
+  }
+}
diff --git a/registry/components/opencode/demo.html b/registry/components/opencode/demo.html
new file mode 100644
index 0000000000..070ceae731
--- /dev/null
+++ b/registry/components/opencode/demo.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>OpenCode - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-opencode {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-opencode {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-opencode .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+      }
+      .hf-remocn-opencode .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-opencode .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-opencode .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+      }
+      .hf-remocn-opencode .editor {
+        padding: 22px;
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-opencode .line {
+        display: block;
+        height: 16px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-opencode .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="opencode-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-opencode">
+          <div class="chrome"><span class="dot"></span><span>OpenCode</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=opencode</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-opencode .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-opencode .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["opencode-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/opencode/opencode.html b/registry/components/opencode/opencode.html
new file mode 100644
index 0000000000..62eb1cff2c
--- /dev/null
+++ b/registry/components/opencode/opencode.html
@@ -0,0 +1,92 @@
+<!--
+  OpenCode - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-opencode">
+  <div class="chrome"><span class="dot"></span><span>OpenCode</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=opencode</div>
+</div>
+
+<style>
+  .hf-remocn-opencode {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-opencode {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-opencode .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-opencode .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-opencode .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-opencode .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-opencode .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-opencode .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-opencode .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-opencode .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-opencode .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/registry/components/opencode/registry-item.json b/registry/components/opencode/registry-item.json
new file mode 100644
index 0000000000..632e704db7
--- /dev/null
+++ b/registry/components/opencode/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "opencode",
+  "type": "hyperframes:component",
+  "title": "OpenCode",
+  "description": "A terminal-first coding agent surface with streaming task output.",
+  "tags": ["code-animation", "remocn-port"],
+  "files": [
+    {
+      "path": "opencode.html",
+      "target": "compositions/components/opencode.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/opencode.png"
+  }
+}
diff --git a/registry/components/pricing-tier-focus/demo.html b/registry/components/pricing-tier-focus/demo.html
new file mode 100644
index 0000000000..9cbfb11583
--- /dev/null
+++ b/registry/components/pricing-tier-focus/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Pricing Tier Focus - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-pricing-tier-focus {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-pricing-tier-focus {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-pricing-tier-focus .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-pricing-tier-focus .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-pricing-tier-focus .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-pricing-tier-focus .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-pricing-tier-focus .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-pricing-tier-focus h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-pricing-tier-focus p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="pricing-tier-focus-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-pricing-tier-focus">
+          <div class="panel prompt">
+            <h3>Pricing Tier Focus</h3>
+            <p>Pricing cards shift focus from free to pro with spotlight emphasis.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-pricing-tier-focus .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-pricing-tier-focus .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["pricing-tier-focus-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/pricing-tier-focus/pricing-tier-focus.html b/registry/components/pricing-tier-focus/pricing-tier-focus.html
new file mode 100644
index 0000000000..5e44779e99
--- /dev/null
+++ b/registry/components/pricing-tier-focus/pricing-tier-focus.html
@@ -0,0 +1,94 @@
+<!--
+  Pricing Tier Focus - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-pricing-tier-focus">
+  <div class="panel prompt">
+    <h3>Pricing Tier Focus</h3>
+    <p>Pricing cards shift focus from free to pro with spotlight emphasis.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-pricing-tier-focus {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-pricing-tier-focus {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-pricing-tier-focus .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-pricing-tier-focus .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-pricing-tier-focus .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-pricing-tier-focus .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-pricing-tier-focus .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-pricing-tier-focus h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-pricing-tier-focus p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-pricing-tier-focus .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-pricing-tier-focus .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/pricing-tier-focus/registry-item.json b/registry/components/pricing-tier-focus/registry-item.json
new file mode 100644
index 0000000000..a34cdade61
--- /dev/null
+++ b/registry/components/pricing-tier-focus/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "pricing-tier-focus",
+  "type": "hyperframes:component",
+  "title": "Pricing Tier Focus",
+  "description": "Pricing cards shift focus from free to pro with spotlight emphasis.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "pricing-tier-focus.html",
+      "target": "compositions/components/pricing-tier-focus.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/pricing-tier-focus.png"
+  }
+}
diff --git a/registry/components/progress-steps/demo.html b/registry/components/progress-steps/demo.html
new file mode 100644
index 0000000000..8575ad3089
--- /dev/null
+++ b/registry/components/progress-steps/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Progress Steps - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-progress-steps {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-progress-steps {
+        width: 560px;
+        border-radius: 22px;
+        background: #fff;
+        padding: 22px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-progress-steps .row {
+        height: 52px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        transform: translateX(var(--hf-row-x, 0px));
+        opacity: var(--hf-row-opacity, 1);
+      }
+      .hf-remocn-progress-steps .label {
+        font-weight: 800;
+      }
+      .hf-remocn-progress-steps .hint {
+        color: #71717a;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="progress-steps-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-progress-steps">
+          <div class="row">
+            <span class="label">Progress Steps</span><span class="hint">Ctrl K</span>
+          </div>
+          <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+          <div class="row">
+            <span class="label">Disabled</span><span class="hint">pending</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-progress-steps .row",
+          { "--hf-row-x": "-16px", "--hf-row-opacity": 0 },
+          {
+            "--hf-row-x": "0px",
+            "--hf-row-opacity": 1,
+            duration: 0.22,
+            stagger: 0.07,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["progress-steps-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/progress-steps/progress-steps.html b/registry/components/progress-steps/progress-steps.html
new file mode 100644
index 0000000000..c116905663
--- /dev/null
+++ b/registry/components/progress-steps/progress-steps.html
@@ -0,0 +1,55 @@
+<!--
+  Progress Steps - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-progress-steps">
+  <div class="row"><span class="label">Progress Steps</span><span class="hint">Ctrl K</span></div>
+  <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+  <div class="row"><span class="label">Disabled</span><span class="hint">pending</span></div>
+</div>
+
+<style>
+  .hf-remocn-progress-steps {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-progress-steps {
+    width: 560px;
+    border-radius: 22px;
+    background: #fff;
+    padding: 22px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-progress-steps .row {
+    height: 52px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    transform: translateX(var(--hf-row-x, 0px));
+    opacity: var(--hf-row-opacity, 1);
+  }
+  .hf-remocn-progress-steps .label {
+    font-weight: 800;
+  }
+  .hf-remocn-progress-steps .hint {
+    color: #71717a;
+    font-size: 13px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-progress-steps .row', { '--hf-row-x': '-16px', '--hf-row-opacity': 0 }, { '--hf-row-x': '0px', '--hf-row-opacity': 1, duration: 0.22, stagger: 0.07, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/progress-steps/registry-item.json b/registry/components/progress-steps/registry-item.json
new file mode 100644
index 0000000000..9a73efcab0
--- /dev/null
+++ b/registry/components/progress-steps/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "progress-steps",
+  "type": "hyperframes:component",
+  "title": "Progress Steps",
+  "description": "A multi-step progress indicator with active, pending, and done states.",
+  "tags": ["ui-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "progress-steps.html",
+      "target": "compositions/components/progress-steps.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/progress-steps.png"
+  }
+}
diff --git a/registry/components/registry/demo.html b/registry/components/registry/demo.html
new file mode 100644
index 0000000000..64b21c25c2
--- /dev/null
+++ b/registry/components/registry/demo.html
@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Registry - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-registry {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-registry {
+        width: 560px;
+        border-radius: 22px;
+        background: #fff;
+        padding: 22px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-registry .row {
+        height: 52px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        transform: translateX(var(--hf-row-x, 0px));
+        opacity: var(--hf-row-opacity, 1);
+      }
+      .hf-remocn-registry .label {
+        font-weight: 800;
+      }
+      .hf-remocn-registry .hint {
+        color: #71717a;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="registry-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-registry">
+          <div class="row"><span class="label">Registry</span><span class="hint">Ctrl K</span></div>
+          <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+          <div class="row">
+            <span class="label">Disabled</span><span class="hint">pending</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-registry .row",
+          { "--hf-row-x": "-16px", "--hf-row-opacity": 0 },
+          {
+            "--hf-row-x": "0px",
+            "--hf-row-opacity": 1,
+            duration: 0.22,
+            stagger: 0.07,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["registry-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/registry/registry-item.json b/registry/components/registry/registry-item.json
new file mode 100644
index 0000000000..0ef5b5e3a7
--- /dev/null
+++ b/registry/components/registry/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "registry",
+  "type": "hyperframes:component",
+  "title": "Registry",
+  "description": "A catalog registry card for showing installable component metadata.",
+  "tags": ["ui-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "registry.html",
+      "target": "compositions/components/registry.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/registry.png"
+  }
+}
diff --git a/registry/components/registry/registry.html b/registry/components/registry/registry.html
new file mode 100644
index 0000000000..31fc2fb0d2
--- /dev/null
+++ b/registry/components/registry/registry.html
@@ -0,0 +1,55 @@
+<!--
+  Registry - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-registry">
+  <div class="row"><span class="label">Registry</span><span class="hint">Ctrl K</span></div>
+  <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+  <div class="row"><span class="label">Disabled</span><span class="hint">pending</span></div>
+</div>
+
+<style>
+  .hf-remocn-registry {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-registry {
+    width: 560px;
+    border-radius: 22px;
+    background: #fff;
+    padding: 22px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-registry .row {
+    height: 52px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    transform: translateX(var(--hf-row-x, 0px));
+    opacity: var(--hf-row-opacity, 1);
+  }
+  .hf-remocn-registry .label {
+    font-weight: 800;
+  }
+  .hf-remocn-registry .hint {
+    color: #71717a;
+    font-size: 13px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-registry .row', { '--hf-row-x': '-16px', '--hf-row-opacity': 0 }, { '--hf-row-x': '0px', '--hf-row-opacity': 1, duration: 0.22, stagger: 0.07, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/remocn-ui/demo.html b/registry/components/remocn-ui/demo.html
new file mode 100644
index 0000000000..0860dc43cc
--- /dev/null
+++ b/registry/components/remocn-ui/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Remocn UI - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-remocn-ui {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-remocn-ui {
+        width: 560px;
+        border-radius: 22px;
+        background: #fff;
+        padding: 22px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-remocn-ui .row {
+        height: 52px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        transform: translateX(var(--hf-row-x, 0px));
+        opacity: var(--hf-row-opacity, 1);
+      }
+      .hf-remocn-remocn-ui .label {
+        font-weight: 800;
+      }
+      .hf-remocn-remocn-ui .hint {
+        color: #71717a;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="remocn-ui-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-remocn-ui">
+          <div class="row">
+            <span class="label">Remocn UI</span><span class="hint">Ctrl K</span>
+          </div>
+          <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+          <div class="row">
+            <span class="label">Disabled</span><span class="hint">pending</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-remocn-ui .row",
+          { "--hf-row-x": "-16px", "--hf-row-opacity": 0 },
+          {
+            "--hf-row-x": "0px",
+            "--hf-row-opacity": 1,
+            duration: 0.22,
+            stagger: 0.07,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["remocn-ui-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/remocn-ui/registry-item.json b/registry/components/remocn-ui/registry-item.json
new file mode 100644
index 0000000000..aaf9751975
--- /dev/null
+++ b/registry/components/remocn-ui/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "remocn-ui",
+  "type": "hyperframes:component",
+  "title": "Remocn UI",
+  "description": "A compact kit card that explains the remocn primitives now available in HyperFrames.",
+  "tags": ["ui-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "remocn-ui.html",
+      "target": "compositions/components/remocn-ui.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/remocn-ui.png"
+  }
+}
diff --git a/registry/components/remocn-ui/remocn-ui.html b/registry/components/remocn-ui/remocn-ui.html
new file mode 100644
index 0000000000..a7ffd204d0
--- /dev/null
+++ b/registry/components/remocn-ui/remocn-ui.html
@@ -0,0 +1,55 @@
+<!--
+  Remocn UI - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-remocn-ui">
+  <div class="row"><span class="label">Remocn UI</span><span class="hint">Ctrl K</span></div>
+  <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+  <div class="row"><span class="label">Disabled</span><span class="hint">pending</span></div>
+</div>
+
+<style>
+  .hf-remocn-remocn-ui {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-remocn-ui {
+    width: 560px;
+    border-radius: 22px;
+    background: #fff;
+    padding: 22px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-remocn-ui .row {
+    height: 52px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    transform: translateX(var(--hf-row-x, 0px));
+    opacity: var(--hf-row-opacity, 1);
+  }
+  .hf-remocn-remocn-ui .label {
+    font-weight: 800;
+  }
+  .hf-remocn-remocn-ui .hint {
+    color: #71717a;
+    font-size: 13px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-remocn-ui .row', { '--hf-row-x': '-16px', '--hf-row-opacity': 0 }, { '--hf-row-x': '0px', '--hf-row-opacity': 1, duration: 0.22, stagger: 0.07, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/select-item/demo.html b/registry/components/select-item/demo.html
new file mode 100644
index 0000000000..aaf00a633d
--- /dev/null
+++ b/registry/components/select-item/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Select Item - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-select-item {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-select-item {
+        width: 560px;
+        border-radius: 22px;
+        background: #fff;
+        padding: 22px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-select-item .row {
+        height: 52px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        transform: translateX(var(--hf-row-x, 0px));
+        opacity: var(--hf-row-opacity, 1);
+      }
+      .hf-remocn-select-item .label {
+        font-weight: 800;
+      }
+      .hf-remocn-select-item .hint {
+        color: #71717a;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="select-item-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-select-item">
+          <div class="row">
+            <span class="label">Select Item</span><span class="hint">Ctrl K</span>
+          </div>
+          <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+          <div class="row">
+            <span class="label">Disabled</span><span class="hint">pending</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-select-item .row",
+          { "--hf-row-x": "-16px", "--hf-row-opacity": 0 },
+          {
+            "--hf-row-x": "0px",
+            "--hf-row-opacity": 1,
+            duration: 0.22,
+            stagger: 0.07,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["select-item-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/select-item/registry-item.json b/registry/components/select-item/registry-item.json
new file mode 100644
index 0000000000..91a16e36c1
--- /dev/null
+++ b/registry/components/select-item/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "select-item",
+  "type": "hyperframes:component",
+  "title": "Select Item",
+  "description": "A select-row primitive with check mark, hint, and active highlight.",
+  "tags": ["ui-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "select-item.html",
+      "target": "compositions/components/select-item.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/select-item.png"
+  }
+}
diff --git a/registry/components/select-item/select-item.html b/registry/components/select-item/select-item.html
new file mode 100644
index 0000000000..1bbaee7615
--- /dev/null
+++ b/registry/components/select-item/select-item.html
@@ -0,0 +1,55 @@
+<!--
+  Select Item - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-select-item">
+  <div class="row"><span class="label">Select Item</span><span class="hint">Ctrl K</span></div>
+  <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+  <div class="row"><span class="label">Disabled</span><span class="hint">pending</span></div>
+</div>
+
+<style>
+  .hf-remocn-select-item {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-select-item {
+    width: 560px;
+    border-radius: 22px;
+    background: #fff;
+    padding: 22px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-select-item .row {
+    height: 52px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    transform: translateX(var(--hf-row-x, 0px));
+    opacity: var(--hf-row-opacity, 1);
+  }
+  .hf-remocn-select-item .label {
+    font-weight: 800;
+  }
+  .hf-remocn-select-item .hint {
+    color: #71717a;
+    font-size: 13px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-select-item .row', { '--hf-row-x': '-16px', '--hf-row-opacity': 0 }, { '--hf-row-x': '0px', '--hf-row-opacity': 1, duration: 0.22, stagger: 0.07, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/skeleton-block/demo.html b/registry/components/skeleton-block/demo.html
new file mode 100644
index 0000000000..9cbb966bc7
--- /dev/null
+++ b/registry/components/skeleton-block/demo.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Skeleton Block - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-skeleton-block {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-skeleton-block {
+        width: 560px;
+        border-radius: 22px;
+        background: #fff;
+        padding: 22px;
+        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-skeleton-block .row {
+        height: 52px;
+        border-radius: 14px;
+        background: #f4f4f5;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 16px;
+        transform: translateX(var(--hf-row-x, 0px));
+        opacity: var(--hf-row-opacity, 1);
+      }
+      .hf-remocn-skeleton-block .label {
+        font-weight: 800;
+      }
+      .hf-remocn-skeleton-block .hint {
+        color: #71717a;
+        font-size: 13px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="skeleton-block-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-skeleton-block">
+          <div class="row">
+            <span class="label">Skeleton Block</span><span class="hint">Ctrl K</span>
+          </div>
+          <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+          <div class="row">
+            <span class="label">Disabled</span><span class="hint">pending</span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-skeleton-block .row",
+          { "--hf-row-x": "-16px", "--hf-row-opacity": 0 },
+          {
+            "--hf-row-x": "0px",
+            "--hf-row-opacity": 1,
+            duration: 0.22,
+            stagger: 0.07,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["skeleton-block-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/skeleton-block/registry-item.json b/registry/components/skeleton-block/registry-item.json
new file mode 100644
index 0000000000..bd779c5cf3
--- /dev/null
+++ b/registry/components/skeleton-block/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "skeleton-block",
+  "type": "hyperframes:component",
+  "title": "Skeleton Block",
+  "description": "A skeleton loading block that resolves into real content.",
+  "tags": ["ui-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "skeleton-block.html",
+      "target": "compositions/components/skeleton-block.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/skeleton-block.png"
+  }
+}
diff --git a/registry/components/skeleton-block/skeleton-block.html b/registry/components/skeleton-block/skeleton-block.html
new file mode 100644
index 0000000000..298af4a2df
--- /dev/null
+++ b/registry/components/skeleton-block/skeleton-block.html
@@ -0,0 +1,55 @@
+<!--
+  Skeleton Block - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-skeleton-block">
+  <div class="row"><span class="label">Skeleton Block</span><span class="hint">Ctrl K</span></div>
+  <div class="row"><span class="label">Selected</span><span class="hint">active</span></div>
+  <div class="row"><span class="label">Disabled</span><span class="hint">pending</span></div>
+</div>
+
+<style>
+  .hf-remocn-skeleton-block {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-skeleton-block {
+    width: 560px;
+    border-radius: 22px;
+    background: #fff;
+    padding: 22px;
+    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-skeleton-block .row {
+    height: 52px;
+    border-radius: 14px;
+    background: #f4f4f5;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    transform: translateX(var(--hf-row-x, 0px));
+    opacity: var(--hf-row-opacity, 1);
+  }
+  .hf-remocn-skeleton-block .label {
+    font-weight: 800;
+  }
+  .hf-remocn-skeleton-block .hint {
+    color: #71717a;
+    font-size: 13px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-skeleton-block .row', { '--hf-row-x': '-16px', '--hf-row-opacity': 0 }, { '--hf-row-x': '0px', '--hf-row-opacity': 1, duration: 0.22, stagger: 0.07, ease: 'power2.out' }, startTime);
+-->
diff --git a/registry/components/spatial-push/demo.html b/registry/components/spatial-push/demo.html
new file mode 100644
index 0000000000..35f15d7069
--- /dev/null
+++ b/registry/components/spatial-push/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spatial Push - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-spatial-push {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-spatial-push {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-spatial-push .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-spatial-push .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-spatial-push .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-spatial-push .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-spatial-push .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="spatial-push-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-spatial-push">
+          <div class="scene from">Before</div>
+          <div class="scene to">Spatial Push</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-spatial-push .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-spatial-push .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-spatial-push .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-spatial-push .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["spatial-push-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/spatial-push/registry-item.json b/registry/components/spatial-push/registry-item.json
new file mode 100644
index 0000000000..5f996d0017
--- /dev/null
+++ b/registry/components/spatial-push/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "spatial-push",
+  "type": "hyperframes:component",
+  "title": "Spatial Push",
+  "description": "A physical depth transition that presses the old scene backward.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "spatial-push.html",
+      "target": "compositions/components/spatial-push.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spatial-push.png"
+  }
+}
diff --git a/registry/components/spatial-push/spatial-push.html b/registry/components/spatial-push/spatial-push.html
new file mode 100644
index 0000000000..0203c038a8
--- /dev/null
+++ b/registry/components/spatial-push/spatial-push.html
@@ -0,0 +1,82 @@
+<!--
+  Spatial Push - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-spatial-push">
+  <div class="scene from">Before</div>
+  <div class="scene to">Spatial Push</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-spatial-push {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-spatial-push {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-spatial-push .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-spatial-push .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-spatial-push .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-spatial-push .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-spatial-push .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-spatial-push .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-spatial-push .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-spatial-push .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-spatial-push .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/spotlight-card/demo.html b/registry/components/spotlight-card/demo.html
new file mode 100644
index 0000000000..20bc372a5b
--- /dev/null
+++ b/registry/components/spotlight-card/demo.html
@@ -0,0 +1,186 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Spotlight Card - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-spotlight-card {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-spotlight-card {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #080b12;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-spotlight-card .mesh {
+        position: absolute;
+        inset: -22%;
+        filter: blur(44px);
+        opacity: 0.88;
+        background:
+          radial-gradient(
+            circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+            #60a5fa 0 18%,
+            transparent 32%
+          ),
+          radial-gradient(
+            circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+            #f472b6 0 16%,
+            transparent 34%
+          ),
+          radial-gradient(
+            circle at var(--hf-x3, 46%) var(--hf-y3, 78%),
+            #34d399 0 18%,
+            transparent 34%
+          );
+      }
+      .hf-remocn-spotlight-card .card {
+        position: absolute;
+        inset: 74px 92px;
+        border: 1px solid rgba(255, 255, 255, 0.16);
+        border-radius: 26px;
+        background: rgba(255, 255, 255, 0.08);
+        color: #fff;
+        display: grid;
+        place-items: center;
+        text-align: center;
+        overflow: hidden;
+      }
+      .hf-remocn-spotlight-card .spot {
+        position: absolute;
+        width: 260px;
+        height: 260px;
+        border-radius: 50%;
+        background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+        transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+        mix-blend-mode: screen;
+      }
+      .hf-remocn-spotlight-card .particle {
+        position: absolute;
+        left: 50%;
+        top: 54%;
+        width: 12px;
+        height: 20px;
+        border-radius: 3px;
+        background: var(--c);
+        transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+        opacity: var(--hf-po, 0);
+      }
+      .hf-remocn-spotlight-card h3 {
+        margin: 0;
+        font-size: 44px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-spotlight-card p {
+        margin: 8px 0 0;
+        color: rgba(255, 255, 255, 0.7);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="spotlight-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-spotlight-card">
+          <div class="mesh"></div>
+          <div class="card">
+            <div class="spot"></div>
+            <div>
+              <h3>Spotlight Card</h3>
+              <p>A card with a scripted cursor spotlight and lit border.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-spotlight-card .mesh",
+          {
+            "--hf-x1": "18%",
+            "--hf-y1": "28%",
+            "--hf-x2": "78%",
+            "--hf-y2": "46%",
+            "--hf-x3": "44%",
+            "--hf-y3": "80%",
+          },
+          {
+            "--hf-x1": "34%",
+            "--hf-y1": "42%",
+            "--hf-x2": "62%",
+            "--hf-y2": "60%",
+            "--hf-x3": "58%",
+            "--hf-y3": "64%",
+            duration: 4,
+            ease: "sine.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-spotlight-card .spot",
+          { "--hf-spot-x": "-120px", "--hf-spot-y": "-70px" },
+          { "--hf-spot-x": "190px", "--hf-spot-y": "90px", duration: 3, ease: "sine.inOut" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-spotlight-card .particle",
+          { "--hf-po": 0, "--hf-px": "0px", "--hf-py": "0px", "--hf-pr": "0deg" },
+          {
+            "--hf-po": 1,
+            "--hf-px": () => Math.cos(gsap.utils.wrap(0, 6.28, 1)) * 240 + "px",
+            "--hf-py": "-180px",
+            "--hf-pr": "360deg",
+            duration: 0.8,
+            stagger: 0.015,
+            ease: "power2.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["spotlight-card-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/spotlight-card/registry-item.json b/registry/components/spotlight-card/registry-item.json
new file mode 100644
index 0000000000..602e068f11
--- /dev/null
+++ b/registry/components/spotlight-card/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "spotlight-card",
+  "type": "hyperframes:component",
+  "title": "Spotlight Card",
+  "description": "A card with a scripted cursor spotlight and lit border.",
+  "tags": ["effect", "remocn-port"],
+  "files": [
+    {
+      "path": "spotlight-card.html",
+      "target": "compositions/components/spotlight-card.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png"
+  }
+}
diff --git a/registry/components/spotlight-card/spotlight-card.html b/registry/components/spotlight-card/spotlight-card.html
new file mode 100644
index 0000000000..7e75035c2e
--- /dev/null
+++ b/registry/components/spotlight-card/spotlight-card.html
@@ -0,0 +1,101 @@
+<!--
+  Spotlight Card - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-spotlight-card">
+  <div class="mesh"></div>
+  <div class="card">
+    <div class="spot"></div>
+    <div>
+      <h3>Spotlight Card</h3>
+      <p>A card with a scripted cursor spotlight and lit border.</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-spotlight-card {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-spotlight-card {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #080b12;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-spotlight-card .mesh {
+    position: absolute;
+    inset: -22%;
+    filter: blur(44px);
+    opacity: 0.88;
+    background:
+      radial-gradient(
+        circle at var(--hf-x1, 20%) var(--hf-y1, 30%),
+        #60a5fa 0 18%,
+        transparent 32%
+      ),
+      radial-gradient(
+        circle at var(--hf-x2, 76%) var(--hf-y2, 52%),
+        #f472b6 0 16%,
+        transparent 34%
+      ),
+      radial-gradient(circle at var(--hf-x3, 46%) var(--hf-y3, 78%), #34d399 0 18%, transparent 34%);
+  }
+  .hf-remocn-spotlight-card .card {
+    position: absolute;
+    inset: 74px 92px;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 26px;
+    background: rgba(255, 255, 255, 0.08);
+    color: #fff;
+    display: grid;
+    place-items: center;
+    text-align: center;
+    overflow: hidden;
+  }
+  .hf-remocn-spotlight-card .spot {
+    position: absolute;
+    width: 260px;
+    height: 260px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent 65%);
+    transform: translate(var(--hf-spot-x, 0px), var(--hf-spot-y, 0px));
+    mix-blend-mode: screen;
+  }
+  .hf-remocn-spotlight-card .particle {
+    position: absolute;
+    left: 50%;
+    top: 54%;
+    width: 12px;
+    height: 20px;
+    border-radius: 3px;
+    background: var(--c);
+    transform: translate(var(--hf-px, 0px), var(--hf-py, 0px)) rotate(var(--hf-pr, 0deg));
+    opacity: var(--hf-po, 0);
+  }
+  .hf-remocn-spotlight-card h3 {
+    margin: 0;
+    font-size: 44px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-spotlight-card p {
+    margin: 8px 0 0;
+    color: rgba(255, 255, 255, 0.7);
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-spotlight-card .mesh', { '--hf-x1': '18%', '--hf-y1': '28%', '--hf-x2': '78%', '--hf-y2': '46%', '--hf-x3': '44%', '--hf-y3': '80%' }, { '--hf-x1': '34%', '--hf-y1': '42%', '--hf-x2': '62%', '--hf-y2': '60%', '--hf-x3': '58%', '--hf-y3': '64%', duration: 4, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-spotlight-card .spot', { '--hf-spot-x': '-120px', '--hf-spot-y': '-70px' }, { '--hf-spot-x': '190px', '--hf-spot-y': '90px', duration: 3, ease: 'sine.inOut' }, startTime); tl.fromTo('.hf-remocn-spotlight-card .particle', { '--hf-po': 0, '--hf-px': '0px', '--hf-py': '0px', '--hf-pr': '0deg' }, { '--hf-po': 1, '--hf-px': () => (Math.cos(gsap.utils.wrap(0, 6.28, 1)) * 240) + 'px', '--hf-py': '-180px', '--hf-pr': '360deg', duration: 0.8, stagger: 0.015, ease: 'power2.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/terminal-simulator/demo.html b/registry/components/terminal-simulator/demo.html
new file mode 100644
index 0000000000..59fe0a9472
--- /dev/null
+++ b/registry/components/terminal-simulator/demo.html
@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Terminal Simulator - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-terminal-simulator {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-terminal-simulator {
+        width: 760px;
+        border-radius: 24px;
+        overflow: hidden;
+        background: #0f172a;
+        color: #dbeafe;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      }
+      .hf-remocn-terminal-simulator .chrome {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 0 18px;
+        background: #111827;
+        color: #94a3b8;
+      }
+      .hf-remocn-terminal-simulator .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 999px;
+        background: #ef4444;
+        box-shadow:
+          18px 0 #f59e0b,
+          36px 0 #22c55e;
+      }
+      .hf-remocn-terminal-simulator .body {
+        display: grid;
+        grid-template-columns: 210px 1fr;
+        min-height: 340px;
+      }
+      .hf-remocn-terminal-simulator .files {
+        padding: 22px;
+        border-right: 1px solid rgba(148, 163, 184, 0.18);
+        color: #94a3b8;
+      }
+      .hf-remocn-terminal-simulator .editor {
+        padding: 22px;
+        display: grid;
+        gap: 12px;
+      }
+      .hf-remocn-terminal-simulator .line {
+        display: block;
+        height: 16px;
+        border-radius: 999px;
+        background: linear-gradient(90deg, #38bdf8, #a78bfa);
+        transform: scaleX(var(--hf-line, 1));
+        transform-origin: left center;
+        opacity: var(--hf-line-opacity, 1);
+      }
+      .hf-remocn-terminal-simulator .terminal {
+        padding: 18px 22px 24px;
+        border-top: 1px solid rgba(148, 163, 184, 0.18);
+        color: #86efac;
+        min-height: 78px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="terminal-simulator-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-terminal-simulator">
+          <div class="chrome"><span class="dot"></span><span>Terminal Simulator</span></div>
+          <div class="body">
+            <div class="files">index.html<br />style.css<br />timeline.js</div>
+            <div class="editor">
+              <span class="line" style="width: 92%"></span
+              ><span class="line" style="width: 72%"></span
+              ><span class="line" style="width: 84%"></span
+              ><span class="line" style="width: 58%"></span
+              ><span class="line" style="width: 78%"></span>
+            </div>
+          </div>
+          <div class="terminal">$ hyperframes render --skill=terminal-simulator</div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-terminal-simulator .line",
+          { "--hf-line": 0, "--hf-line-opacity": 0 },
+          {
+            "--hf-line": 1,
+            "--hf-line-opacity": 1,
+            duration: 0.24,
+            stagger: 0.08,
+            ease: "power2.out",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-terminal-simulator .terminal",
+          { opacity: 0, y: 16 },
+          { opacity: 1, y: 0, duration: 0.34, ease: "power2.out" },
+          startTime + 0.48,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["terminal-simulator-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/terminal-simulator/registry-item.json b/registry/components/terminal-simulator/registry-item.json
new file mode 100644
index 0000000000..633e263c86
--- /dev/null
+++ b/registry/components/terminal-simulator/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "terminal-simulator",
+  "type": "hyperframes:component",
+  "title": "Terminal Simulator",
+  "description": "A terminal window types commands and streams log output.",
+  "tags": ["code-animation", "remocn-port"],
+  "files": [
+    {
+      "path": "terminal-simulator.html",
+      "target": "compositions/components/terminal-simulator.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png"
+  }
+}
diff --git a/registry/components/terminal-simulator/terminal-simulator.html b/registry/components/terminal-simulator/terminal-simulator.html
new file mode 100644
index 0000000000..4e8756504c
--- /dev/null
+++ b/registry/components/terminal-simulator/terminal-simulator.html
@@ -0,0 +1,92 @@
+<!--
+  Terminal Simulator - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-terminal-simulator">
+  <div class="chrome"><span class="dot"></span><span>Terminal Simulator</span></div>
+  <div class="body">
+    <div class="files">index.html<br />style.css<br />timeline.js</div>
+    <div class="editor">
+      <span class="line" style="width: 92%"></span><span class="line" style="width: 72%"></span
+      ><span class="line" style="width: 84%"></span><span class="line" style="width: 58%"></span
+      ><span class="line" style="width: 78%"></span>
+    </div>
+  </div>
+  <div class="terminal">$ hyperframes render --skill=terminal-simulator</div>
+</div>
+
+<style>
+  .hf-remocn-terminal-simulator {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-terminal-simulator {
+    width: 760px;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #0f172a;
+    color: #dbeafe;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  .hf-remocn-terminal-simulator .chrome {
+    height: 48px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 18px;
+    background: #111827;
+    color: #94a3b8;
+  }
+  .hf-remocn-terminal-simulator .dot {
+    width: 11px;
+    height: 11px;
+    border-radius: 999px;
+    background: #ef4444;
+    box-shadow:
+      18px 0 #f59e0b,
+      36px 0 #22c55e;
+  }
+  .hf-remocn-terminal-simulator .body {
+    display: grid;
+    grid-template-columns: 210px 1fr;
+    min-height: 340px;
+  }
+  .hf-remocn-terminal-simulator .files {
+    padding: 22px;
+    border-right: 1px solid rgba(148, 163, 184, 0.18);
+    color: #94a3b8;
+  }
+  .hf-remocn-terminal-simulator .editor {
+    padding: 22px;
+    display: grid;
+    gap: 12px;
+  }
+  .hf-remocn-terminal-simulator .line {
+    display: block;
+    height: 16px;
+    border-radius: 999px;
+    background: linear-gradient(90deg, #38bdf8, #a78bfa);
+    transform: scaleX(var(--hf-line, 1));
+    transform-origin: left center;
+    opacity: var(--hf-line-opacity, 1);
+  }
+  .hf-remocn-terminal-simulator .terminal {
+    padding: 18px 22px 24px;
+    border-top: 1px solid rgba(148, 163, 184, 0.18);
+    color: #86efac;
+    min-height: 78px;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-terminal-simulator .line', { '--hf-line': 0, '--hf-line-opacity': 0 }, { '--hf-line': 1, '--hf-line-opacity': 1, duration: 0.24, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-terminal-simulator .terminal', { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.34, ease: 'power2.out' }, startTime + 0.48);
+-->
diff --git a/registry/components/terminal-to-browser-deploy/demo.html b/registry/components/terminal-to-browser-deploy/demo.html
new file mode 100644
index 0000000000..d8464590eb
--- /dev/null
+++ b/registry/components/terminal-to-browser-deploy/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Terminal to Browser Deploy - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-terminal-to-browser-deploy {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-terminal-to-browser-deploy {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-terminal-to-browser-deploy .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-terminal-to-browser-deploy .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-terminal-to-browser-deploy .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-terminal-to-browser-deploy .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-terminal-to-browser-deploy .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-terminal-to-browser-deploy h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-terminal-to-browser-deploy p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="terminal-to-browser-deploy-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-terminal-to-browser-deploy">
+          <div class="panel prompt">
+            <h3>Terminal to Browser Deploy</h3>
+            <p>Terminal deploy logs hand off into a live browser preview.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-terminal-to-browser-deploy .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-terminal-to-browser-deploy .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["terminal-to-browser-deploy-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/terminal-to-browser-deploy/registry-item.json b/registry/components/terminal-to-browser-deploy/registry-item.json
new file mode 100644
index 0000000000..b1adb80556
--- /dev/null
+++ b/registry/components/terminal-to-browser-deploy/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "terminal-to-browser-deploy",
+  "type": "hyperframes:component",
+  "title": "Terminal to Browser Deploy",
+  "description": "Terminal deploy logs hand off into a live browser preview.",
+  "tags": ["showcase", "remocn-port"],
+  "files": [
+    {
+      "path": "terminal-to-browser-deploy.html",
+      "target": "compositions/components/terminal-to-browser-deploy.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-to-browser-deploy.png"
+  }
+}
diff --git a/registry/components/terminal-to-browser-deploy/terminal-to-browser-deploy.html b/registry/components/terminal-to-browser-deploy/terminal-to-browser-deploy.html
new file mode 100644
index 0000000000..da11c6e431
--- /dev/null
+++ b/registry/components/terminal-to-browser-deploy/terminal-to-browser-deploy.html
@@ -0,0 +1,94 @@
+<!--
+  Terminal to Browser Deploy - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-terminal-to-browser-deploy">
+  <div class="panel prompt">
+    <h3>Terminal to Browser Deploy</h3>
+    <p>Terminal deploy logs hand off into a live browser preview.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-terminal-to-browser-deploy {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-terminal-to-browser-deploy {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-terminal-to-browser-deploy .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-terminal-to-browser-deploy .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-terminal-to-browser-deploy .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-terminal-to-browser-deploy .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-terminal-to-browser-deploy .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-terminal-to-browser-deploy h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-terminal-to-browser-deploy p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-terminal-to-browser-deploy .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-terminal-to-browser-deploy .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/tool-menu-slide-in/demo.html b/registry/components/tool-menu-slide-in/demo.html
new file mode 100644
index 0000000000..7c6c966a34
--- /dev/null
+++ b/registry/components/tool-menu-slide-in/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tool Menu Slide In - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-tool-menu-slide-in {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-tool-menu-slide-in {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-tool-menu-slide-in .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-tool-menu-slide-in .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-tool-menu-slide-in .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-tool-menu-slide-in .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-tool-menu-slide-in .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tool-menu-slide-in-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-tool-menu-slide-in">
+          <div class="scene from">Before</div>
+          <div class="scene to">Tool Menu Slide In</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-tool-menu-slide-in .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-tool-menu-slide-in .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tool-menu-slide-in-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/tool-menu-slide-in/registry-item.json b/registry/components/tool-menu-slide-in/registry-item.json
new file mode 100644
index 0000000000..55bdcb98a9
--- /dev/null
+++ b/registry/components/tool-menu-slide-in/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "tool-menu-slide-in",
+  "type": "hyperframes:component",
+  "title": "Tool Menu Slide In",
+  "description": "A tool menu enters with short-axis slide and icon stagger.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "tool-menu-slide-in.html",
+      "target": "compositions/components/tool-menu-slide-in.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tool-menu-slide-in.png"
+  }
+}
diff --git a/registry/components/tool-menu-slide-in/tool-menu-slide-in.html b/registry/components/tool-menu-slide-in/tool-menu-slide-in.html
new file mode 100644
index 0000000000..eba74a82d2
--- /dev/null
+++ b/registry/components/tool-menu-slide-in/tool-menu-slide-in.html
@@ -0,0 +1,82 @@
+<!--
+  Tool Menu Slide In - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-tool-menu-slide-in">
+  <div class="scene from">Before</div>
+  <div class="scene to">Tool Menu Slide In</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-tool-menu-slide-in {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-tool-menu-slide-in {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-tool-menu-slide-in .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-tool-menu-slide-in .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-tool-menu-slide-in .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-tool-menu-slide-in .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-tool-menu-slide-in .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-tool-menu-slide-in .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-tool-menu-slide-in .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-tool-menu-slide-in .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-tool-menu-slide-in .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/components/v0/demo.html b/registry/components/v0/demo.html
new file mode 100644
index 0000000000..18613448df
--- /dev/null
+++ b/registry/components/v0/demo.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>v0 - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-v0 {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-v0 {
+        width: 820px;
+        min-height: 460px;
+        border-radius: 34px;
+        padding: 28px;
+        background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        gap: 22px;
+        overflow: hidden;
+      }
+      .hf-remocn-v0 .panel {
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        border-radius: 24px;
+        background: rgba(255, 255, 255, 0.76);
+        padding: 22px;
+        backdrop-filter: blur(12px);
+      }
+      .hf-remocn-v0 .prompt {
+        display: grid;
+        gap: 12px;
+        align-content: start;
+      }
+      .hf-remocn-v0 .pill {
+        height: 42px;
+        border-radius: 999px;
+        background: #111827;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        padding: 0 18px;
+        font-weight: 800;
+        transform: translateX(var(--hf-pill-x, 0px));
+      }
+      .hf-remocn-v0 .preview {
+        display: grid;
+        gap: 14px;
+      }
+      .hf-remocn-v0 .card {
+        min-height: 78px;
+        border-radius: 18px;
+        background: #fff;
+        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+        transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+          scale(var(--hf-card-scale, 1));
+        opacity: var(--hf-card-opacity, 1);
+      }
+      .hf-remocn-v0 h3 {
+        margin: 0 0 14px;
+        font-size: 32px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-v0 p {
+        margin: 0;
+        color: #475569;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="v0-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-v0">
+          <div class="panel prompt">
+            <h3>v0</h3>
+            <p>A prompt-to-interface agent surface with generated component preview.</p>
+            <div class="pill">Generate scene</div>
+            <div class="pill">Refine motion</div>
+            <div class="pill">Export</div>
+          </div>
+          <div class="panel preview">
+            <div class="card"></div>
+            <div class="card"></div>
+            <div class="card"></div>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-v0 .pill",
+          { "--hf-pill-x": "-18px", opacity: 0 },
+          { "--hf-pill-x": "0px", opacity: 1, duration: 0.25, stagger: 0.08, ease: "power2.out" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-v0 .card",
+          { "--hf-card-y": "28px", "--hf-card-scale": 0.96, "--hf-card-opacity": 0 },
+          {
+            "--hf-card-y": "0px",
+            "--hf-card-scale": 1,
+            "--hf-card-opacity": 1,
+            duration: 0.42,
+            stagger: 0.12,
+            ease: "power3.out",
+          },
+          startTime + 0.2,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["v0-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/v0/registry-item.json b/registry/components/v0/registry-item.json
new file mode 100644
index 0000000000..c187b106ed
--- /dev/null
+++ b/registry/components/v0/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "v0",
+  "type": "hyperframes:component",
+  "title": "v0",
+  "description": "A prompt-to-interface agent surface with generated component preview.",
+  "tags": ["showcase", "remocn-port", "ai"],
+  "files": [
+    {
+      "path": "v0.html",
+      "target": "compositions/components/v0.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/v0.png"
+  }
+}
diff --git a/registry/components/v0/v0.html b/registry/components/v0/v0.html
new file mode 100644
index 0000000000..d78d7d0686
--- /dev/null
+++ b/registry/components/v0/v0.html
@@ -0,0 +1,94 @@
+<!--
+  v0 - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-v0">
+  <div class="panel prompt">
+    <h3>v0</h3>
+    <p>A prompt-to-interface agent surface with generated component preview.</p>
+    <div class="pill">Generate scene</div>
+    <div class="pill">Refine motion</div>
+    <div class="pill">Export</div>
+  </div>
+  <div class="panel preview">
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-v0 {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-v0 {
+    width: 820px;
+    min-height: 460px;
+    border-radius: 34px;
+    padding: 28px;
+    background: linear-gradient(135deg, #f8fafc, #e0f2fe);
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
+    display: grid;
+    grid-template-columns: 280px 1fr;
+    gap: 22px;
+    overflow: hidden;
+  }
+  .hf-remocn-v0 .panel {
+    border: 1px solid rgba(15, 23, 42, 0.08);
+    border-radius: 24px;
+    background: rgba(255, 255, 255, 0.76);
+    padding: 22px;
+    backdrop-filter: blur(12px);
+  }
+  .hf-remocn-v0 .prompt {
+    display: grid;
+    gap: 12px;
+    align-content: start;
+  }
+  .hf-remocn-v0 .pill {
+    height: 42px;
+    border-radius: 999px;
+    background: #111827;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 0 18px;
+    font-weight: 800;
+    transform: translateX(var(--hf-pill-x, 0px));
+  }
+  .hf-remocn-v0 .preview {
+    display: grid;
+    gap: 14px;
+  }
+  .hf-remocn-v0 .card {
+    min-height: 78px;
+    border-radius: 18px;
+    background: #fff;
+    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
+    transform: translate(var(--hf-card-x, 0px), var(--hf-card-y, 0px))
+      scale(var(--hf-card-scale, 1));
+    opacity: var(--hf-card-opacity, 1);
+  }
+  .hf-remocn-v0 h3 {
+    margin: 0 0 14px;
+    font-size: 32px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-v0 p {
+    margin: 0;
+    color: #475569;
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-v0 .pill', { '--hf-pill-x': '-18px', opacity: 0 }, { '--hf-pill-x': '0px', opacity: 1, duration: 0.25, stagger: 0.08, ease: 'power2.out' }, startTime); tl.fromTo('.hf-remocn-v0 .card', { '--hf-card-y': '28px', '--hf-card-scale': 0.96, '--hf-card-opacity': 0 }, { '--hf-card-y': '0px', '--hf-card-scale': 1, '--hf-card-opacity': 1, duration: 0.42, stagger: 0.12, ease: 'power3.out' }, startTime + 0.2);
+-->
diff --git a/registry/components/x-follow-card/demo.html b/registry/components/x-follow-card/demo.html
new file mode 100644
index 0000000000..9616494eb5
--- /dev/null
+++ b/registry/components/x-follow-card/demo.html
@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>X Follow Card - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-x-follow-card {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-x-follow-card {
+        width: 700px;
+        border-radius: 30px;
+        padding: 34px;
+        background: #0f172a;
+        color: #fff;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-x-follow-card header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+      .hf-remocn-x-follow-card .avatar {
+        width: 70px;
+        height: 70px;
+        border-radius: 22px;
+        background: linear-gradient(135deg, #38bdf8, #8b5cf6);
+      }
+      .hf-remocn-x-follow-card h3 {
+        margin: 0;
+        font-size: 36px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-x-follow-card p {
+        color: #94a3b8;
+        margin: 4px 0 0;
+      }
+      .hf-remocn-x-follow-card .stat {
+        margin-top: 30px;
+        font-size: 82px;
+        font-weight: 900;
+        letter-spacing: -0.08em;
+        transform: translateY(var(--hf-stat-y, 0px));
+      }
+      .hf-remocn-x-follow-card .avatars {
+        display: flex;
+        margin-top: 18px;
+      }
+      .hf-remocn-x-follow-card .avatars span {
+        width: 46px;
+        height: 46px;
+        border-radius: 999px;
+        border: 3px solid #0f172a;
+        margin-left: -10px;
+        background: var(--c);
+        opacity: var(--hf-avatar-opacity, 1);
+        transform: translateY(var(--hf-avatar-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="x-follow-card-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-x-follow-card">
+          <header>
+            <div class="avatar"></div>
+            <div>
+              <h3>X Follow Card</h3>
+              <p>A social follow card with avatar, handle, and follower motion.</p>
+            </div>
+          </header>
+          <div class="stat">30.6K</div>
+          <div class="avatars">
+            <span style="--c: #38bdf8"></span><span style="--c: #f472b6"></span
+            ><span style="--c: #34d399"></span><span style="--c: #f59e0b"></span
+            ><span style="--c: #a78bfa"></span><span style="--c: #fb7185"></span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-x-follow-card .stat",
+          { "--hf-stat-y": "28px", opacity: 0 },
+          { "--hf-stat-y": "0px", opacity: 1, duration: 0.46, ease: "back.out(1.6)" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-x-follow-card .avatars span",
+          { "--hf-avatar-y": "18px", "--hf-avatar-opacity": 0 },
+          {
+            "--hf-avatar-y": "0px",
+            "--hf-avatar-opacity": 1,
+            duration: 0.28,
+            stagger: 0.05,
+            ease: "power2.out",
+          },
+          startTime + 0.22,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["x-follow-card-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/x-follow-card/registry-item.json b/registry/components/x-follow-card/registry-item.json
new file mode 100644
index 0000000000..e8ba202ab8
--- /dev/null
+++ b/registry/components/x-follow-card/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "x-follow-card",
+  "type": "hyperframes:component",
+  "title": "X Follow Card",
+  "description": "A social follow card with avatar, handle, and follower motion.",
+  "tags": ["social-overlay", "remocn-port"],
+  "files": [
+    {
+      "path": "x-follow-card.html",
+      "target": "compositions/components/x-follow-card.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png"
+  }
+}
diff --git a/registry/components/x-follow-card/x-follow-card.html b/registry/components/x-follow-card/x-follow-card.html
new file mode 100644
index 0000000000..278e4306f7
--- /dev/null
+++ b/registry/components/x-follow-card/x-follow-card.html
@@ -0,0 +1,87 @@
+<!--
+  X Follow Card - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-x-follow-card">
+  <header>
+    <div class="avatar"></div>
+    <div>
+      <h3>X Follow Card</h3>
+      <p>A social follow card with avatar, handle, and follower motion.</p>
+    </div>
+  </header>
+  <div class="stat">30.6K</div>
+  <div class="avatars">
+    <span style="--c: #38bdf8"></span><span style="--c: #f472b6"></span
+    ><span style="--c: #34d399"></span><span style="--c: #f59e0b"></span
+    ><span style="--c: #a78bfa"></span><span style="--c: #fb7185"></span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-x-follow-card {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-x-follow-card {
+    width: 700px;
+    border-radius: 30px;
+    padding: 34px;
+    background: #0f172a;
+    color: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-x-follow-card header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .hf-remocn-x-follow-card .avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 22px;
+    background: linear-gradient(135deg, #38bdf8, #8b5cf6);
+  }
+  .hf-remocn-x-follow-card h3 {
+    margin: 0;
+    font-size: 36px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-x-follow-card p {
+    color: #94a3b8;
+    margin: 4px 0 0;
+  }
+  .hf-remocn-x-follow-card .stat {
+    margin-top: 30px;
+    font-size: 82px;
+    font-weight: 900;
+    letter-spacing: -0.08em;
+    transform: translateY(var(--hf-stat-y, 0px));
+  }
+  .hf-remocn-x-follow-card .avatars {
+    display: flex;
+    margin-top: 18px;
+  }
+  .hf-remocn-x-follow-card .avatars span {
+    width: 46px;
+    height: 46px;
+    border-radius: 999px;
+    border: 3px solid #0f172a;
+    margin-left: -10px;
+    background: var(--c);
+    opacity: var(--hf-avatar-opacity, 1);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-x-follow-card .stat', { '--hf-stat-y': '28px', opacity: 0 }, { '--hf-stat-y': '0px', opacity: 1, duration: 0.46, ease: 'back.out(1.6)' }, startTime); tl.fromTo('.hf-remocn-x-follow-card .avatars span', { '--hf-avatar-y': '18px', '--hf-avatar-opacity': 0 }, { '--hf-avatar-y': '0px', '--hf-avatar-opacity': 1, duration: 0.28, stagger: 0.05, ease: 'power2.out' }, startTime + 0.22);
+-->
diff --git a/registry/components/x-followers-overview/demo.html b/registry/components/x-followers-overview/demo.html
new file mode 100644
index 0000000000..d96b55ce1f
--- /dev/null
+++ b/registry/components/x-followers-overview/demo.html
@@ -0,0 +1,144 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>X Followers Overview - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-x-followers-overview {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-x-followers-overview {
+        width: 700px;
+        border-radius: 30px;
+        padding: 34px;
+        background: #0f172a;
+        color: #fff;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-x-followers-overview header {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+      .hf-remocn-x-followers-overview .avatar {
+        width: 70px;
+        height: 70px;
+        border-radius: 22px;
+        background: linear-gradient(135deg, #38bdf8, #8b5cf6);
+      }
+      .hf-remocn-x-followers-overview h3 {
+        margin: 0;
+        font-size: 36px;
+        letter-spacing: -0.04em;
+      }
+      .hf-remocn-x-followers-overview p {
+        color: #94a3b8;
+        margin: 4px 0 0;
+      }
+      .hf-remocn-x-followers-overview .stat {
+        margin-top: 30px;
+        font-size: 82px;
+        font-weight: 900;
+        letter-spacing: -0.08em;
+        transform: translateY(var(--hf-stat-y, 0px));
+      }
+      .hf-remocn-x-followers-overview .avatars {
+        display: flex;
+        margin-top: 18px;
+      }
+      .hf-remocn-x-followers-overview .avatars span {
+        width: 46px;
+        height: 46px;
+        border-radius: 999px;
+        border: 3px solid #0f172a;
+        margin-left: -10px;
+        background: var(--c);
+        opacity: var(--hf-avatar-opacity, 1);
+        transform: translateY(var(--hf-avatar-y, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="x-followers-overview-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-x-followers-overview">
+          <header>
+            <div class="avatar"></div>
+            <div>
+              <h3>X Followers Overview</h3>
+              <p>A social analytics card with count-up and audience pills.</p>
+            </div>
+          </header>
+          <div class="stat">30.6K</div>
+          <div class="avatars">
+            <span style="--c: #38bdf8"></span><span style="--c: #f472b6"></span
+            ><span style="--c: #34d399"></span><span style="--c: #f59e0b"></span
+            ><span style="--c: #a78bfa"></span><span style="--c: #fb7185"></span>
+          </div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-x-followers-overview .stat",
+          { "--hf-stat-y": "28px", opacity: 0 },
+          { "--hf-stat-y": "0px", opacity: 1, duration: 0.46, ease: "back.out(1.6)" },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-x-followers-overview .avatars span",
+          { "--hf-avatar-y": "18px", "--hf-avatar-opacity": 0 },
+          {
+            "--hf-avatar-y": "0px",
+            "--hf-avatar-opacity": 1,
+            duration: 0.28,
+            stagger: 0.05,
+            ease: "power2.out",
+          },
+          startTime + 0.22,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["x-followers-overview-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/x-followers-overview/registry-item.json b/registry/components/x-followers-overview/registry-item.json
new file mode 100644
index 0000000000..624f1c79a2
--- /dev/null
+++ b/registry/components/x-followers-overview/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "x-followers-overview",
+  "type": "hyperframes:component",
+  "title": "X Followers Overview",
+  "description": "A social analytics card with count-up and audience pills.",
+  "tags": ["social-overlay", "remocn-port"],
+  "files": [
+    {
+      "path": "x-followers-overview.html",
+      "target": "compositions/components/x-followers-overview.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-followers-overview.png"
+  }
+}
diff --git a/registry/components/x-followers-overview/x-followers-overview.html b/registry/components/x-followers-overview/x-followers-overview.html
new file mode 100644
index 0000000000..3574ab64a3
--- /dev/null
+++ b/registry/components/x-followers-overview/x-followers-overview.html
@@ -0,0 +1,87 @@
+<!--
+  X Followers Overview - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-x-followers-overview">
+  <header>
+    <div class="avatar"></div>
+    <div>
+      <h3>X Followers Overview</h3>
+      <p>A social analytics card with count-up and audience pills.</p>
+    </div>
+  </header>
+  <div class="stat">30.6K</div>
+  <div class="avatars">
+    <span style="--c: #38bdf8"></span><span style="--c: #f472b6"></span
+    ><span style="--c: #34d399"></span><span style="--c: #f59e0b"></span
+    ><span style="--c: #a78bfa"></span><span style="--c: #fb7185"></span>
+  </div>
+</div>
+
+<style>
+  .hf-remocn-x-followers-overview {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-x-followers-overview {
+    width: 700px;
+    border-radius: 30px;
+    padding: 34px;
+    background: #0f172a;
+    color: #fff;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-x-followers-overview header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .hf-remocn-x-followers-overview .avatar {
+    width: 70px;
+    height: 70px;
+    border-radius: 22px;
+    background: linear-gradient(135deg, #38bdf8, #8b5cf6);
+  }
+  .hf-remocn-x-followers-overview h3 {
+    margin: 0;
+    font-size: 36px;
+    letter-spacing: -0.04em;
+  }
+  .hf-remocn-x-followers-overview p {
+    color: #94a3b8;
+    margin: 4px 0 0;
+  }
+  .hf-remocn-x-followers-overview .stat {
+    margin-top: 30px;
+    font-size: 82px;
+    font-weight: 900;
+    letter-spacing: -0.08em;
+    transform: translateY(var(--hf-stat-y, 0px));
+  }
+  .hf-remocn-x-followers-overview .avatars {
+    display: flex;
+    margin-top: 18px;
+  }
+  .hf-remocn-x-followers-overview .avatars span {
+    width: 46px;
+    height: 46px;
+    border-radius: 999px;
+    border: 3px solid #0f172a;
+    margin-left: -10px;
+    background: var(--c);
+    opacity: var(--hf-avatar-opacity, 1);
+    transform: translateY(var(--hf-avatar-y, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-x-followers-overview .stat', { '--hf-stat-y': '28px', opacity: 0 }, { '--hf-stat-y': '0px', opacity: 1, duration: 0.46, ease: 'back.out(1.6)' }, startTime); tl.fromTo('.hf-remocn-x-followers-overview .avatars span', { '--hf-avatar-y': '18px', '--hf-avatar-opacity': 0 }, { '--hf-avatar-y': '0px', '--hf-avatar-opacity': 1, duration: 0.28, stagger: 0.05, ease: 'power2.out' }, startTime + 0.22);
+-->
diff --git a/registry/components/zoom-through-transition/demo.html b/registry/components/zoom-through-transition/demo.html
new file mode 100644
index 0000000000..01d21e6c85
--- /dev/null
+++ b/registry/components/zoom-through-transition/demo.html
@@ -0,0 +1,163 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Zoom Through Transition - Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+      }
+      #demo {
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: #f7f7f8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .demo-frame {
+        display: grid;
+        place-items: center;
+        padding: 52px;
+      }
+      .hf-remocn-zoom-through-transition {
+        --hf-accent: #2563eb;
+        --hf-ink: #111827;
+        --hf-muted: #6b7280;
+        --hf-surface: #ffffff;
+        color: var(--hf-ink);
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-remocn-zoom-through-transition {
+        position: relative;
+        width: 760px;
+        height: 428px;
+        overflow: hidden;
+        border-radius: 30px;
+        background: #111827;
+        box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+      }
+      .hf-remocn-zoom-through-transition .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-weight: 900;
+        font-size: 58px;
+        letter-spacing: -0.05em;
+        color: #fff;
+      }
+      .hf-remocn-zoom-through-transition .from {
+        background: linear-gradient(135deg, #111827, #374151);
+        transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+          scale(var(--hf-from-scale, 1));
+        filter: blur(var(--hf-from-blur, 0px));
+      }
+      .hf-remocn-zoom-through-transition .to {
+        background: linear-gradient(135deg, #2563eb, #7c3aed);
+        transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+        clip-path: inset(
+          var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+            var(--hf-clip-left, 0%)
+        );
+      }
+      .hf-remocn-zoom-through-transition .fx {
+        position: absolute;
+        inset: 0;
+        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+        mix-blend-mode: screen;
+        transform: translateX(var(--hf-fx-x, -110%));
+      }
+      .hf-remocn-zoom-through-transition .rgb {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-rgb-opacity, 0);
+        background: linear-gradient(
+          90deg,
+          rgba(239, 68, 68, 0.35),
+          transparent,
+          rgba(34, 211, 238, 0.35)
+        );
+        transform: translateX(var(--hf-rgb-x, 0px));
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="zoom-through-transition-demo"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="demo-frame">
+        <div class="hf-remocn-zoom-through-transition">
+          <div class="scene from">Before</div>
+          <div class="scene to">Zoom Through Transition</div>
+          <div class="fx"></div>
+          <div class="rgb"></div>
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        const startTime = 0.5;
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .to",
+          { "--hf-clip-right": "100%", "--hf-to-x": "60px", "--hf-to-scale": 1.04 },
+          {
+            "--hf-clip-right": "0%",
+            "--hf-to-x": "0px",
+            "--hf-to-scale": 1,
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.to(
+          ".hf-remocn-zoom-through-transition .from",
+          {
+            "--hf-from-x": "-70px",
+            "--hf-from-scale": 0.96,
+            "--hf-from-blur": "5px",
+            duration: 0.9,
+            ease: "power3.inOut",
+          },
+          startTime,
+        );
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .fx",
+          { "--hf-fx-x": "-110%" },
+          { "--hf-fx-x": "110%", duration: 0.58, ease: "power2.inOut" },
+          startTime + 0.18,
+        );
+        tl.fromTo(
+          ".hf-remocn-zoom-through-transition .rgb",
+          { "--hf-rgb-opacity": 0, "--hf-rgb-x": "-16px" },
+          {
+            "--hf-rgb-opacity": 1,
+            "--hf-rgb-x": "16px",
+            repeat: 3,
+            yoyo: true,
+            duration: 0.07,
+            ease: "steps(1)",
+          },
+          startTime + 0.32,
+        );
+        tl.set({}, {}, 5);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["zoom-through-transition-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/zoom-through-transition/registry-item.json b/registry/components/zoom-through-transition/registry-item.json
new file mode 100644
index 0000000000..ec7c23d6d3
--- /dev/null
+++ b/registry/components/zoom-through-transition/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "zoom-through-transition",
+  "type": "hyperframes:component",
+  "title": "Zoom Through Transition",
+  "description": "A transition that zooms through a focal card into the next scene.",
+  "tags": ["transition-primitive", "remocn-port"],
+  "files": [
+    {
+      "path": "zoom-through-transition.html",
+      "target": "compositions/components/zoom-through-transition.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/zoom-through-transition.png"
+  }
+}
diff --git a/registry/components/zoom-through-transition/zoom-through-transition.html b/registry/components/zoom-through-transition/zoom-through-transition.html
new file mode 100644
index 0000000000..1eee75150d
--- /dev/null
+++ b/registry/components/zoom-through-transition/zoom-through-transition.html
@@ -0,0 +1,82 @@
+<!--
+  Zoom Through Transition - remocn component ported to HyperFrames authoring format.
+
+  Paste the markup and CSS into a composition. Drive the timeline integration
+  from a paused GSAP timeline so renders remain deterministic.
+-->
+
+<div class="hf-remocn-zoom-through-transition">
+  <div class="scene from">Before</div>
+  <div class="scene to">Zoom Through Transition</div>
+  <div class="fx"></div>
+  <div class="rgb"></div>
+</div>
+
+<style>
+  .hf-remocn-zoom-through-transition {
+    --hf-accent: #2563eb;
+    --hf-ink: #111827;
+    --hf-muted: #6b7280;
+    --hf-surface: #ffffff;
+    color: var(--hf-ink);
+    font-family: Inter, system-ui, sans-serif;
+  }
+  .hf-remocn-zoom-through-transition {
+    position: relative;
+    width: 760px;
+    height: 428px;
+    overflow: hidden;
+    border-radius: 30px;
+    background: #111827;
+    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
+  }
+  .hf-remocn-zoom-through-transition .scene {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    font-weight: 900;
+    font-size: 58px;
+    letter-spacing: -0.05em;
+    color: #fff;
+  }
+  .hf-remocn-zoom-through-transition .from {
+    background: linear-gradient(135deg, #111827, #374151);
+    transform: translate(var(--hf-from-x, 0px), var(--hf-from-y, 0px))
+      scale(var(--hf-from-scale, 1));
+    filter: blur(var(--hf-from-blur, 0px));
+  }
+  .hf-remocn-zoom-through-transition .to {
+    background: linear-gradient(135deg, #2563eb, #7c3aed);
+    transform: translate(var(--hf-to-x, 0px), var(--hf-to-y, 0px)) scale(var(--hf-to-scale, 1));
+    clip-path: inset(
+      var(--hf-clip-top, 0%) var(--hf-clip-right, 100%) var(--hf-clip-bottom, 0%)
+        var(--hf-clip-left, 0%)
+    );
+  }
+  .hf-remocn-zoom-through-transition .fx {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
+    mix-blend-mode: screen;
+    transform: translateX(var(--hf-fx-x, -110%));
+  }
+  .hf-remocn-zoom-through-transition .rgb {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-rgb-opacity, 0);
+    background: linear-gradient(
+      90deg,
+      rgba(239, 68, 68, 0.35),
+      transparent,
+      rgba(34, 211, 238, 0.35)
+    );
+    transform: translateX(var(--hf-rgb-x, 0px));
+  }
+</style>
+
+<!--
+  Timeline integration:
+  tl.fromTo('.hf-remocn-zoom-through-transition .to', { '--hf-clip-right': '100%', '--hf-to-x': '60px', '--hf-to-scale': 1.04 }, { '--hf-clip-right': '0%', '--hf-to-x': '0px', '--hf-to-scale': 1, duration: 0.9, ease: 'power3.inOut' }, startTime); tl.to('.hf-remocn-zoom-through-transition .from', { '--hf-from-x': '-70px', '--hf-from-scale': 0.96, '--hf-from-blur': '5px', duration: 0.9, ease: 'power3.inOut' }, startTime); tl.fromTo('.hf-remocn-zoom-through-transition .fx', { '--hf-fx-x': '-110%' }, { '--hf-fx-x': '110%', duration: 0.58, ease: 'power2.inOut' }, startTime + 0.18); tl.fromTo('.hf-remocn-zoom-through-transition .rgb', { '--hf-rgb-opacity': 0, '--hf-rgb-x': '-16px' }, { '--hf-rgb-opacity': 1, '--hf-rgb-x': '16px', repeat: 3, yoyo: true, duration: 0.07, ease: 'steps(1)' }, startTime + 0.32);
+-->
diff --git a/registry/registry.json b/registry/registry.json
index 266ef70afb..19bfb5fa02 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -966,6 +966,198 @@
     {
       "name": "typewriter",
       "type": "hyperframes:component"
+    },
+    {
+      "name": "ai-generation-canvas",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "animated-bar-chart",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "animated-line-chart",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "backdrop",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "browser-flow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "chat-gpt",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "chat-to-preview-layout",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "chromatic-aberration-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "claude-chat",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "claude-code",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "code-accordion",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "code-diff-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "command-menu-item",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "confetti",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "dashboard-populate",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "data-flow-pipes",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "device-mockup-zoom",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "directional-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "drag-and-drop-flow",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "dropdown-menu-item",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "ecosystem-constellation",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "frosted-glass-wipe",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "github-stars",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "glass-code-block",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "hero-device-assemble",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "image-expand-to-fullscreen",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "infinite-bento-pan",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "infinite-marquee",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "landing-code-showcase",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "live-code-compilation",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "mesh-gradient-bg",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "micro-scale-fade",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "opencode",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "pricing-tier-focus",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "progress-steps",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "registry",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "remocn-ui",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "select-item",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "skeleton-block",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "spatial-push",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "spotlight-card",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "terminal-simulator",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "terminal-to-browser-deploy",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "tool-menu-slide-in",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "v0",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "x-follow-card",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "x-followers-overview",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "zoom-through-transition",
+      "type": "hyperframes:component"
     }
   ]
 }