Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
Original file line number Diff line number Diff line change
@@ -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
68 changes: 68 additions & 0 deletions docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
Original file line number Diff line number Diff line change
@@ -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
67 changes: 67 additions & 0 deletions docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
Original file line number Diff line number Diff line change
@@ -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
67 changes: 67 additions & 0 deletions docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
Original file line number Diff line number Diff line change
@@ -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
68 changes: 68 additions & 0 deletions docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
Original file line number Diff line number Diff line change
@@ -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
Loading
Loading