From 689deaf4b82d40fd8c3010c014517f8627281e38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 2 Jun 2026 12:12:46 -0400
Subject: [PATCH] feat(registry): add Apple Terminal theme code snippet blocks
 (#1161)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(registry): add Apple Terminal theme code snippet blocks

Adds 12 Apple Terminal built-in profile visualizer blocks to the
Code Snippets catalog section, following the same pattern as the
VS Code theme blocks (commit 5245e190).

Themes: Basic, Clear Dark, Clear Light, Grass, Homebrew, Man Page,
Novel, Ocean, Pro, Red Sands, Silver Aerogel, Solid Colors.

Each block is a self-contained 1920×1080 composition showing a
macOS Terminal.app window in the matching profile colors, with
per-character GSAP typing animation and window.__timelines contract.

Install individually:
  npx hyperframes add code-snippet-apple-terminal-basic

Install all Apple Terminal themes:
  npx hyperframes add apple-terminal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(registry): remove placeholder preview URLs for unrendered Apple Terminal themes

The 8 themes without rendered videos (clear-dark, homebrew, novel,
ocean, pro, red-sands, silver-aerogel, solid-colors) had preview.video
URLs pointing to non-existent S3 objects, returning 403. Removed the
preview field from their registry-item.json and the video embed from
their MDX pages until renders are available.

The 4 themes with uploaded videos (basic, clear-light, grass, man-page)
retain their preview URLs and are live on CDN.

* fix(registry): add apple-terminal tag so npx hyperframes add apple-terminal works

* feat(registry): render + upload all 12 Apple Terminal preview videos to CDN

Rendered the 8 missing themes (clear-dark, homebrew, novel, ocean, pro,
red-sands, silver-aerogel, solid-colors) using npx hyperframes@latest
render and uploaded to the hyperframes CDN. All 12 themes now have
live preview.video URLs and video embeds in their MDX pages.

All 12 CDN URLs return 200.

* style: format Apple Terminal HTML and JSON files with oxfmt

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../code-snippet-apple-terminal-basic.mdx     |  67 +++++
 ...code-snippet-apple-terminal-clear-dark.mdx |  68 +++++
 ...ode-snippet-apple-terminal-clear-light.mdx |  67 +++++
 .../code-snippet-apple-terminal-grass.mdx     |  67 +++++
 .../code-snippet-apple-terminal-homebrew.mdx  |  68 +++++
 .../code-snippet-apple-terminal-man-page.mdx  |  67 +++++
 .../code-snippet-apple-terminal-novel.mdx     |  68 +++++
 .../code-snippet-apple-terminal-ocean.mdx     |  68 +++++
 .../code-snippet-apple-terminal-pro.mdx       |  68 +++++
 .../code-snippet-apple-terminal-red-sands.mdx |  68 +++++
 ...-snippet-apple-terminal-silver-aerogel.mdx |  68 +++++
 ...de-snippet-apple-terminal-solid-colors.mdx |  68 +++++
 docs/docs.json                                |  12 +
 .../code-snippet-apple-terminal-basic.html    | 249 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 ...ode-snippet-apple-terminal-clear-dark.html | 244 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 ...de-snippet-apple-terminal-clear-light.html | 244 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 .../code-snippet-apple-terminal-grass.html    | 243 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 .../code-snippet-apple-terminal-homebrew.html | 248 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 .../code-snippet-apple-terminal-man-page.html | 248 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 .../code-snippet-apple-terminal-novel.html    | 244 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 .../code-snippet-apple-terminal-ocean.html    | 253 ++++++++++++++++++
 .../registry-item.json                        |  24 ++
 .../code-snippet-apple-terminal-pro.html      | 247 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 ...code-snippet-apple-terminal-red-sands.html | 244 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 ...snippet-apple-terminal-silver-aerogel.html | 250 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 ...e-snippet-apple-terminal-solid-colors.html | 247 +++++++++++++++++
 .../registry-item.json                        |  24 ++
 37 files changed, 4073 insertions(+)
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
 create mode 100644 docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
 create mode 100644 registry/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
 create mode 100644 registry/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html
 create mode 100644 registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json

diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
new file mode 100644
index 000000000..0021f80a7
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -0,0 +1,67 @@
+---
+title: "Apple Terminal Basic"
+description: "Apple Terminal Basic profile with white background and black text, per-character typing animation."
+---
+
+# Apple Terminal Basic
+
+macOS Terminal.app window in the built-in Basic profile — clean white background with black monospace text and a solid black cursor. Per-character typing animation with output reveal.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-basic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-basic
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-basic.html` | `compositions/code-snippet-apple-terminal-basic.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-basic"
+  data-composition-src="compositions/code-snippet-apple-terminal-basic.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Basic profile — white background, black text, solid cursor
+- macOS window chrome with traffic light buttons (close, minimize, fullscreen) and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
new file mode 100644
index 000000000..98e7eaf68
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -0,0 +1,68 @@
+---
+title: "Apple Terminal Clear Dark"
+description: "Apple Terminal Clear Dark profile with semi-transparent dark background and white text, per-character typing animation."
+---
+
+# Apple Terminal Clear Dark
+
+macOS Terminal.app window in the built-in Clear Dark profile — translucent black background with white text and a grey cursor. Per-character typing animation with output reveal.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-clear-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png" autoPlay muted loop playsInline />
+
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-clear-dark
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-clear-dark.html` | `compositions/code-snippet-apple-terminal-clear-dark.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-clear-dark"
+  data-composition-src="compositions/code-snippet-apple-terminal-clear-dark.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Clear Dark profile — semi-transparent black background with white text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
new file mode 100644
index 000000000..7654fe4e8
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -0,0 +1,67 @@
+---
+title: "Apple Terminal Clear Light"
+description: "Apple Terminal Clear Light profile with semi-transparent white background and black text, per-character typing animation."
+---
+
+# Apple Terminal Clear Light
+
+macOS Terminal.app window in the built-in Clear Light profile — translucent white background with black text and a grey cursor. Per-character typing animation with output reveal.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-clear-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-clear-light
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-clear-light.html` | `compositions/code-snippet-apple-terminal-clear-light.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-clear-light"
+  data-composition-src="compositions/code-snippet-apple-terminal-clear-light.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Clear Light profile — semi-transparent white background with black text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
new file mode 100644
index 000000000..d64bb7e5b
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -0,0 +1,67 @@
+---
+title: "Apple Terminal Grass"
+description: "Apple Terminal Grass profile with black background and bright green text, per-character typing animation."
+---
+
+# Apple Terminal Grass
+
+macOS Terminal.app window in the built-in Grass profile — pitch-black background with pure green text and a matching cursor. Classic terminal aesthetic with per-character typing animation.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-grass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-grass
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-grass.html` | `compositions/code-snippet-apple-terminal-grass.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-grass"
+  data-composition-src="compositions/code-snippet-apple-terminal-grass.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Grass profile — black background with #00C100 green text
+- macOS window chrome with green-accented title bar and traffic light buttons
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
new file mode 100644
index 000000000..f9c3340a9
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -0,0 +1,68 @@
+---
+title: "Apple Terminal Homebrew"
+description: "Apple Terminal Homebrew profile with black background, bright green text and lime cursor, per-character typing animation."
+---
+
+# Apple Terminal Homebrew
+
+macOS Terminal.app window in the built-in Homebrew profile — black background with vivid green text and a lime `#48F800` cursor. One of the most beloved classic terminal looks.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-homebrew.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png" autoPlay muted loop playsInline />
+
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-homebrew
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-homebrew.html` | `compositions/code-snippet-apple-terminal-homebrew.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-homebrew"
+  data-composition-src="compositions/code-snippet-apple-terminal-homebrew.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Homebrew profile — black background with #00CF00 text and #48F800 cursor
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
new file mode 100644
index 000000000..11c96f415
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -0,0 +1,67 @@
+---
+title: "Apple Terminal Man Page"
+description: "Apple Terminal Man Page profile with pale yellow background and black text, per-character typing animation."
+---
+
+# Apple Terminal Man Page
+
+macOS Terminal.app window in the built-in Man Page profile — pale yellow `#FEF49C` background with black text. Evoking classic Unix manual pages, with per-character typing animation.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-man-page.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-man-page
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-man-page.html` | `compositions/code-snippet-apple-terminal-man-page.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-man-page"
+  data-composition-src="compositions/code-snippet-apple-terminal-man-page.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Man Page profile — pale yellow background with black text
+- Shows a realistic man page output structure with sections and indented content
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
new file mode 100644
index 000000000..9a7a0adba
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -0,0 +1,68 @@
+---
+title: "Apple Terminal Novel"
+description: "Apple Terminal Novel profile with warm parchment background and dark brown text, per-character typing animation."
+---
+
+# Apple Terminal Novel
+
+macOS Terminal.app window in the built-in Novel profile — warm parchment `#DFC18A` background with deep brown text. A distinctive earthy look, with per-character typing animation.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-novel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png" autoPlay muted loop playsInline />
+
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-novel
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-novel.html` | `compositions/code-snippet-apple-terminal-novel.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-novel"
+  data-composition-src="compositions/code-snippet-apple-terminal-novel.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Novel profile — warm parchment background with #3E2900 dark brown text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
new file mode 100644
index 000000000..d519bd4c9
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -0,0 +1,68 @@
+---
+title: "Apple Terminal Ocean"
+description: "Apple Terminal Ocean profile with deep blue background and white text, per-character typing animation."
+---
+
+# Apple Terminal Ocean
+
+macOS Terminal.app window in the built-in Ocean profile — vivid `#224FBE` blue background with crisp white text. Bold and distinctive, with per-character typing animation.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-ocean.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png" autoPlay muted loop playsInline />
+
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-ocean
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-ocean.html` | `compositions/code-snippet-apple-terminal-ocean.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-ocean"
+  data-composition-src="compositions/code-snippet-apple-terminal-ocean.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Ocean profile — #224FBE blue background with white text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
new file mode 100644
index 000000000..e8441e6c5
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -0,0 +1,68 @@
+---
+title: "Apple Terminal Pro"
+description: "Apple Terminal Pro profile with black background, grey text and lime green cursor, per-character typing animation."
+---
+
+# Apple Terminal Pro
+
+macOS Terminal.app window in the built-in Pro profile — pure black background with grey `#BBBBBB` text and a distinctive `#88FF67` lime cursor. Hacker aesthetic with per-character typing animation.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-pro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png" autoPlay muted loop playsInline />
+
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-pro
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-pro.html` | `compositions/code-snippet-apple-terminal-pro.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-pro"
+  data-composition-src="compositions/code-snippet-apple-terminal-pro.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Pro profile — black background, #BBBBBB grey text, #88FF67 lime cursor
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
new file mode 100644
index 000000000..c740c6e29
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -0,0 +1,68 @@
+---
+title: "Apple Terminal Red Sands"
+description: "Apple Terminal Red Sands profile with deep red background and sandy text, per-character typing animation."
+---
+
+# Apple Terminal Red Sands
+
+macOS Terminal.app window in the built-in Red Sands profile — deep crimson `#7B140E` background with warm sandy `#FFE1B9` text. A bold, dramatic look with per-character typing animation.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-red-sands.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png" autoPlay muted loop playsInline />
+
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-red-sands
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-red-sands.html` | `compositions/code-snippet-apple-terminal-red-sands.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-red-sands"
+  data-composition-src="compositions/code-snippet-apple-terminal-red-sands.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Red Sands profile — #7B140E red background with #FFE1B9 sandy text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
new file mode 100644
index 000000000..810f2f670
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -0,0 +1,68 @@
+---
+title: "Apple Terminal Silver Aerogel"
+description: "Apple Terminal Silver Aerogel profile with dark grey background and white text, per-character typing animation."
+---
+
+# Apple Terminal Silver Aerogel
+
+macOS Terminal.app window in the built-in Silver Aerogel profile — dark grey `#3D3D3D` background with clean white text. A professional neutral look with per-character typing animation.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-silver-aerogel.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png" autoPlay muted loop playsInline />
+
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-silver-aerogel
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-silver-aerogel.html` | `compositions/code-snippet-apple-terminal-silver-aerogel.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-silver-aerogel"
+  data-composition-src="compositions/code-snippet-apple-terminal-silver-aerogel.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Silver Aerogel profile — #3D3D3D dark grey background with white text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
new file mode 100644
index 000000000..30b81485c
--- /dev/null
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -0,0 +1,68 @@
+---
+title: "Apple Terminal Solid Colors"
+description: "Apple Terminal Solid Colors profile with deep purple background and white text, per-character typing animation."
+---
+
+# Apple Terminal Solid Colors
+
+macOS Terminal.app window in the built-in Solid Colors profile — vivid deep purple `#4C0099` background with white text. Eye-catching and vibrant, with per-character typing animation.
+
+`code` `developer` `showcase` `terminal` `apple`
+
+<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-apple-terminal-solid-colors.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png" autoPlay muted loop playsInline />
+
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-apple-terminal-solid-colors
+```
+
+</CodeGroup>
+
+Install all Apple Terminal themes at once:
+
+```bash Terminal
+npx hyperframes add apple-terminal
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 12s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-apple-terminal-solid-colors.html` | `compositions/code-snippet-apple-terminal-solid-colors.html` | hyperframes:composition |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-apple-terminal-solid-colors"
+  data-composition-src="compositions/code-snippet-apple-terminal-solid-colors.html"
+  data-start="0"
+  data-duration="12"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Faithful recreation of macOS Terminal.app Solid Colors profile — #4C0099 deep purple background with white text
+- macOS window chrome with traffic light buttons and centered title bar
+- Per-character GSAP typing animation — command types out character by character
+- Output lines reveal sequentially after command executes
+- Cursor blinks three times at the end then holds steady
+- Self-contained HTML — no external assets, only GSAP CDN
diff --git a/docs/docs.json b/docs/docs.json
index e7a095c8a..0449793d6 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -241,6 +241,18 @@
           {
             "group": "Code Snippets",
             "pages": [
+              "catalog/blocks/code-snippet-apple-terminal-basic",
+              "catalog/blocks/code-snippet-apple-terminal-clear-dark",
+              "catalog/blocks/code-snippet-apple-terminal-clear-light",
+              "catalog/blocks/code-snippet-apple-terminal-grass",
+              "catalog/blocks/code-snippet-apple-terminal-homebrew",
+              "catalog/blocks/code-snippet-apple-terminal-man-page",
+              "catalog/blocks/code-snippet-apple-terminal-novel",
+              "catalog/blocks/code-snippet-apple-terminal-ocean",
+              "catalog/blocks/code-snippet-apple-terminal-pro",
+              "catalog/blocks/code-snippet-apple-terminal-red-sands",
+              "catalog/blocks/code-snippet-apple-terminal-silver-aerogel",
+              "catalog/blocks/code-snippet-apple-terminal-solid-colors",
               "catalog/blocks/code-snippet-dark-2026",
               "catalog/blocks/code-snippet-dark-modern",
               "catalog/blocks/code-snippet-dark-plus",
diff --git a/registry/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html b/registry/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html
new file mode 100644
index 000000000..3d7290423
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-basic/code-snippet-apple-terminal-basic.html
@@ -0,0 +1,249 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Basic</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #ececec;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.25),
+          0 10px 30px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #ececec;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        gap: 0;
+        flex-shrink: 0;
+        border-bottom: 1px solid #d0d0d0;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #ffffff;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #000000;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #000000;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #000000;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-basic"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line">Last login: Mon Jun 2 09:14:22 on ttys001</span>
+            <span class="output-line">total 48</span>
+            <span class="output-line bold">drwxr-xr-x 8 user staff 256 Jun 2 09:10 .</span>
+            <span class="output-line">drwxr-xr-x 42 user staff 1344 Jun 1 18:22 ..</span>
+            <span class="output-line">-rw-r--r-- 1 user staff 872 May 30 14:05 README.md</span>
+            <span class="output-line bold">drwxr-xr-x 5 user staff 160 Jun 2 09:10 dist</span>
+            <span class="output-line bold"
+              >drwxr-xr-x 12 user staff 384 Jun 2 09:10 node_modules</span
+            >
+            <span class="output-line">-rw-r--r-- 1 user staff 1204 Jun 2 09:08 package.json</span>
+            <span class="output-line bold">drwxr-xr-x 6 user staff 192 Jun 2 09:10 src</span>
+            <span class="output-line">-rw-r--r-- 1 user staff 348 May 29 11:42 tsconfig.json</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "ls -la";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      // Phase 1 (0–0.5s): hold on empty prompt
+      tl.set(typedEl, { text: "" }, 0);
+
+      // Phase 2 (0.5–2s): type command char by char
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      // Phase 3 (2.2s): hide cursor, show first output line (login message)
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      // Phase 4 (2.5s): clear command, show ls output line by line
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return; // already shown
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.08);
+      });
+
+      // Phase 5 (4s): new prompt with blinking cursor
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      // Phase 6 (4.2–10s): blink cursor 3 times then stop
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-basic"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json b/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
new file mode 100644
index 000000000..f8b623ee6
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-basic/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-basic",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Basic",
+  "description": "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-basic.html",
+      "target": "compositions/code-snippet-apple-terminal-basic.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html b/registry/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html
new file mode 100644
index 000000000..cb909740f
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-clear-dark/code-snippet-apple-terminal-clear-dark.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Clear Dark</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1a1a1a;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(0, 0, 0, 0.5);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: rgba(0, 0, 0, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: rgba(0, 0, 0, 0.7);
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.6);
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #888888;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #888888;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-clear-dark"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys002</span>
+            <span class="output-line">Scanning dependencies...</span>
+            <span class="output-line">Found 3 vulnerabilities (1 moderate, 2 low)</span>
+            <span class="output-line dim"> package: lodash@4.17.20</span>
+            <span class="output-line dim"> severity: moderate</span>
+            <span class="output-line dim"> fix: lodash@4.17.21</span>
+            <span class="output-line dim"> package: minimist@1.2.5</span>
+            <span class="output-line dim"> severity: low</span>
+            <span class="output-line dim"> fix: minimist@1.2.6</span>
+            <span class="output-line bold">Run `npm audit fix` to fix them.</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm audit";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-clear-dark"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json b/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
new file mode 100644
index 000000000..5f5e66377
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-clear-dark/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-clear-dark",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Clear Dark",
+  "description": "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-clear-dark.html",
+      "target": "compositions/code-snippet-apple-terminal-clear-dark.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html b/registry/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html
new file mode 100644
index 000000000..7f3f7769b
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-clear-light/code-snippet-apple-terminal-clear-light.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Clear Light</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.18),
+          0 10px 30px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: rgba(255, 255, 255, 0.4);
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+        position: relative;
+        backdrop-filter: blur(10px);
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: rgba(255, 255, 255, 0.7);
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+        backdrop-filter: blur(8px);
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+      }
+
+      .output-line.muted {
+        color: #666666;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #888888;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #888888;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-clear-light"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line muted">Last login: Mon Jun 2 09:14:22 on ttys003</span>
+            <span class="output-line bold">git log --oneline -8</span>
+            <span class="output-line">a3f2c19 fix: correct off-by-one in pagination</span>
+            <span class="output-line">b7e8d04 feat: add dark mode toggle</span>
+            <span class="output-line">c1a9f55 refactor: extract auth helpers</span>
+            <span class="output-line">d4e2b31 test: add unit tests for parser</span>
+            <span class="output-line">e6c8a72 docs: update API reference</span>
+            <span class="output-line">f9b1d44 chore: bump dependencies</span>
+            <span class="output-line">2a7e890 feat: implement search endpoint</span>
+            <span class="output-line">3c5f012 init: project bootstrap</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac myproject % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "git log --oneline -8";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.09);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac myproject % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-clear-light"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json b/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
new file mode 100644
index 000000000..0605c1adb
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-clear-light/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-clear-light",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Clear Light",
+  "description": "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-clear-light.html",
+      "target": "compositions/code-snippet-apple-terminal-clear-light.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html b/registry/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html
new file mode 100644
index 000000000..4556df094
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-grass/code-snippet-apple-terminal-grass.html
@@ -0,0 +1,243 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Grass</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #0a1a0a 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 193, 0, 0.15),
+          0 10px 30px rgba(0, 0, 0, 0.8);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #00c100;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #00c100;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #00c100;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #00c100;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #00c100;
+      }
+
+      .output-line.dim {
+        color: #006600;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #00c100;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #00c100;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #00c100;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-grass"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys004</span>
+            <span class="output-line">Running test suite...</span>
+            <span class="output-line dim"> ✓ should initialize with defaults (2ms)</span>
+            <span class="output-line dim"> ✓ should parse config correctly (4ms)</span>
+            <span class="output-line dim"> ✓ should handle empty input (1ms)</span>
+            <span class="output-line dim"> ✓ should reject invalid tokens (3ms)</span>
+            <span class="output-line dim"> ✓ should emit events on change (5ms)</span>
+            <span class="output-line dim"> ✓ should clean up on destroy (2ms)</span>
+            <span class="output-line bold"> 6 passing (18ms)</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm test";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.12);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-grass"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json b/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
new file mode 100644
index 000000000..646d956fe
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-grass/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-grass",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Grass",
+  "description": "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-grass.html",
+      "target": "compositions/code-snippet-apple-terminal-grass.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html b/registry/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html
new file mode 100644
index 000000000..b7169c1b8
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-homebrew/code-snippet-apple-terminal-homebrew.html
@@ -0,0 +1,248 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Homebrew</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #0d1a0d 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 207, 0, 0.18),
+          0 10px 30px rgba(0, 0, 0, 0.85);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #006900;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #00cf00;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #00cf00;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #00cf00;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #00de00;
+      }
+
+      .output-line.dim {
+        color: #006600;
+      }
+
+      .output-line.bright {
+        color: #48f800;
+        font-weight: bold;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #48f800;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #00cf00;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #48f800;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-homebrew"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys005</span>
+            <span class="output-line">==> Updating Homebrew...</span>
+            <span class="output-line dim">Already up-to-date.</span>
+            <span class="output-line">==> Outdated formulae</span>
+            <span class="output-line">node 20.11.0 -> 22.3.0</span>
+            <span class="output-line">python 3.11.6 -> 3.12.4</span>
+            <span class="output-line">git 2.43.0 -> 2.45.2</span>
+            <span class="output-line">ffmpeg 6.1.1 -> 7.0.0</span>
+            <span class="output-line bright">==> Run `brew upgrade` to update 4 formulae.</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "brew outdated";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-homebrew"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json b/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
new file mode 100644
index 000000000..baa4f3576
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-homebrew/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-homebrew",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Homebrew",
+  "description": "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-homebrew.html",
+      "target": "compositions/code-snippet-apple-terminal-homebrew.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html b/registry/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html
new file mode 100644
index 000000000..16935d538
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-man-page/code-snippet-apple-terminal-man-page.html
@@ -0,0 +1,248 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Man Page</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #ede87a 0%, #ddd566 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.2),
+          0 10px 30px rgba(0, 0, 0, 0.12);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #f0e680;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #c8be40;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #333333;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #fef49c;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #000000;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #000000;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+      }
+
+      .output-line.indent {
+        padding-left: 24px;
+        color: #222222;
+      }
+
+      .output-line.section {
+        font-weight: bold;
+        margin-top: 2px;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #000000;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #000000;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #000000;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-man-page"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">man — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line section">CURL(1) General Commands Manual CURL(1)</span>
+            <span class="output-line"></span>
+            <span class="output-line section">NAME</span>
+            <span class="output-line indent">curl -- transfer a URL</span>
+            <span class="output-line"></span>
+            <span class="output-line section">SYNOPSIS</span>
+            <span class="output-line indent">curl [options / URLs]</span>
+            <span class="output-line"></span>
+            <span class="output-line section">DESCRIPTION</span>
+            <span class="output-line indent"
+              >curl is a tool for transferring data from or to a server using URLs.</span
+            >
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "man curl";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.4);
+
+      outputLines.forEach((line, i) => {
+        tl.set(line, { opacity: 1 }, 2.5 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.0);
+
+      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.6);
+
+      window.__timelines["code-snippet-apple-terminal-man-page"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json b/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
new file mode 100644
index 000000000..2eb8a610e
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-man-page/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-man-page",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Man Page",
+  "description": "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-man-page.html",
+      "target": "compositions/code-snippet-apple-terminal-man-page.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html b/registry/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html
new file mode 100644
index 000000000..0478047ad
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-novel/code-snippet-apple-terminal-novel.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Novel</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #c9a86c 0%, #b8955a 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(62, 41, 0, 0.3),
+          0 10px 30px rgba(0, 0, 0, 0.15);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #c9a86c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #a88040;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #3e2900;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 600;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #dfc18a;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #3e2900;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #3e2900;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #3e2900;
+      }
+
+      .output-line.muted {
+        color: #7a5a20;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #3e2900;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #3e2900;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #3e2900;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-novel"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line muted">Last login: Mon Jun 2 09:14:22 on ttys006</span>
+            <span class="output-line muted">Python 3.12.4 (main, Jun 6 2024, 18:26:44)</span>
+            <span class="output-line muted"
+              >Type "help", "copyright", "credits" or "license" for more information.</span
+            >
+            <span class="output-line bold">>>> import hyperframes</span>
+            <span class="output-line bold">>>> hf = hyperframes.Composition("intro.html")</span>
+            <span class="output-line">>>> hf.duration</span>
+            <span class="output-line">12.0</span>
+            <span class="output-line">>>> hf.dimensions</span>
+            <span class="output-line">Dimensions(width=1920, height=1080)</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "python3";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-novel"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json b/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
new file mode 100644
index 000000000..bd423554b
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-novel/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-novel",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Novel",
+  "description": "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-novel.html",
+      "target": "compositions/code-snippet-apple-terminal-novel.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html b/registry/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html
new file mode 100644
index 000000000..d16507149
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-ocean/code-snippet-apple-terminal-ocean.html
@@ -0,0 +1,253 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Ocean</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #1a3f9e;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #224fbe 0%, #0e2878 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.6),
+          0 10px 30px rgba(34, 79, 190, 0.3);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1a3f9e;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #224fbe;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.65);
+      }
+
+      .output-line.success {
+        color: #7fffb3;
+        font-weight: bold;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: rgba(255, 255, 255, 0.8);
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-ocean"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys007</span>
+            <span class="output-line bold">docker ps</span>
+            <span class="output-line dim">CONTAINER ID IMAGE COMMAND CREATED</span>
+            <span class="output-line"
+              >a1b2c3d4e5f6 nginx:latest "/docker-entrypoint.…" 2 hours ago</span
+            >
+            <span class="output-line"
+              >b2c3d4e5f6a7 postgres:15 "docker-entrypoint.s…" 2 hours ago</span
+            >
+            <span class="output-line"
+              >c3d4e5f6a7b8 redis:alpine "docker-entrypoint.s…" 2 hours ago</span
+            >
+            <span class="output-line success">3 containers running</span>
+            <span class="output-line dim">Use 'docker logs CONTAINER' to view output</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "docker ps";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-ocean"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json b/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
new file mode 100644
index 000000000..d10791a32
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-ocean/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-ocean",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Ocean",
+  "description": "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-ocean.html",
+      "target": "compositions/code-snippet-apple-terminal-ocean.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html b/registry/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html
new file mode 100644
index 000000000..830fdfef2
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-pro/code-snippet-apple-terminal-pro.html
@@ -0,0 +1,247 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Pro</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #141414 0%, #000000 70%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(136, 255, 103, 0.08),
+          0 10px 30px rgba(0, 0, 0, 0.9);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #1c1c1c;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #333333;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #bbbbbb;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #000000;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #bbbbbb;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #bbbbbb;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.accent {
+        color: #88ff67;
+        font-weight: bold;
+      }
+
+      .output-line.dim {
+        color: #666666;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #88ff67;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #bbbbbb;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #88ff67;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-pro"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys008</span>
+            <span class="output-line dim">Building production bundle...</span>
+            <span class="output-line"> vite v5.3.1 building for production...</span>
+            <span class="output-line"> ✓ 142 modules transformed.</span>
+            <span class="output-line"> dist/index.html 0.48 kB</span>
+            <span class="output-line"> dist/assets/index-Cv3rN.js 284.12 kB</span>
+            <span class="output-line"> dist/assets/index-Du4mP.css 42.08 kB</span>
+            <span class="output-line accent"> ✓ built in 2.31s</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac myapp % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npm run build";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac myapp % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-pro"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json b/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
new file mode 100644
index 000000000..2dae41cc3
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-pro/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-pro",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Pro",
+  "description": "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-pro.html",
+      "target": "compositions/code-snippet-apple-terminal-pro.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html b/registry/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html
new file mode 100644
index 000000000..fc7240eb9
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-red-sands/code-snippet-apple-terminal-red-sands.html
@@ -0,0 +1,244 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Red Sands</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #7b140e;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #8a1a12 0%, #4a0a06 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(123, 20, 14, 0.4);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #5e0f0a;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #8b2018;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffe1b9;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #7b140e;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffe1b9;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffe1b9;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: #c4916a;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #ffe1b9;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffe1b9;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-red-sands"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys009</span>
+            <span class="output-line">Fetching https://api.example.com/status</span>
+            <span class="output-line dim"> HTTP/2 200</span>
+            <span class="output-line dim"> content-type: application/json</span>
+            <span class="output-line dim"> x-request-id: a3f9c21e-04b2-4d78</span>
+            <span class="output-line">{</span>
+            <span class="output-line"> "status": "healthy",</span>
+            <span class="output-line"> "version": "2.4.1",</span>
+            <span class="output-line bold"> "uptime": "14d 6h 32m"</span>
+            <span class="output-line">}</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "curl -s api.example.com/status | jq";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.4);
+
+      const blinkTimes = [4.6, 5.0, 5.4, 5.8, 6.2, 6.6];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 7.0);
+
+      window.__timelines["code-snippet-apple-terminal-red-sands"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json b/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
new file mode 100644
index 000000000..d3f08fb27
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-red-sands/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-red-sands",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Red Sands",
+  "description": "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-red-sands.html",
+      "target": "compositions/code-snippet-apple-terminal-red-sands.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html
new file mode 100644
index 000000000..7c56fbd4d
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/code-snippet-apple-terminal-silver-aerogel.html
@@ -0,0 +1,250 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Silver Aerogel</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #2a2a2a;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #3a3a3a 0%, #1c1c1c 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.6),
+          0 10px 30px rgba(232, 232, 232, 0.05);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #2a2a2a;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #444444;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #3d3d3d;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: #aaaaaa;
+      }
+
+      .output-line.success {
+        color: #7fffb3;
+      }
+
+      .output-line.warn {
+        color: #ffd700;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #e8e8e8;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #e8e8e8;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-silver-aerogel"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys010</span>
+            <span class="output-line">Checking system resources...</span>
+            <span class="output-line">Filesystem Size Used Avail Use%</span>
+            <span class="output-line">/dev/disk3s1s1 460G 142G 302G 32%</span>
+            <span class="output-line dim">/dev/disk3s6 460G 5.0G 302G 2%</span>
+            <span class="output-line">/dev/disk3s2 460G 11G 302G 4%</span>
+            <span class="output-line warn">Memory: 14.2 GB / 16.0 GB used (89%)</span>
+            <span class="output-line success">CPU: 8-core, 12% load average</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "df -h && vm_stat";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-silver-aerogel"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
new file mode 100644
index 000000000..c42a2797e
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-silver-aerogel/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-silver-aerogel",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Silver Aerogel",
+  "description": "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-silver-aerogel.html",
+      "target": "compositions/code-snippet-apple-terminal-silver-aerogel.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png"
+  }
+}
diff --git a/registry/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html b/registry/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html
new file mode 100644
index 000000000..f8164fb0c
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-solid-colors/code-snippet-apple-terminal-solid-colors.html
@@ -0,0 +1,247 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Apple Terminal Solid Colors</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #4c0099;
+        font-family: "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
+      }
+
+      #scene {
+        width: 1920px;
+        height: 1080px;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: radial-gradient(ellipse at center, #5a00b3 0%, #2e0060 100%);
+      }
+
+      .terminal-window {
+        width: 1400px;
+        height: 700px;
+        border-radius: 10px;
+        overflow: hidden;
+        box-shadow:
+          0 30px 80px rgba(0, 0, 0, 0.7),
+          0 10px 30px rgba(76, 0, 153, 0.4);
+        display: flex;
+        flex-direction: column;
+      }
+
+      .titlebar {
+        height: 38px;
+        background: #3a0077;
+        display: flex;
+        align-items: center;
+        padding: 0 14px;
+        flex-shrink: 0;
+        border-bottom: 1px solid #6600bb;
+        position: relative;
+      }
+
+      .traffic-lights {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .traffic-lights span {
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        display: inline-block;
+      }
+
+      .traffic-lights .close {
+        background: #ff5f57;
+        border: 1px solid #e0443e;
+      }
+
+      .traffic-lights .minimize {
+        background: #ffbd2e;
+        border: 1px solid #dfa123;
+      }
+
+      .traffic-lights .fullscreen {
+        background: #28c840;
+        border: 1px solid #1aab29;
+      }
+
+      .window-title {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        font-size: 13px;
+        color: #ffffff;
+        font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
+        font-weight: 500;
+        letter-spacing: -0.1px;
+      }
+
+      .terminal-canvas {
+        flex: 1;
+        background: #4c0099;
+        padding: 18px 20px;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #ffffff;
+      }
+
+      .output-lines {
+        margin-bottom: 4px;
+      }
+
+      .output-line {
+        display: block;
+        white-space: pre;
+        opacity: 0;
+        color: #ffffff;
+      }
+
+      .output-line.bold {
+        font-weight: bold;
+        color: #ffffff;
+      }
+
+      .output-line.dim {
+        color: rgba(255, 255, 255, 0.55);
+      }
+
+      .output-line.accent {
+        color: #cc99ff;
+        font-weight: bold;
+      }
+
+      .input-line {
+        display: flex;
+        align-items: center;
+        white-space: pre;
+      }
+
+      .prompt {
+        color: #cc99ff;
+        font-weight: bold;
+        user-select: none;
+      }
+
+      .typed-command {
+        color: #ffffff;
+      }
+
+      .cursor-block {
+        display: inline-block;
+        width: 9px;
+        height: 16px;
+        background: #ffffff;
+        vertical-align: text-bottom;
+        margin-left: 1px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="scene"
+      data-composition-id="code-snippet-apple-terminal-solid-colors"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="terminal-window">
+        <div class="titlebar">
+          <div class="traffic-lights">
+            <span class="close"></span>
+            <span class="minimize"></span>
+            <span class="fullscreen"></span>
+          </div>
+          <span class="window-title">bash — 80×24</span>
+        </div>
+        <div class="terminal-canvas">
+          <div class="output-lines">
+            <span class="output-line dim">Last login: Mon Jun 2 09:14:22 on ttys011</span>
+            <span class="output-line">Initializing HyperFrames project...</span>
+            <span class="output-line dim"> Creating project structure</span>
+            <span class="output-line dim"> Copying template files</span>
+            <span class="output-line dim"> Installing dependencies</span>
+            <span class="output-line"> added 142 packages in 3.4s</span>
+            <span class="output-line accent"> ✓ Project ready at ./my-video</span>
+            <span class="output-line bold"> Run: cd my-video && npx hyperframes preview</span>
+          </div>
+          <div class="input-line">
+            <span class="prompt">user@Mac ~ % </span><span class="typed-command"></span
+            ><span class="cursor-block"></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script>
+      window.__timelines = window.__timelines || {};
+
+      const command = "npx hyperframes init my-video";
+      const typedEl = document.querySelector(".typed-command");
+      const cursorEl = document.querySelector(".cursor-block");
+      const outputLines = document.querySelectorAll(".output-line");
+
+      const tl = gsap.timeline({ paused: true });
+
+      tl.set(typedEl, { text: "" }, 0);
+
+      const charDuration = 1.5 / command.length;
+      command.split("").forEach((char, i) => {
+        tl.add(
+          () => {
+            typedEl.textContent = command.slice(0, i + 1);
+          },
+          0.5 + i * charDuration,
+        );
+      });
+
+      tl.set(cursorEl, { opacity: 0 }, 2.2);
+      tl.set(outputLines[0], { opacity: 1 }, 2.3);
+
+      tl.add(() => {
+        typedEl.textContent = "";
+      }, 2.5);
+
+      outputLines.forEach((line, i) => {
+        if (i === 0) return;
+        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);
+      });
+
+      tl.add(() => {
+        const inputLine = document.querySelector(".input-line");
+        const newPrompt = document.createElement("div");
+        newPrompt.className = "input-line";
+        newPrompt.innerHTML =
+          '<span class="prompt">user@Mac ~ % </span><span class="typed-command"></span><span class="cursor-block" id="final-cursor"></span>';
+        inputLine.style.display = "none";
+        inputLine.parentNode.appendChild(newPrompt);
+      }, 4.2);
+
+      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];
+      blinkTimes.forEach((t, i) => {
+        tl.add(() => {
+          const fc = document.getElementById("final-cursor");
+          if (fc) fc.style.opacity = i % 2 === 0 ? "0" : "1";
+        }, t);
+      });
+      tl.add(() => {
+        const fc = document.getElementById("final-cursor");
+        if (fc) fc.style.opacity = "1";
+      }, 6.8);
+
+      window.__timelines["code-snippet-apple-terminal-solid-colors"] = tl;
+    </script>
+  </body>
+</html>
diff --git a/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json b/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json
new file mode 100644
index 000000000..b9c41e2f8
--- /dev/null
+++ b/registry/blocks/code-snippet-apple-terminal-solid-colors/registry-item.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-apple-terminal-solid-colors",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Apple Terminal Solid Colors",
+  "description": "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session.",
+  "tags": ["code", "developer", "showcase", "terminal", "apple", "apple-terminal"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 12,
+  "files": [
+    {
+      "path": "code-snippet-apple-terminal-solid-colors.html",
+      "target": "compositions/code-snippet-apple-terminal-solid-colors.html",
+      "type": "hyperframes:composition"
+    }
+  ],
+  "preview": {
+    "video": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4",
+    "poster": "https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png"
+  }
+}