feat(registry): add Code Animations catalog section (9 blocks, incl. GPU)

docs/catalog/blocks/code-3d-extrude.mdx

@@ -0,0 +1,44 @@
+---
+title: "Code 3D Extrude"
+description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
+---
+
+# Code 3D Extrude
+
+Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform.
+
+`code` `code-animation` `3d` `webgl` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-3d-extrude
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-3d-extrude.html` | `compositions/code-3d-extrude.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-3d-extrude" data-composition-src="compositions/code-3d-extrude.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/code-diff.mdx

@@ -0,0 +1,44 @@
+---
+title: "Code Diff"
+description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
+---
+
+# Code Diff
+
+An edit shown as a colored diff — removed lines collapse in red, added lines expand in green.
+
+`code` `code-animation` `diff` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-diff
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-diff.html` | `compositions/code-diff.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-diff" data-composition-src="compositions/code-diff.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/code-highlight.mdx

@@ -0,0 +1,44 @@
+---
+title: "Code Highlight Sweep"
+description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line."
+---
+
+# Code Highlight Sweep
+
+A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line.
+
+`code` `code-animation` `highlight` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-highlight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-highlight.html` | `compositions/code-highlight.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-highlight" data-composition-src="compositions/code-highlight.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/code-morph.mdx

@@ -0,0 +1,44 @@
+---
+title: "Code Morph"
+description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
+---
+
+# Code Morph
+
+One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline.
+
+`code` `code-animation` `morph` `refactor` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-morph
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-morph.html` | `compositions/code-morph.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-morph" data-composition-src="compositions/code-morph.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/code-particle-assemble.mdx

@@ -0,0 +1,44 @@
+---
+title: "Code Particle Assemble"
+description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
+---
+
+# Code Particle Assemble
+
+Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween.
+
+`code` `code-animation` `particles` `gpu` `webgl` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-particle-assemble
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 8s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-particle-assemble.html` | `compositions/code-particle-assemble.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-particle-assemble" data-composition-src="compositions/code-particle-assemble.html" data-start="0" data-duration="8" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/code-scroll.mdx

@@ -0,0 +1,44 @@
+---
+title: "Code Scroll To Line"
+description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
+---
+
+# Code Scroll To Line
+
+The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules.
+
+`code` `code-animation` `scroll` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-scroll
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-scroll.html` | `compositions/code-scroll.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-scroll" data-composition-src="compositions/code-scroll.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/code-shader-dissolve.mdx

@@ -0,0 +1,44 @@
+---
+title: "Code Shader Dissolve"
+description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
+---
+
+# Code Shader Dissolve
+
+The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp.
+
+`code` `code-animation` `shader` `webgl` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-shader-dissolve
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 7s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-shader-dissolve.html` | `compositions/code-shader-dissolve.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-shader-dissolve" data-composition-src="compositions/code-shader-dissolve.html" data-start="0" data-duration="7" data-track-index="1" data-width="1920" data-height="1080"></div>
+```

docs/catalog/blocks/code-snippet-flight.mdx

@@ -0,0 +1,44 @@
+---
+title: "Code Snippet Flight"
+description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
+---
+
+# Code Snippet Flight
+
+Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP.
+
+`code` `code-animation` `flight` `developer`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-flight
+```
+
+</CodeGroup>
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 6s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-flight.html` | `compositions/code-snippet-flight.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div data-composition-id="code-snippet-flight" data-composition-src="compositions/code-snippet-flight.html" data-start="0" data-duration="6" data-track-index="1" data-width="1920" data-height="1080"></div>
+```