diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
new file mode 100644
index 0000000000..f36694b88d
--- /dev/null
+++ b/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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-3d-extrude
+```
+
+
+
+## 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
+
+```
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
new file mode 100644
index 0000000000..d17740fa81
--- /dev/null
+++ b/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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-diff
+```
+
+
+
+## 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
+
+```
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
new file mode 100644
index 0000000000..690b5772e6
--- /dev/null
+++ b/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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-highlight
+```
+
+
+
+## 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
+
+```
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
new file mode 100644
index 0000000000..b5f8b52e06
--- /dev/null
+++ b/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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-morph
+```
+
+
+
+## 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
+
+```
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
new file mode 100644
index 0000000000..da29dde0c8
--- /dev/null
+++ b/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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-particle-assemble
+```
+
+
+
+## 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
+
+```
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
new file mode 100644
index 0000000000..8f5ef33236
--- /dev/null
+++ b/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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-scroll
+```
+
+
+
+## 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
+
+```
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
new file mode 100644
index 0000000000..2d327221fb
--- /dev/null
+++ b/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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-shader-dissolve
+```
+
+
+
+## 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
+
+```
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
new file mode 100644
index 0000000000..547a869614
--- /dev/null
+++ b/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`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-snippet-flight
+```
+
+
+
+## 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
+
+```
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
new file mode 100644
index 0000000000..d706d6b7d7
--- /dev/null
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -0,0 +1,44 @@
+---
+title: "Code Typing"
+description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
+---
+
+# Code Typing
+
+Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation.
+
+`code` `code-animation` `typing` `developer`
+
+
+
+## Install
+
+
+
+```bash Terminal
+npx hyperframes add code-typing
+```
+
+
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 5s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-typing.html` | `compositions/code-typing.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+
+```
diff --git a/docs/docs.json b/docs/docs.json
index c8a1caac63..624861506f 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -112,6 +112,20 @@
{
"tab": "Catalog",
"groups": [
+ {
+ "group": "Code Animations",
+ "pages": [
+ "catalog/blocks/code-3d-extrude",
+ "catalog/blocks/code-shader-dissolve",
+ "catalog/blocks/code-particle-assemble",
+ "catalog/blocks/code-morph",
+ "catalog/blocks/code-snippet-flight",
+ "catalog/blocks/code-typing",
+ "catalog/blocks/code-diff",
+ "catalog/blocks/code-highlight",
+ "catalog/blocks/code-scroll"
+ ]
+ },
{
"group": "Captions",
"pages": [
diff --git a/packages/core/src/registry/types.ts b/packages/core/src/registry/types.ts
index cd7ae29c68..94797a9aaa 100644
--- a/packages/core/src/registry/types.ts
+++ b/packages/core/src/registry/types.ts
@@ -182,7 +182,8 @@ export type BlockCategory =
| "scenes"
| "captions"
| "effects"
- | "text-effects";
+ | "text-effects"
+ | "code-animation";
export interface BlockCategoryMeta {
id: BlockCategory;
@@ -192,6 +193,7 @@ export interface BlockCategoryMeta {
export const BLOCK_CATEGORIES: BlockCategoryMeta[] = [
{ id: "captions", label: "Captions", color: "cyan" },
+ { id: "code-animation", label: "Code Animations", color: "emerald" },
{ id: "vfx", label: "VFX", color: "purple" },
{ id: "transitions", label: "Transitions", color: "blue" },
{ id: "effects", label: "Effects", color: "rose" },
@@ -205,6 +207,7 @@ export function resolveBlockCategory(tags: string[] | undefined): BlockCategory
if (!tags || tags.length === 0) return "scenes";
const set = new Set(tags);
if (set.has("captions") || set.has("caption-style")) return "captions";
+ if (set.has("code-animation")) return "code-animation";
if (set.has("transition")) return "transitions";
if (set.has("social") || set.has("overlay")) return "social";
if (set.has("data") || set.has("chart") || set.has("map")) return "data";
diff --git a/packages/studio/src/utils/blockCategories.ts b/packages/studio/src/utils/blockCategories.ts
index 6358ed6482..fc077b64ef 100644
--- a/packages/studio/src/utils/blockCategories.ts
+++ b/packages/studio/src/utils/blockCategories.ts
@@ -1,11 +1,10 @@
import {
type BlockCategory,
- type BlockCategoryMeta,
BLOCK_CATEGORIES,
resolveBlockCategory,
} from "@hyperframes/core/registry";
-export type { BlockCategory, BlockCategoryMeta };
+export type { BlockCategory };
export { BLOCK_CATEGORIES, resolveBlockCategory };
const COLOR_MAP: Record = {
@@ -17,6 +16,7 @@ const COLOR_MAP: Record
+
+
+
+
+ Code 3D Extrude
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/registry/blocks/code-3d-extrude/registry-item.json b/registry/blocks/code-3d-extrude/registry-item.json
new file mode 100644
index 0000000000..69ddbb0a89
--- /dev/null
+++ b/registry/blocks/code-3d-extrude/registry-item.json
@@ -0,0 +1,24 @@
+{
+ "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+ "name": "code-3d-extrude",
+ "type": "hyperframes:block",
+ "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.",
+ "dimensions": {
+ "width": 1920,
+ "height": 1080
+ },
+ "duration": 8,
+ "tags": ["code", "code-animation", "3d", "webgl", "developer"],
+ "files": [
+ {
+ "path": "code-3d-extrude.html",
+ "target": "compositions/code-3d-extrude.html",
+ "type": "hyperframes:composition"
+ }
+ ],
+ "preview": {
+ "video": "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"
+ }
+}
diff --git a/registry/blocks/code-diff/code-diff.html b/registry/blocks/code-diff/code-diff.html
new file mode 100644
index 0000000000..bf482a8779
--- /dev/null
+++ b/registry/blocks/code-diff/code-diff.html
@@ -0,0 +1,807 @@
+
+
+
+
+
+ Code Diff
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
greet.js — Code Diff
+
+
+
+
+
+
+
+
+
+
+
+
+
+
loadConfig.js — Code Highlight Sweep
+
+
+
+
+
+
+
+
+
+
+
+
+
+
refactor.js — Code Morph
+
+
+
+
+
+
+
+
+
+
diff --git a/registry/blocks/code-particle-assemble/registry-item.json b/registry/blocks/code-particle-assemble/registry-item.json
new file mode 100644
index 0000000000..b6f75c9c55
--- /dev/null
+++ b/registry/blocks/code-particle-assemble/registry-item.json
@@ -0,0 +1,24 @@
+{
+ "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+ "name": "code-particle-assemble",
+ "type": "hyperframes:block",
+ "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.",
+ "dimensions": {
+ "width": 1920,
+ "height": 1080
+ },
+ "duration": 8,
+ "tags": ["code", "code-animation", "particles", "gpu", "webgl", "developer"],
+ "files": [
+ {
+ "path": "code-particle-assemble.html",
+ "target": "compositions/code-particle-assemble.html",
+ "type": "hyperframes:composition"
+ }
+ ],
+ "preview": {
+ "video": "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"
+ }
+}
diff --git a/registry/blocks/code-scroll/code-scroll.html b/registry/blocks/code-scroll/code-scroll.html
new file mode 100644
index 0000000000..1484f7c02f
--- /dev/null
+++ b/registry/blocks/code-scroll/code-scroll.html
@@ -0,0 +1,1551 @@
+
+
+
+
+
+ Code Scroll To Line
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
fetchWithRetry.js — Code Scroll To Line
+
+
+
+
+
+
+
+
+
+
diff --git a/registry/blocks/code-shader-dissolve/registry-item.json b/registry/blocks/code-shader-dissolve/registry-item.json
new file mode 100644
index 0000000000..86eaffaf42
--- /dev/null
+++ b/registry/blocks/code-shader-dissolve/registry-item.json
@@ -0,0 +1,24 @@
+{
+ "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+ "name": "code-shader-dissolve",
+ "type": "hyperframes:block",
+ "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.",
+ "dimensions": {
+ "width": 1920,
+ "height": 1080
+ },
+ "duration": 7,
+ "tags": ["code", "code-animation", "shader", "webgl", "developer"],
+ "files": [
+ {
+ "path": "code-shader-dissolve.html",
+ "target": "compositions/code-shader-dissolve.html",
+ "type": "hyperframes:composition"
+ }
+ ],
+ "preview": {
+ "video": "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"
+ }
+}
diff --git a/registry/blocks/code-snippet-flight/code-snippet-flight.html b/registry/blocks/code-snippet-flight/code-snippet-flight.html
new file mode 100644
index 0000000000..25a700c3c7
--- /dev/null
+++ b/registry/blocks/code-snippet-flight/code-snippet-flight.html
@@ -0,0 +1,665 @@
+
+
+
+
+
+ Code Snippet Flight
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
pipeline.js — Code Snippet Flight
+
+
+
+
+
+
+
+
+
+
+
+
+
+
loadConfig.js — Code Typing
+
+
+
+