From 96b1dd7beeeea01c637aca2cff2ec94fcc83fe02 Mon Sep 17 00:00:00 2001
From: Miguel Angel Simon Sierra <miguel.sierra@heygen.com>
Date: Thu, 9 Jul 2026 15:39:02 -0400
Subject: [PATCH] refactor(registry): drop product-UI imitation components from
 catalog

chat-gpt, claude-chat, claude-code, github-stars, and opencode leave the
catalog per the no-product-imitations policy; their mechanics re-enter
later under generic names with brand supplied via variables.
---
 docs/catalog/components/chat-gpt.mdx          |  38 ----
 docs/catalog/components/claude-chat.mdx       |  38 ----
 docs/catalog/components/claude-code.mdx       |  38 ----
 docs/catalog/components/github-stars.mdx      |  38 ----
 docs/catalog/components/opencode.mdx          |  38 ----
 docs/docs.json                                |   5 -
 docs/packages/cli.mdx                         |   4 +-
 docs/public/catalog-index.json                |  62 ------
 .../remocnUiPrimitivesCatalog.test.ts         |   5 -
 registry/components/chat-gpt/chat-gpt.html    |  94 ---------
 registry/components/chat-gpt/demo.html        | 177 ----------------
 .../components/chat-gpt/registry-item.json    |  18 --
 .../components/claude-chat/claude-chat.html   |  94 ---------
 registry/components/claude-chat/demo.html     | 191 ------------------
 .../components/claude-chat/registry-item.json |  18 --
 .../components/claude-code/claude-code.html   |  92 ---------
 registry/components/claude-code/demo.html     | 158 ---------------
 .../components/claude-code/registry-item.json |  18 --
 registry/components/github-stars/demo.html    | 147 --------------
 .../components/github-stars/github-stars.html |  87 --------
 .../github-stars/registry-item.json           |  18 --
 registry/components/opencode/demo.html        | 158 ---------------
 registry/components/opencode/opencode.html    |  92 ---------
 .../components/opencode/registry-item.json    |  18 --
 registry/registry.json                        |  20 --
 25 files changed, 2 insertions(+), 1664 deletions(-)
 delete mode 100644 docs/catalog/components/chat-gpt.mdx
 delete mode 100644 docs/catalog/components/claude-chat.mdx
 delete mode 100644 docs/catalog/components/claude-code.mdx
 delete mode 100644 docs/catalog/components/github-stars.mdx
 delete mode 100644 docs/catalog/components/opencode.mdx
 delete mode 100644 registry/components/chat-gpt/chat-gpt.html
 delete mode 100644 registry/components/chat-gpt/demo.html
 delete mode 100644 registry/components/chat-gpt/registry-item.json
 delete mode 100644 registry/components/claude-chat/claude-chat.html
 delete mode 100644 registry/components/claude-chat/demo.html
 delete mode 100644 registry/components/claude-chat/registry-item.json
 delete mode 100644 registry/components/claude-code/claude-code.html
 delete mode 100644 registry/components/claude-code/demo.html
 delete mode 100644 registry/components/claude-code/registry-item.json
 delete mode 100644 registry/components/github-stars/demo.html
 delete mode 100644 registry/components/github-stars/github-stars.html
 delete mode 100644 registry/components/github-stars/registry-item.json
 delete mode 100644 registry/components/opencode/demo.html
 delete mode 100644 registry/components/opencode/opencode.html
 delete mode 100644 registry/components/opencode/registry-item.json

diff --git a/docs/catalog/components/chat-gpt.mdx b/docs/catalog/components/chat-gpt.mdx
deleted file mode 100644
index 0bb3b5dc59..0000000000
--- a/docs/catalog/components/chat-gpt.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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/claude-chat.mdx b/docs/catalog/components/claude-chat.mdx
deleted file mode 100644
index 8bc0455178..0000000000
--- a/docs/catalog/components/claude-chat.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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
deleted file mode 100644
index d1afeb539a..0000000000
--- a/docs/catalog/components/claude-code.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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/github-stars.mdx b/docs/catalog/components/github-stars.mdx
deleted file mode 100644
index d776856106..0000000000
--- a/docs/catalog/components/github-stars.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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/opencode.mdx b/docs/catalog/components/opencode.mdx
deleted file mode 100644
index a87fa7b627..0000000000
--- a/docs/catalog/components/opencode.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-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/docs.json b/docs/docs.json
index e5c9ffe190..372350056f 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -130,11 +130,9 @@
               "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"
             ]
           },
@@ -186,7 +184,6 @@
               "catalog/blocks/tiktok-follow",
               "catalog/blocks/x-post",
               "catalog/blocks/yt-lower-third",
-              "catalog/components/github-stars",
               "catalog/components/x-follow-card",
               "catalog/components/x-followers-overview"
             ]
@@ -257,9 +254,7 @@
               "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",
diff --git a/docs/packages/cli.mdx b/docs/packages/cli.mdx
index bd48396259..8c2d132469 100644
--- a/docs/packages/cli.mdx
+++ b/docs/packages/cli.mdx
@@ -196,7 +196,7 @@ This is suppressed in CI environments, non-TTY shells, and when `HYPERFRAMES_NO_
 
     ```bash
     # Add a block (sub-composition scene)
-    npx hyperframes add claude-code-window
+    npx hyperframes add terminal-simulator
 
     # Add a component (effect / snippet)
     npx hyperframes add shader-wipe
@@ -210,7 +210,7 @@ This is suppressed in CI environments, non-TTY shells, and when `HYPERFRAMES_NO_
 
     | Flag | Description |
     |------|-------------|
-    | `<name>` (positional) | Registry item name (e.g. `claude-code-window`, `shader-wipe`) |
+    | `<name>` (positional) | Registry item name (e.g. `terminal-simulator`, `shader-wipe`) |
     | `--dir` | Project directory (defaults to the current working directory) |
     | `--no-clipboard` | Skip copying the include snippet to the clipboard |
     | `--json` | Print a machine-readable summary (written files + snippet) to stdout |
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index de3f5166d1..e7cf767be7 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -2961,19 +2961,6 @@
         "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",
@@ -2999,31 +2986,6 @@
         "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",
@@ -3168,18 +3130,6 @@
         "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",
@@ -3288,18 +3238,6 @@
         "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",
diff --git a/packages/core/src/registry/remocnUiPrimitivesCatalog.test.ts b/packages/core/src/registry/remocnUiPrimitivesCatalog.test.ts
index eebc09b84c..a60bee679e 100644
--- a/packages/core/src/registry/remocnUiPrimitivesCatalog.test.ts
+++ b/packages/core/src/registry/remocnUiPrimitivesCatalog.test.ts
@@ -128,11 +128,8 @@ const remainingRemocnComponents = [
   "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",
@@ -145,7 +142,6 @@ const remainingRemocnComponents = [
   "dropdown-menu-item",
   "ecosystem-constellation",
   "frosted-glass-wipe",
-  "github-stars",
   "glass-code-block",
   "hero-device-assemble",
   "image-expand-to-fullscreen",
@@ -155,7 +151,6 @@ const remainingRemocnComponents = [
   "live-code-compilation",
   "mesh-gradient-bg",
   "micro-scale-fade",
-  "opencode",
   "pricing-tier-focus",
   "progress-steps",
   "registry",
diff --git a/registry/components/chat-gpt/chat-gpt.html b/registry/components/chat-gpt/chat-gpt.html
deleted file mode 100644
index 6ced4e271f..0000000000
--- a/registry/components/chat-gpt/chat-gpt.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!--
-  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
deleted file mode 100644
index 00dceff801..0000000000
--- a/registry/components/chat-gpt/demo.html
+++ /dev/null
@@ -1,177 +0,0 @@
-<!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;
-        /* ponytail: scale up — .demo-frame is not a GSAP target */
-        transform: scale(1.72);
-      }
-      .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, #f4f4f5, #e4e4e7);
-        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);
-        padding: 14px 16px;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-      .hf-remocn-chat-gpt .card-line {
-        height: 10px;
-        border-radius: 6px;
-        background: #e4e4e7;
-      }
-      .hf-remocn-chat-gpt .card-line.short {
-        width: 55%;
-      }
-      .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 class="card-line"></div>
-              <div class="card-line"></div>
-              <div class="card-line short"></div>
-            </div>
-            <div class="card">
-              <div class="card-line"></div>
-              <div class="card-line short"></div>
-            </div>
-            <div class="card">
-              <div class="card-line"></div>
-              <div class="card-line"></div>
-              <div class="card-line short"></div>
-            </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
deleted file mode 100644
index 5bc10f0522..0000000000
--- a/registry/components/chat-gpt/registry-item.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$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/claude-chat/claude-chat.html b/registry/components/claude-chat/claude-chat.html
deleted file mode 100644
index d13e82d806..0000000000
--- a/registry/components/claude-chat/claude-chat.html
+++ /dev/null
@@ -1,94 +0,0 @@
-<!--
-  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
deleted file mode 100644
index cdb948d956..0000000000
--- a/registry/components/claude-chat/demo.html
+++ /dev/null
@@ -1,191 +0,0 @@
-<!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;
-        transform: scale(0.92);
-        transform-origin: center center;
-      }
-      .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);
-        padding: 16px 18px;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-      .hf-remocn-claude-chat .card-label {
-        font-size: 11px;
-        font-weight: 700;
-        letter-spacing: 0.08em;
-        text-transform: uppercase;
-        color: #94a3b8;
-      }
-      .hf-remocn-claude-chat .card-bar {
-        height: 10px;
-        border-radius: 999px;
-        background: #e2e8f0;
-      }
-      .hf-remocn-claude-chat .card-bar.w-full { width: 100%; }
-      .hf-remocn-claude-chat .card-bar.w-3q  { width: 74%; }
-      .hf-remocn-claude-chat .card-bar.w-half { width: 52%; }
-      .hf-remocn-claude-chat .card-bar.accent {
-        background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
-        width: 40%;
-      }
-      .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 class="card-label">Response</div>
-              <div class="card-bar w-full"></div>
-              <div class="card-bar w-3q"></div>
-              <div class="card-bar accent"></div>
-            </div>
-            <div class="card">
-              <div class="card-label">Refinement</div>
-              <div class="card-bar w-full"></div>
-              <div class="card-bar w-half"></div>
-            </div>
-            <div class="card">
-              <div class="card-label">Export ready</div>
-              <div class="card-bar w-3q"></div>
-              <div class="card-bar w-full"></div>
-              <div class="card-bar w-half"></div>
-            </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
deleted file mode 100644
index 0b8d8804f1..0000000000
--- a/registry/components/claude-chat/registry-item.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$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
deleted file mode 100644
index 4779a14a75..0000000000
--- a/registry/components/claude-code/claude-code.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!--
-  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
deleted file mode 100644
index 3a82dcbe74..0000000000
--- a/registry/components/claude-code/demo.html
+++ /dev/null
@@ -1,158 +0,0 @@
-<!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;
-        transform: scale(0.78); /* ponytail: scale wrapper (not a GSAP target) to fill ~65% of frame */
-      }
-      .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: 52px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        padding: 0 20px;
-        background: #111827;
-        color: #94a3b8;
-        font-size: 15px;
-        font-weight: 500;
-        letter-spacing: 0.01em;
-      }
-      .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: 26px 22px;
-        border-right: 1px solid rgba(148, 163, 184, 0.18);
-        color: #94a3b8;
-        font-size: 14px;
-        line-height: 2;
-      }
-      .hf-remocn-claude-code .editor {
-        padding: 26px 22px;
-        display: grid;
-        gap: 16px;
-      }
-      .hf-remocn-claude-code .line {
-        display: block;
-        height: 18px;
-        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: 20px 22px 26px;
-        border-top: 1px solid rgba(148, 163, 184, 0.18);
-        color: #86efac;
-        min-height: 82px;
-        font-size: 14px;
-      }
-    </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
deleted file mode 100644
index 78056d1254..0000000000
--- a/registry/components/claude-code/registry-item.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$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/github-stars/demo.html b/registry/components/github-stars/demo.html
deleted file mode 100644
index a273a8a112..0000000000
--- a/registry/components/github-stars/demo.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<!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;
-        /* ponytail: scale-up only — demo-frame is not a GSAP target */
-        transform: scale(1.8);
-      }
-      .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;
-        font-size: 16px;
-      }
-      .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
deleted file mode 100644
index 278469368b..0000000000
--- a/registry/components/github-stars/github-stars.html
+++ /dev/null
@@ -1,87 +0,0 @@
-<!--
-  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
deleted file mode 100644
index c9bc745ef3..0000000000
--- a/registry/components/github-stars/registry-item.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$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/opencode/demo.html b/registry/components/opencode/demo.html
deleted file mode 100644
index 72ec0e9fda..0000000000
--- a/registry/components/opencode/demo.html
+++ /dev/null
@@ -1,158 +0,0 @@
-<!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;
-        /* ponytail: scale wrapper — GSAP only targets .line and .terminal inside, not this element */
-        transform: scale(0.76);
-      }
-      .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;
-        font-size: 14px;
-        font-weight: 500;
-      }
-      .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;
-        font-size: 15px;
-        line-height: 2;
-      }
-      .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;
-        font-size: 15px;
-      }
-    </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
deleted file mode 100644
index 62eb1cff2c..0000000000
--- a/registry/components/opencode/opencode.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!--
-  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
deleted file mode 100644
index 632e704db7..0000000000
--- a/registry/components/opencode/registry-item.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$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/registry.json b/registry/registry.json
index d7a4ccfcb8..ec9b18c8fe 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -1035,10 +1035,6 @@
       "name": "browser-flow",
       "type": "hyperframes:component"
     },
-    {
-      "name": "chat-gpt",
-      "type": "hyperframes:component"
-    },
     {
       "name": "chat-to-preview-layout",
       "type": "hyperframes:component"
@@ -1047,14 +1043,6 @@
       "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"
@@ -1103,10 +1091,6 @@
       "name": "frosted-glass-wipe",
       "type": "hyperframes:component"
     },
-    {
-      "name": "github-stars",
-      "type": "hyperframes:component"
-    },
     {
       "name": "glass-code-block",
       "type": "hyperframes:component"
@@ -1143,10 +1127,6 @@
       "name": "micro-scale-fade",
       "type": "hyperframes:component"
     },
-    {
-      "name": "opencode",
-      "type": "hyperframes:component"
-    },
     {
       "name": "pricing-tier-focus",
       "type": "hyperframes:component"