diff --git a/docs/catalog/components/bottom-up-letters.mdx b/docs/catalog/components/bottom-up-letters.mdx
new file mode 100644
index 0000000000..19c258b675
--- /dev/null
+++ b/docs/catalog/components/bottom-up-letters.mdx
@@ -0,0 +1,38 @@
+---
+title: "Bottom Up Letters"
+description: "Splits text into letters and reveals each glyph from below with deterministic staggered timing"
+---
+
+# Bottom Up Letters
+
+Splits text into letters and reveals each glyph from below with deterministic staggered timing
+
+`motion-primitive` `text` `letters` `reveal`
+
+<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/bottom-up-letters.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add bottom-up-letters
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `bottom-up-letters.html` | `compositions/components/bottom-up-letters.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/bottom-up-letters.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/dynamic-grid.mdx b/docs/catalog/components/dynamic-grid.mdx
new file mode 100644
index 0000000000..97d525925a
--- /dev/null
+++ b/docs/catalog/components/dynamic-grid.mdx
@@ -0,0 +1,38 @@
+---
+title: "Dynamic Grid"
+description: "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes"
+---
+
+# Dynamic Grid
+
+A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes
+
+`motion-primitive` `background` `grid` `ui`
+
+<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/dynamic-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add dynamic-grid
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `dynamic-grid.html` | `compositions/components/dynamic-grid.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/dynamic-grid.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/fade-through.mdx b/docs/catalog/components/fade-through.mdx
new file mode 100644
index 0000000000..277b9295d9
--- /dev/null
+++ b/docs/catalog/components/fade-through.mdx
@@ -0,0 +1,38 @@
+---
+title: "Fade Through"
+description: "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer"
+---
+
+# Fade Through
+
+A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer
+
+`motion-primitive` `transition` `fade` `scene`
+
+<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/fade-through.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add fade-through
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `fade-through.html` | `compositions/components/fade-through.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/fade-through.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/inline-highlight.mdx b/docs/catalog/components/inline-highlight.mdx
new file mode 100644
index 0000000000..3bc285e218
--- /dev/null
+++ b/docs/catalog/components/inline-highlight.mdx
@@ -0,0 +1,38 @@
+---
+title: "Inline Highlight"
+description: "A clean marker-style inline highlight that animates behind text using a CSS scale variable"
+---
+
+# Inline Highlight
+
+A clean marker-style inline highlight that animates behind text using a CSS scale variable
+
+`motion-primitive` `text` `highlight` `caption`
+
+<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/inline-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add inline-highlight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `inline-highlight.html` | `compositions/components/inline-highlight.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/inline-highlight.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/number-wheel.mdx b/docs/catalog/components/number-wheel.mdx
new file mode 100644
index 0000000000..76afe4ff98
--- /dev/null
+++ b/docs/catalog/components/number-wheel.mdx
@@ -0,0 +1,38 @@
+---
+title: "Number Wheel"
+description: "A rolling digit counter primitive for metrics, prices, counts, and scoreboards"
+---
+
+# Number Wheel
+
+A rolling digit counter primitive for metrics, prices, counts, and scoreboards
+
+`motion-primitive` `number` `counter` `data`
+
+<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/number-wheel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add number-wheel
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `number-wheel.html` | `compositions/components/number-wheel.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/number-wheel.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/simulated-cursor.mdx b/docs/catalog/components/simulated-cursor.mdx
new file mode 100644
index 0000000000..24bc682c47
--- /dev/null
+++ b/docs/catalog/components/simulated-cursor.mdx
@@ -0,0 +1,38 @@
+---
+title: "Simulated Cursor"
+description: "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos"
+---
+
+# Simulated Cursor
+
+A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos
+
+`motion-primitive` `cursor` `ui` `walkthrough`
+
+<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/simulated-cursor.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add simulated-cursor
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `simulated-cursor.html` | `compositions/components/simulated-cursor.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/simulated-cursor.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/soft-blur-in.mdx b/docs/catalog/components/soft-blur-in.mdx
new file mode 100644
index 0000000000..8b4210581f
--- /dev/null
+++ b/docs/catalog/components/soft-blur-in.mdx
@@ -0,0 +1,38 @@
+---
+title: "Soft Blur In"
+description: "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts"
+---
+
+# Soft Blur In
+
+A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts
+
+`motion-primitive` `text` `reveal` `blur`
+
+<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/soft-blur-in.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add soft-blur-in
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `soft-blur-in.html` | `compositions/components/soft-blur-in.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/soft-blur-in.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/catalog/components/tracking-in.mdx b/docs/catalog/components/tracking-in.mdx
new file mode 100644
index 0000000000..9e0efaa3e7
--- /dev/null
+++ b/docs/catalog/components/tracking-in.mdx
@@ -0,0 +1,38 @@
+---
+title: "Tracking In"
+description: "A precise letter-spacing reveal for premium headings and interface labels"
+---
+
+# Tracking In
+
+A precise letter-spacing reveal for premium headings and interface labels
+
+`motion-primitive` `text` `reveal` `typography`
+
+<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/tracking-in.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add tracking-in
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Component |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `tracking-in.html` | `compositions/components/tracking-in.html` | hyperframes:snippet |
+
+## Usage
+
+Open `compositions/components/tracking-in.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
diff --git a/docs/docs.json b/docs/docs.json
index 7e8ac25996..825e2bfc6a 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -238,6 +238,19 @@
               "catalog/blocks/world-map"
             ]
           },
+          {
+            "group": "Motion Primitives",
+            "pages": [
+              "catalog/components/bottom-up-letters",
+              "catalog/components/dynamic-grid",
+              "catalog/components/fade-through",
+              "catalog/components/inline-highlight",
+              "catalog/components/number-wheel",
+              "catalog/components/simulated-cursor",
+              "catalog/components/soft-blur-in",
+              "catalog/components/tracking-in"
+            ]
+          },
           {
             "group": "Effects",
             "pages": [
diff --git a/docs/public/catalog-index.json b/docs/public/catalog-index.json
index 9262a03b44..8916595a00 100644
--- a/docs/public/catalog-index.json
+++ b/docs/public/catalog-index.json
@@ -41,6 +41,20 @@
         "href": "/catalog/blocks/blue-sweater-intro-video",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png"
     },
+    {
+        "name": "bottom-up-letters",
+        "type": "component",
+        "title": "Bottom Up Letters",
+        "description": "Splits text into letters and reveals each glyph from below with deterministic staggered timing",
+        "tags": [
+            "motion-primitive",
+            "text",
+            "letters",
+            "reveal"
+        ],
+        "href": "/catalog/components/bottom-up-letters",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png"
+    },
     {
         "name": "caption-blend-difference",
         "type": "component",
@@ -337,6 +351,34 @@
         "href": "/catalog/blocks/domain-warp-dissolve",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png"
     },
+    {
+        "name": "dynamic-grid",
+        "type": "component",
+        "title": "Dynamic Grid",
+        "description": "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes",
+        "tags": [
+            "motion-primitive",
+            "background",
+            "grid",
+            "ui"
+        ],
+        "href": "/catalog/components/dynamic-grid",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png"
+    },
+    {
+        "name": "fade-through",
+        "type": "component",
+        "title": "Fade Through",
+        "description": "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer",
+        "tags": [
+            "motion-primitive",
+            "transition",
+            "fade",
+            "scene"
+        ],
+        "href": "/catalog/components/fade-through",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png"
+    },
     {
         "name": "flash-through-white",
         "type": "block",
@@ -414,6 +456,20 @@
         "href": "/catalog/components/grid-pixelate-wipe",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png"
     },
+    {
+        "name": "inline-highlight",
+        "type": "component",
+        "title": "Inline Highlight",
+        "description": "A clean marker-style inline highlight that animates behind text using a CSS scale variable",
+        "tags": [
+            "motion-primitive",
+            "text",
+            "highlight",
+            "caption"
+        ],
+        "href": "/catalog/components/inline-highlight",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png"
+    },
     {
         "name": "motion-blur",
         "type": "component",
@@ -580,6 +636,20 @@
         "href": "/catalog/blocks/north-korea-locked-down",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png"
     },
+    {
+        "name": "number-wheel",
+        "type": "component",
+        "title": "Number Wheel",
+        "description": "A rolling digit counter primitive for metrics, prices, counts, and scoreboards",
+        "tags": [
+            "motion-primitive",
+            "number",
+            "counter",
+            "data"
+        ],
+        "href": "/catalog/components/number-wheel",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png"
+    },
     {
         "name": "nyc-paris-flight",
         "type": "block",
@@ -689,6 +759,34 @@
         "href": "/catalog/components/shimmer-sweep",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png"
     },
+    {
+        "name": "simulated-cursor",
+        "type": "component",
+        "title": "Simulated Cursor",
+        "description": "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos",
+        "tags": [
+            "motion-primitive",
+            "cursor",
+            "ui",
+            "walkthrough"
+        ],
+        "href": "/catalog/components/simulated-cursor",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png"
+    },
+    {
+        "name": "soft-blur-in",
+        "type": "component",
+        "title": "Soft Blur In",
+        "description": "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts",
+        "tags": [
+            "motion-primitive",
+            "text",
+            "reveal",
+            "blur"
+        ],
+        "href": "/catalog/components/soft-blur-in",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png"
+    },
     {
         "name": "spain-map",
         "type": "block",
@@ -769,6 +867,20 @@
         "href": "/catalog/blocks/tiktok-follow",
         "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png"
     },
+    {
+        "name": "tracking-in",
+        "type": "component",
+        "title": "Tracking In",
+        "description": "A precise letter-spacing reveal for premium headings and interface labels",
+        "tags": [
+            "motion-primitive",
+            "text",
+            "reveal",
+            "typography"
+        ],
+        "href": "/catalog/components/tracking-in",
+        "preview": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png"
+    },
     {
         "name": "transitions-3d",
         "type": "block",
diff --git a/packages/core/src/registry/catalogGeneratorInstructions.test.ts b/packages/core/src/registry/catalogGeneratorInstructions.test.ts
index 5871339b43..8336a13019 100644
--- a/packages/core/src/registry/catalogGeneratorInstructions.test.ts
+++ b/packages/core/src/registry/catalogGeneratorInstructions.test.ts
@@ -16,3 +16,21 @@ describe("catalog generator texture instructions", () => {
     expect(generatorSource).toContain("real \\`<style>\\` element near the bottom");
   });
 });
+
+describe("catalog generator motion primitives group", () => {
+  it("groups web-native motion primitive components before generic effects", () => {
+    expect(generatorSource).toContain('"Motion Primitives"');
+    expect(generatorSource).toContain('tags.includes("motion-primitive")');
+  });
+
+  it("preserves existing code snippet and text effect catalog families", () => {
+    expect(generatorSource).toContain('"Text Effects"');
+    expect(generatorSource).toContain('"Code Snippets"');
+    expect(generatorSource).toContain('tags.includes("text-effect")');
+    expect(generatorSource).toContain('entry.name.startsWith("code-snippet-")');
+  });
+
+  it("keeps the public catalog index on its existing four-space JSON style", () => {
+    expect(generatorSource).toContain("JSON.stringify(catalogIndex, null, 4)");
+  });
+});
diff --git a/packages/core/src/registry/motionPrimitivesCatalog.test.ts b/packages/core/src/registry/motionPrimitivesCatalog.test.ts
new file mode 100644
index 0000000000..9505b6d8d3
--- /dev/null
+++ b/packages/core/src/registry/motionPrimitivesCatalog.test.ts
@@ -0,0 +1,58 @@
+import { existsSync, readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vitest";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(here, "../../../..");
+const registryRoot = resolve(repoRoot, "registry");
+
+const pilotMotionPrimitives = [
+  "soft-blur-in",
+  "tracking-in",
+  "bottom-up-letters",
+  "inline-highlight",
+  "number-wheel",
+  "simulated-cursor",
+  "fade-through",
+  "dynamic-grid",
+] as const;
+
+function readJson<T>(path: string): T {
+  return JSON.parse(readFileSync(path, "utf-8")) as T;
+}
+
+describe("motion primitives catalog slice", () => {
+  it("registers the pilot motion primitives as tagged components", () => {
+    const registry = readJson<{ items: { name: string; type: string }[] }>(
+      resolve(registryRoot, "registry.json"),
+    );
+    const componentEntries = new Map(
+      registry.items
+        .filter((item) => item.type === "hyperframes:component")
+        .map((item) => [item.name, item]),
+    );
+
+    for (const name of pilotMotionPrimitives) {
+      expect(componentEntries.has(name)).toBe(true);
+
+      const componentDir = resolve(registryRoot, "components", name);
+      const manifest = readJson<{
+        type: string;
+        tags?: string[];
+        files?: { path: string; target: string; type: string }[];
+      }>(resolve(componentDir, "registry-item.json"));
+      expect(manifest.type).toBe("hyperframes:component");
+      expect(manifest.tags).toContain("motion-primitive");
+      expect(manifest.files).toEqual([
+        {
+          path: `${name}.html`,
+          target: `compositions/components/${name}.html`,
+          type: "hyperframes:snippet",
+        },
+      ]);
+      expect(existsSync(resolve(componentDir, `${name}.html`))).toBe(true);
+      expect(existsSync(resolve(componentDir, "demo.html"))).toBe(true);
+    }
+  });
+});
diff --git a/registry/components/bottom-up-letters/bottom-up-letters.html b/registry/components/bottom-up-letters/bottom-up-letters.html
new file mode 100644
index 0000000000..cf8d9e6459
--- /dev/null
+++ b/registry/components/bottom-up-letters/bottom-up-letters.html
@@ -0,0 +1,47 @@
+<!--
+  Bottom Up Letters - deterministic text splitter.
+
+  Add class="hf-bottom-up-letters" to a plain text element. This script wraps
+  each character in a span so your paused GSAP timeline can stagger the reveal.
+-->
+
+<style>
+  .hf-bottom-up-letters {
+    display: inline-block;
+  }
+  .hf-bottom-up-letters-char {
+    display: inline-block;
+    opacity: 0;
+    transform: translate3d(0, 0.85em, 0);
+    will-change: transform, opacity;
+  }
+</style>
+
+<script>
+  (function () {
+    document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
+      if (el.dataset.hfLettersReady === "1") return;
+      const text = el.textContent || "";
+      el.textContent = "";
+      for (const char of text) {
+        const span = document.createElement("span");
+        span.className = "hf-bottom-up-letters-char";
+        span.textContent = char === " " ? "\u00a0" : char;
+        el.appendChild(span);
+      }
+      el.dataset.hfLettersReady = "1";
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-bottom-up-letters-char", {
+    opacity: 1,
+    y: 0,
+    duration: 0.48,
+    ease: "back.out(1.7)",
+    stagger: 0.025,
+  }, startTime);
+-->
diff --git a/registry/components/bottom-up-letters/demo.html b/registry/components/bottom-up-letters/demo.html
new file mode 100644
index 0000000000..35bec6c747
--- /dev/null
+++ b/registry/components/bottom-up-letters/demo.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Bottom Up Letters - 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: #16120e;
+        color: #f7ead6;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-bottom-up-letters {
+        display: inline-block;
+        font-size: 126px;
+        line-height: 1;
+        font-weight: 900;
+      }
+      .hf-bottom-up-letters-char {
+        display: inline-block;
+        opacity: 0;
+        transform: translate3d(0, 0.85em, 0);
+        will-change: transform, opacity;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="bottom-up-letters-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="hf-bottom-up-letters">Build with motion</div>
+      <script>
+        document.querySelectorAll(".hf-bottom-up-letters").forEach((el) => {
+          const text = el.textContent || "";
+          el.textContent = "";
+          for (const char of text) {
+            const span = document.createElement("span");
+            span.className = "hf-bottom-up-letters-char";
+            span.textContent = char === " " ? "\u00a0" : char;
+            el.appendChild(span);
+          }
+        });
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-bottom-up-letters-char",
+          { opacity: 1, y: 0, duration: 0.48, ease: "back.out(1.7)", stagger: 0.025 },
+          0.45,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["bottom-up-letters-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/bottom-up-letters/registry-item.json b/registry/components/bottom-up-letters/registry-item.json
new file mode 100644
index 0000000000..3f822b3f93
--- /dev/null
+++ b/registry/components/bottom-up-letters/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "bottom-up-letters",
+  "type": "hyperframes:component",
+  "title": "Bottom Up Letters",
+  "description": "Splits text into letters and reveals each glyph from below with deterministic staggered timing",
+  "tags": ["motion-primitive", "text", "letters", "reveal"],
+  "files": [
+    {
+      "path": "bottom-up-letters.html",
+      "target": "compositions/components/bottom-up-letters.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/bottom-up-letters.png"
+  }
+}
diff --git a/registry/components/dynamic-grid/demo.html b/registry/components/dynamic-grid/demo.html
new file mode 100644
index 0000000000..627c6d598e
--- /dev/null
+++ b/registry/components/dynamic-grid/demo.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dynamic Grid - 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 {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: linear-gradient(135deg, #07131d, #13312d);
+        color: white;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .hf-dynamic-grid {
+        --hf-grid-size: 72px;
+        --hf-grid-color: rgba(255, 255, 255, 0.16);
+        --hf-grid-x: 0px;
+        --hf-grid-y: 0px;
+        --hf-grid-opacity: 1;
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: var(--hf-grid-opacity);
+        background-image:
+          linear-gradient(var(--hf-grid-color) 1px, transparent 1px),
+          linear-gradient(90deg, var(--hf-grid-color) 1px, transparent 1px);
+        background-size: var(--hf-grid-size) var(--hf-grid-size);
+        background-position: var(--hf-grid-x) var(--hf-grid-y);
+      }
+      .content {
+        position: absolute;
+        left: 180px;
+        bottom: 170px;
+        width: 1020px;
+      }
+      .title {
+        font-size: 118px;
+        line-height: 0.96;
+        font-weight: 900;
+        letter-spacing: -0.035em;
+      }
+      .copy {
+        margin-top: 34px;
+        width: 760px;
+        font-size: 38px;
+        line-height: 1.2;
+        color: #c7e8df;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="dynamic-grid-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="6"
+    >
+      <div class="hf-dynamic-grid" aria-hidden="true"></div>
+      <div class="content">
+        <div class="title">Dynamic grid motion</div>
+        <div class="copy">
+          A web-native background primitive for product demos, explainers, and data scenes.
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".content", { opacity: 0, y: 32, duration: 0.7, ease: "power3.out" }, 0.25);
+        tl.to(
+          ".hf-dynamic-grid",
+          { "--hf-grid-x": "72px", "--hf-grid-y": "-72px", duration: 6, ease: "none" },
+          0,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["dynamic-grid-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/dynamic-grid/dynamic-grid.html b/registry/components/dynamic-grid/dynamic-grid.html
new file mode 100644
index 0000000000..169f8e5380
--- /dev/null
+++ b/registry/components/dynamic-grid/dynamic-grid.html
@@ -0,0 +1,38 @@
+<!--
+  Dynamic Grid - animated background primitive.
+
+  Paste the grid as the first child of a scene. Animate --hf-grid-x,
+  --hf-grid-y, and --hf-grid-opacity from your paused GSAP timeline.
+-->
+
+<div class="hf-dynamic-grid" aria-hidden="true"></div>
+
+<style>
+  .hf-dynamic-grid {
+    --hf-grid-size: 72px;
+    --hf-grid-color: rgba(255, 255, 255, 0.16);
+    --hf-grid-x: 0px;
+    --hf-grid-y: 0px;
+    --hf-grid-opacity: 1;
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    opacity: var(--hf-grid-opacity);
+    background-image:
+      linear-gradient(var(--hf-grid-color) 1px, transparent 1px),
+      linear-gradient(90deg, var(--hf-grid-color) 1px, transparent 1px);
+    background-size: var(--hf-grid-size) var(--hf-grid-size);
+    background-position: var(--hf-grid-x) var(--hf-grid-y);
+  }
+</style>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-dynamic-grid", {
+    "--hf-grid-x": "72px",
+    "--hf-grid-y": "-72px",
+    duration: 6,
+    ease: "none",
+  }, 0);
+-->
diff --git a/registry/components/dynamic-grid/registry-item.json b/registry/components/dynamic-grid/registry-item.json
new file mode 100644
index 0000000000..21041513f4
--- /dev/null
+++ b/registry/components/dynamic-grid/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "dynamic-grid",
+  "type": "hyperframes:component",
+  "title": "Dynamic Grid",
+  "description": "A responsive animated grid background driven by CSS variables for SaaS, code, and data scenes",
+  "tags": ["motion-primitive", "background", "grid", "ui"],
+  "files": [
+    {
+      "path": "dynamic-grid.html",
+      "target": "compositions/components/dynamic-grid.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/dynamic-grid.png"
+  }
+}
diff --git a/registry/components/fade-through/demo.html b/registry/components/fade-through/demo.html
new file mode 100644
index 0000000000..1d77709e81
--- /dev/null
+++ b/registry/components/fade-through/demo.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Fade Through - 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 {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: Inter, system-ui, sans-serif;
+        color: white;
+      }
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: grid;
+        place-items: center;
+        font-size: 112px;
+        font-weight: 900;
+      }
+      .a {
+        background: linear-gradient(135deg, #243b55, #141e30);
+      }
+      .b {
+        background: linear-gradient(135deg, #1d976c, #93f9b9);
+        color: #073f2e;
+        opacity: 0;
+      }
+      .hf-fade-through-wash {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        background: #f8f5ec;
+        z-index: 900;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="fade-through-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="scene a hf-fade-through-out">Before</div>
+      <div class="scene b hf-fade-through-in">After</div>
+      <div class="hf-fade-through-wash" aria-hidden="true"></div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(".hf-fade-through-out", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.3);
+        tl.to(".hf-fade-through-wash", { opacity: 1, duration: 0.35, ease: "power2.inOut" }, 1.3);
+        tl.to(".hf-fade-through-wash", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, 1.65);
+        tl.to(".hf-fade-through-in", { opacity: 1, duration: 0.55, ease: "power2.out" }, 1.65);
+        window.__timelines = window.__timelines || {};
+        window.__timelines["fade-through-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/fade-through/fade-through.html b/registry/components/fade-through/fade-through.html
new file mode 100644
index 0000000000..8a80a4b75c
--- /dev/null
+++ b/registry/components/fade-through/fade-through.html
@@ -0,0 +1,32 @@
+<!--
+  Fade Through - scene transition primitive.
+
+  Put class="hf-fade-through-out" on the outgoing layer and
+  class="hf-fade-through-in" on the incoming layer. Add the optional wash
+  overlay below when you want a brighter mid-transition frame.
+-->
+
+<div class="hf-fade-through-wash" aria-hidden="true"></div>
+
+<style>
+  .hf-fade-through-in {
+    opacity: 0;
+  }
+  .hf-fade-through-wash {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+    background: var(--hf-fade-through-wash, #f8f5ec);
+    z-index: 900;
+  }
+</style>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-fade-through-out", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, startTime);
+  tl.to(".hf-fade-through-wash", { opacity: 1, duration: 0.35, ease: "power2.inOut" }, startTime);
+  tl.to(".hf-fade-through-wash", { opacity: 0, duration: 0.45, ease: "power2.inOut" }, startTime + 0.35);
+  tl.to(".hf-fade-through-in", { opacity: 1, duration: 0.55, ease: "power2.out" }, startTime + 0.35);
+-->
diff --git a/registry/components/fade-through/registry-item.json b/registry/components/fade-through/registry-item.json
new file mode 100644
index 0000000000..afb8f12b48
--- /dev/null
+++ b/registry/components/fade-through/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "fade-through",
+  "type": "hyperframes:component",
+  "title": "Fade Through",
+  "description": "A calm transition primitive that fades one layer out, passes through a wash, and reveals the next layer",
+  "tags": ["motion-primitive", "transition", "fade", "scene"],
+  "files": [
+    {
+      "path": "fade-through.html",
+      "target": "compositions/components/fade-through.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/fade-through.png"
+  }
+}
diff --git a/registry/components/inline-highlight/demo.html b/registry/components/inline-highlight/demo.html
new file mode 100644
index 0000000000..238493fe65
--- /dev/null
+++ b/registry/components/inline-highlight/demo.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Inline Highlight - 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: #fffaf0;
+        color: #171717;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .copy {
+        width: 1300px;
+        font-size: 86px;
+        line-height: 1.12;
+        font-weight: 820;
+        letter-spacing: -0.02em;
+      }
+      .hf-inline-highlight {
+        --hf-highlight-scale: 0;
+        --hf-highlight-color: #ffe66d;
+        position: relative;
+        display: inline;
+        z-index: 0;
+      }
+      .hf-inline-highlight::after {
+        content: "";
+        position: absolute;
+        left: -0.08em;
+        right: -0.08em;
+        bottom: 0.05em;
+        height: 0.38em;
+        background: var(--hf-highlight-color);
+        transform: scaleX(var(--hf-highlight-scale));
+        transform-origin: left center;
+        z-index: -1;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="inline-highlight-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="copy">
+        Turn the important words into
+        <span class="hf-inline-highlight">animated emphasis</span> without rebuilding the scene.
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".copy", { opacity: 0, y: 24, duration: 0.55, ease: "power3.out" }, 0.3);
+        tl.to(
+          ".hf-inline-highlight",
+          { "--hf-highlight-scale": 1, duration: 0.6, ease: "power2.out" },
+          0.95,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["inline-highlight-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/inline-highlight/inline-highlight.html b/registry/components/inline-highlight/inline-highlight.html
new file mode 100644
index 0000000000..9cf87de4c5
--- /dev/null
+++ b/registry/components/inline-highlight/inline-highlight.html
@@ -0,0 +1,39 @@
+<!--
+  Inline Highlight - animated marker underline/fill.
+
+  Wrap target text with class="hf-inline-highlight". Animate
+  --hf-highlight-scale from 0 to 1 on the element.
+-->
+
+<style>
+  .hf-inline-highlight {
+    --hf-highlight-scale: 0;
+    --hf-highlight-color: #fff06a;
+    position: relative;
+    display: inline;
+    z-index: 0;
+  }
+  .hf-inline-highlight::after {
+    content: "";
+    position: absolute;
+    left: -0.08em;
+    right: -0.08em;
+    bottom: 0.05em;
+    height: 0.38em;
+    background: var(--hf-highlight-color);
+    transform: scaleX(var(--hf-highlight-scale));
+    transform-origin: left center;
+    z-index: -1;
+  }
+</style>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-inline-highlight", {
+    "--hf-highlight-scale": 1,
+    duration: 0.55,
+    ease: "power2.out",
+    stagger: 0.12,
+  }, startTime);
+-->
diff --git a/registry/components/inline-highlight/registry-item.json b/registry/components/inline-highlight/registry-item.json
new file mode 100644
index 0000000000..635c0e7dbd
--- /dev/null
+++ b/registry/components/inline-highlight/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "inline-highlight",
+  "type": "hyperframes:component",
+  "title": "Inline Highlight",
+  "description": "A clean marker-style inline highlight that animates behind text using a CSS scale variable",
+  "tags": ["motion-primitive", "text", "highlight", "caption"],
+  "files": [
+    {
+      "path": "inline-highlight.html",
+      "target": "compositions/components/inline-highlight.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/inline-highlight.png"
+  }
+}
diff --git a/registry/components/number-wheel/demo.html b/registry/components/number-wheel/demo.html
new file mode 100644
index 0000000000..2a96b9ef7a
--- /dev/null
+++ b/registry/components/number-wheel/demo.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Number Wheel - 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: #071b16;
+        color: #ecfff8;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      .metric {
+        text-align: center;
+      }
+      .label {
+        color: #68d8b5;
+        font-size: 38px;
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+      }
+      .hf-number-wheel {
+        margin-top: 36px;
+        display: inline-flex;
+        align-items: baseline;
+        gap: 0.02em;
+        font-size: 172px;
+        font-weight: 900;
+        font-variant-numeric: tabular-nums;
+      }
+      .hf-number-wheel-digit {
+        display: inline-block;
+        height: 1em;
+        overflow: hidden;
+      }
+      .hf-number-wheel-strip {
+        display: grid;
+        transform: translateY(0em);
+        will-change: transform;
+      }
+      .hf-number-wheel-strip span {
+        height: 1em;
+        line-height: 1em;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="number-wheel-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="metric">
+        <div class="label">GitHub stars</div>
+        <span class="hf-number-wheel" data-value="30222"></span>
+      </div>
+      <script>
+        document.querySelectorAll(".hf-number-wheel").forEach((el) => {
+          const value = el.dataset.value || "0";
+          el.textContent = "";
+          for (const char of value) {
+            if (!/\d/.test(char)) {
+              el.append(document.createTextNode(char));
+              continue;
+            }
+            const digit = Number(char);
+            const frame = document.createElement("span");
+            frame.className = "hf-number-wheel-digit";
+            const strip = document.createElement("span");
+            strip.className = "hf-number-wheel-strip";
+            strip.style.setProperty("--hf-number-target-y", `${-digit}em`);
+            for (let i = 0; i <= digit; i++) {
+              const step = document.createElement("span");
+              step.textContent = String(i);
+              strip.appendChild(step);
+            }
+            frame.appendChild(strip);
+            el.appendChild(frame);
+          }
+        });
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".label", { opacity: 0, y: 18, duration: 0.5, ease: "power3.out" }, 0.2);
+        tl.to(
+          ".hf-number-wheel-strip",
+          {
+            y: (_, strip) => strip.style.getPropertyValue("--hf-number-target-y"),
+            duration: 1.2,
+            ease: "power3.out",
+            stagger: 0.06,
+          },
+          0.65,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["number-wheel-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/number-wheel/number-wheel.html b/registry/components/number-wheel/number-wheel.html
new file mode 100644
index 0000000000..82031a4048
--- /dev/null
+++ b/registry/components/number-wheel/number-wheel.html
@@ -0,0 +1,73 @@
+<!--
+  Number Wheel - rolling digit counter.
+
+  Markup:
+    <span class="hf-number-wheel" data-value="30222"></span>
+
+  Paste this snippet once. It builds one column per digit. Animate the generated
+  .hf-number-wheel-strip elements with the data-target-y custom property.
+-->
+
+<style>
+  .hf-number-wheel {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.02em;
+    font-variant-numeric: tabular-nums;
+  }
+  .hf-number-wheel-digit {
+    display: inline-block;
+    height: 1em;
+    overflow: hidden;
+  }
+  .hf-number-wheel-strip {
+    display: grid;
+    transform: translateY(0em);
+    will-change: transform;
+  }
+  .hf-number-wheel-strip span {
+    height: 1em;
+    line-height: 1em;
+  }
+</style>
+
+<script>
+  (function () {
+    document.querySelectorAll(".hf-number-wheel").forEach((el) => {
+      if (el.dataset.hfNumberWheelReady === "1") return;
+      const value = el.dataset.value || "0";
+      el.textContent = "";
+      for (const char of value) {
+        if (!/\d/.test(char)) {
+          el.append(document.createTextNode(char));
+          continue;
+        }
+        const digit = Number(char);
+        const frame = document.createElement("span");
+        frame.className = "hf-number-wheel-digit";
+        const strip = document.createElement("span");
+        strip.className = "hf-number-wheel-strip";
+        strip.style.setProperty("--hf-number-target-y", `${-digit}em`);
+        for (let i = 0; i <= digit; i++) {
+          const step = document.createElement("span");
+          step.textContent = String(i);
+          strip.appendChild(step);
+        }
+        frame.appendChild(strip);
+        el.appendChild(frame);
+      }
+      el.dataset.hfNumberWheelReady = "1";
+    });
+  })();
+</script>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-number-wheel-strip", {
+    y: (_, strip) => strip.style.getPropertyValue("--hf-number-target-y"),
+    duration: 1.1,
+    ease: "power3.out",
+    stagger: 0.05,
+  }, startTime);
+-->
diff --git a/registry/components/number-wheel/registry-item.json b/registry/components/number-wheel/registry-item.json
new file mode 100644
index 0000000000..408c71de26
--- /dev/null
+++ b/registry/components/number-wheel/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "number-wheel",
+  "type": "hyperframes:component",
+  "title": "Number Wheel",
+  "description": "A rolling digit counter primitive for metrics, prices, counts, and scoreboards",
+  "tags": ["motion-primitive", "number", "counter", "data"],
+  "files": [
+    {
+      "path": "number-wheel.html",
+      "target": "compositions/components/number-wheel.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/number-wheel.png"
+  }
+}
diff --git a/registry/components/simulated-cursor/demo.html b/registry/components/simulated-cursor/demo.html
new file mode 100644
index 0000000000..77a7bdb903
--- /dev/null
+++ b/registry/components/simulated-cursor/demo.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Simulated Cursor - 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 {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        background: #ecf1f3;
+        font-family: Inter, system-ui, sans-serif;
+        display: grid;
+        place-items: center;
+        color: #152026;
+      }
+      .card {
+        width: 880px;
+        padding: 72px;
+        background: white;
+        border: 1px solid #dce4e8;
+        box-shadow: 0 38px 90px rgba(37, 55, 66, 0.15);
+      }
+      .title {
+        font-size: 64px;
+        font-weight: 850;
+        letter-spacing: -0.03em;
+      }
+      .button {
+        margin-top: 48px;
+        display: inline-flex;
+        padding: 22px 36px;
+        background: #141a20;
+        color: white;
+        font-size: 28px;
+        font-weight: 760;
+      }
+      .hf-simulated-cursor {
+        --hf-cursor-x: 420px;
+        --hf-cursor-y: 360px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 44px;
+        height: 44px;
+        transform: translate3d(var(--hf-cursor-x), var(--hf-cursor-y), 0);
+        pointer-events: none;
+        z-index: 999;
+        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
+      }
+      .hf-simulated-cursor-pulse {
+        position: absolute;
+        left: 9px;
+        top: 9px;
+        width: 22px;
+        height: 22px;
+        border: 2px solid rgba(20, 26, 32, 0.75);
+        border-radius: 999px;
+        opacity: 0;
+        transform: scale(0.2);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="simulated-cursor-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="card">
+        <div class="title">Point at the action without screen recording.</div>
+        <div class="button">Generate video</div>
+      </div>
+      <div class="hf-simulated-cursor" aria-hidden="true">
+        <div class="hf-simulated-cursor-pulse"></div>
+        <svg viewBox="0 0 24 24" width="44" height="44">
+          <path
+            d="M3 2.8 20.6 14 12.8 15.5 9 22 3 2.8Z"
+            fill="white"
+            stroke="rgba(0,0,0,0.45)"
+            stroke-width="1.4"
+          />
+        </svg>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.from(".card", { opacity: 0, y: 30, duration: 0.6, ease: "power3.out" }, 0.2);
+        tl.to(
+          ".hf-simulated-cursor",
+          {
+            "--hf-cursor-x": "1030px",
+            "--hf-cursor-y": "620px",
+            duration: 1,
+            ease: "power2.inOut",
+          },
+          1.0,
+        );
+        tl.fromTo(
+          ".hf-simulated-cursor-pulse",
+          { opacity: 0.8, scale: 0.2 },
+          { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" },
+          2.02,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["simulated-cursor-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/simulated-cursor/registry-item.json b/registry/components/simulated-cursor/registry-item.json
new file mode 100644
index 0000000000..04c09e987b
--- /dev/null
+++ b/registry/components/simulated-cursor/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "simulated-cursor",
+  "type": "hyperframes:component",
+  "title": "Simulated Cursor",
+  "description": "A lightweight cursor pointer and click pulse for product walkthroughs and agent UI demos",
+  "tags": ["motion-primitive", "cursor", "ui", "walkthrough"],
+  "files": [
+    {
+      "path": "simulated-cursor.html",
+      "target": "compositions/components/simulated-cursor.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/simulated-cursor.png"
+  }
+}
diff --git a/registry/components/simulated-cursor/simulated-cursor.html b/registry/components/simulated-cursor/simulated-cursor.html
new file mode 100644
index 0000000000..0f616297a8
--- /dev/null
+++ b/registry/components/simulated-cursor/simulated-cursor.html
@@ -0,0 +1,51 @@
+<!--
+  Simulated Cursor - pointer and click pulse primitive.
+
+  Paste the markup once, then animate .hf-simulated-cursor with x/y values in
+  your paused GSAP timeline. Trigger the click pulse by scaling/fading
+  .hf-simulated-cursor-pulse.
+-->
+
+<div class="hf-simulated-cursor" aria-hidden="true">
+  <div class="hf-simulated-cursor-pulse"></div>
+  <svg viewBox="0 0 24 24" width="44" height="44">
+    <path
+      d="M3 2.8 20.6 14 12.8 15.5 9 22 3 2.8Z"
+      fill="white"
+      stroke="rgba(0,0,0,0.45)"
+      stroke-width="1.4"
+    />
+  </svg>
+</div>
+
+<style>
+  .hf-simulated-cursor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 44px;
+    height: 44px;
+    transform: translate3d(var(--hf-cursor-x, 0px), var(--hf-cursor-y, 0px), 0);
+    pointer-events: none;
+    z-index: 999;
+    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.24));
+  }
+  .hf-simulated-cursor-pulse {
+    position: absolute;
+    left: 9px;
+    top: 9px;
+    width: 22px;
+    height: 22px;
+    border: 2px solid rgba(255, 255, 255, 0.85);
+    border-radius: 999px;
+    opacity: 0;
+    transform: scale(0.2);
+  }
+</style>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-simulated-cursor", { "--hf-cursor-x": "760px", "--hf-cursor-y": "420px", duration: 0.8, ease: "power2.inOut" }, startTime);
+  tl.fromTo(".hf-simulated-cursor-pulse", { opacity: 0.8, scale: 0.2 }, { opacity: 0, scale: 2.4, duration: 0.45, ease: "power2.out" }, startTime + 0.8);
+-->
diff --git a/registry/components/soft-blur-in/demo.html b/registry/components/soft-blur-in/demo.html
new file mode 100644
index 0000000000..128dd4baf6
--- /dev/null
+++ b/registry/components/soft-blur-in/demo.html
@@ -0,0 +1,102 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Soft Blur 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;
+      }
+      body {
+        background: #101418;
+        font-family: Inter, system-ui, sans-serif;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background:
+          radial-gradient(circle at 25% 20%, #3b5b7a 0, transparent 30%),
+          linear-gradient(135deg, #101418, #20282f);
+        color: white;
+      }
+      .wrap {
+        position: absolute;
+        left: 180px;
+        top: 260px;
+        width: 1100px;
+      }
+      .eyebrow {
+        color: #80d9ff;
+        font-size: 34px;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+      .title {
+        margin-top: 28px;
+        font-size: 132px;
+        line-height: 0.92;
+        font-weight: 850;
+        letter-spacing: -0.02em;
+      }
+      .copy {
+        margin-top: 42px;
+        width: 780px;
+        color: #d7e3ea;
+        font-size: 42px;
+        line-height: 1.18;
+      }
+      .hf-soft-blur-in {
+        opacity: 0;
+        transform: translate3d(0, 28px, 0);
+        filter: blur(18px);
+        will-change: transform, opacity, filter;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="soft-blur-in-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="5"
+    >
+      <div class="wrap">
+        <div class="eyebrow hf-soft-blur-in">Motion Primitive</div>
+        <div class="title hf-soft-blur-in">Soft blur reveals that feel cinematic.</div>
+        <div class="copy hf-soft-blur-in">
+          Use it for titles, labels, stats, and scene intros without adding a framework.
+        </div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-soft-blur-in",
+          {
+            opacity: 1,
+            y: 0,
+            filter: "blur(0px)",
+            duration: 0.8,
+            ease: "power3.out",
+            stagger: 0.12,
+          },
+          0.35,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["soft-blur-in-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/soft-blur-in/registry-item.json b/registry/components/soft-blur-in/registry-item.json
new file mode 100644
index 0000000000..21bc1639de
--- /dev/null
+++ b/registry/components/soft-blur-in/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "soft-blur-in",
+  "type": "hyperframes:component",
+  "title": "Soft Blur In",
+  "description": "A soft opacity, blur, and lift reveal for headlines, captions, and product UI callouts",
+  "tags": ["motion-primitive", "text", "reveal", "blur"],
+  "files": [
+    {
+      "path": "soft-blur-in.html",
+      "target": "compositions/components/soft-blur-in.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/soft-blur-in.png"
+  }
+}
diff --git a/registry/components/soft-blur-in/soft-blur-in.html b/registry/components/soft-blur-in/soft-blur-in.html
new file mode 100644
index 0000000000..121cc4fb1c
--- /dev/null
+++ b/registry/components/soft-blur-in/soft-blur-in.html
@@ -0,0 +1,30 @@
+<!--
+  Soft Blur In - web-native motion primitive.
+
+  Usage:
+  1. Add class="hf-soft-blur-in" to the element you want to reveal.
+  2. Paste this style block once.
+  3. Add the timeline snippet to your paused GSAP timeline.
+-->
+
+<style>
+  .hf-soft-blur-in {
+    opacity: 0;
+    transform: translate3d(0, var(--hf-soft-blur-y, 28px), 0);
+    filter: blur(var(--hf-soft-blur-radius, 18px));
+    will-change: transform, opacity, filter;
+  }
+</style>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-soft-blur-in", {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    duration: 0.8,
+    ease: "power3.out",
+    stagger: 0.08,
+  }, startTime);
+-->
diff --git a/registry/components/tracking-in/demo.html b/registry/components/tracking-in/demo.html
new file mode 100644
index 0000000000..0a315e166f
--- /dev/null
+++ b/registry/components/tracking-in/demo.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Tracking 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;
+      }
+      body {
+        font-family: Inter, system-ui, sans-serif;
+        background: #f5f7f4;
+      }
+      #demo {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(135deg, #f7faf7, #dce7dd);
+        color: #121616;
+      }
+      .panel {
+        text-align: center;
+        width: 1260px;
+      }
+      .label {
+        font-size: 28px;
+        font-weight: 800;
+        color: #38725b;
+        text-transform: uppercase;
+      }
+      .headline {
+        margin-top: 28px;
+        font-size: 118px;
+        line-height: 1;
+        font-weight: 900;
+      }
+      .hf-tracking-in {
+        opacity: 0;
+        letter-spacing: var(--hf-tracking-value, 0.28em);
+        transform: translateY(8px);
+        will-change: opacity, letter-spacing, transform;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="demo"
+      data-composition-id="tracking-in-demo"
+      data-width="1920"
+      data-height="1080"
+      data-duration="4"
+    >
+      <div class="panel">
+        <div class="label hf-tracking-in">Editorial motion</div>
+        <div class="headline hf-tracking-in">TRACKING IN</div>
+      </div>
+      <script>
+        const tl = gsap.timeline({ paused: true });
+        tl.to(
+          ".hf-tracking-in",
+          {
+            opacity: 1,
+            "--hf-tracking-value": "0.02em",
+            y: 0,
+            duration: 0.9,
+            ease: "power3.out",
+            stagger: 0.16,
+          },
+          0.45,
+        );
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tracking-in-demo"] = tl;
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/registry/components/tracking-in/registry-item.json b/registry/components/tracking-in/registry-item.json
new file mode 100644
index 0000000000..e28221c37b
--- /dev/null
+++ b/registry/components/tracking-in/registry-item.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "tracking-in",
+  "type": "hyperframes:component",
+  "title": "Tracking In",
+  "description": "A precise letter-spacing reveal for premium headings and interface labels",
+  "tags": ["motion-primitive", "text", "reveal", "typography"],
+  "files": [
+    {
+      "path": "tracking-in.html",
+      "target": "compositions/components/tracking-in.html",
+      "type": "hyperframes:snippet"
+    }
+  ],
+  "preview": {
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/tracking-in.png"
+  }
+}
diff --git a/registry/components/tracking-in/tracking-in.html b/registry/components/tracking-in/tracking-in.html
new file mode 100644
index 0000000000..abeccd5e51
--- /dev/null
+++ b/registry/components/tracking-in/tracking-in.html
@@ -0,0 +1,28 @@
+<!--
+  Tracking In - letter-spacing reveal.
+
+  Add class="hf-tracking-in" to text elements, then animate the CSS variable
+  from wide tracking to the final value in your composition timeline.
+-->
+
+<style>
+  .hf-tracking-in {
+    opacity: 0;
+    letter-spacing: var(--hf-tracking-value, 0.28em);
+    transform: translateY(var(--hf-tracking-y, 8px));
+    will-change: opacity, letter-spacing, transform;
+  }
+</style>
+
+<!--
+  Timeline integration:
+
+  tl.to(".hf-tracking-in", {
+    opacity: 1,
+    "--hf-tracking-value": "0.02em",
+    y: 0,
+    duration: 0.9,
+    ease: "power3.out",
+    stagger: 0.1,
+  }, startTime);
+-->
diff --git a/registry/registry.json b/registry/registry.json
index 32babd0aad..18103cab06 100644
--- a/registry/registry.json
+++ b/registry/registry.json
@@ -79,6 +79,38 @@
       "name": "shimmer-sweep",
       "type": "hyperframes:component"
     },
+    {
+      "name": "soft-blur-in",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "tracking-in",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "bottom-up-letters",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "inline-highlight",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "number-wheel",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "simulated-cursor",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "fade-through",
+      "type": "hyperframes:component"
+    },
+    {
+      "name": "dynamic-grid",
+      "type": "hyperframes:component"
+    },
     {
       "name": "grid-pixelate-wipe",
       "type": "hyperframes:component"
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 5b1db86f11..2cfce945f6 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -502,7 +502,7 @@ function main(): void {
   const publicDir = join(docsDir, "public");
   mkdirSync(publicDir, { recursive: true });
   const indexPath = join(publicDir, "catalog-index.json");
-  writeFileSync(indexPath, JSON.stringify(catalogIndex, null, 2) + "\n", "utf-8");
+  writeFileSync(indexPath, JSON.stringify(catalogIndex, null, 4) + "\n", "utf-8");
   console.log(`\n  ✓ public/catalog-index.json (${catalogIndex.length} items)`);
 
   // Update docs.json navigation with generated catalog pages.
@@ -527,8 +527,11 @@ function main(): void {
     "CSS Transitions": 5,
     Showcases: 6,
     Data: 7,
-    Effects: 8,
-    Blocks: 9,
+    "Motion Primitives": 8,
+    "Text Effects": 9,
+    Effects: 10,
+    Blocks: 11,
+    "Code Snippets": 12,
   };
 
   // fallow-ignore-next-line complexity
@@ -542,6 +545,9 @@ function main(): void {
     // Code animations (morph, flight, diff, …) — keyed on the code-animation tag so
     // they group separately from the static code-snippet themes.
     if (tags.includes("code-animation")) return "Code Animations";
+    if (tags.includes("motion-primitive")) return "Motion Primitives";
+    if (tags.includes("text-effect")) return "Text Effects";
+    if (entry.name.startsWith("code-snippet-")) return "Code Snippets";
     // Single-tag mapping
     if (tags.includes("social")) return "Social Overlays";
     if (tags.includes("transition"))