Skip to content
Open
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
35 changes: 6 additions & 29 deletions docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: "Apple Terminal Basic"
description: "Apple Terminal Basic profile with white background and black text, per-character typing animation."
title: "Code Snippet - Apple Terminal Basic"
description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
---

# Apple Terminal Basic
# Code Snippet - 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.
Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session.

`code` `developer` `showcase` `terminal` `apple`
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`

<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 />

Expand All @@ -21,12 +21,6 @@ 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 |
Expand All @@ -46,22 +40,5 @@ npx hyperframes add apple-terminal
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>
<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
36 changes: 6 additions & 30 deletions docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
---
title: "Apple Terminal Clear Dark"
description: "Apple Terminal Clear Dark profile with semi-transparent dark background and white text, per-character typing animation."
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."
---

# Apple Terminal Clear Dark
# Code Snippet - 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.
Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session.

`code` `developer` `showcase` `terminal` `apple`
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`

<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>
Expand All @@ -22,12 +21,6 @@ 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 |
Expand All @@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
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>
<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
35 changes: 6 additions & 29 deletions docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: "Apple Terminal Clear Light"
description: "Apple Terminal Clear Light profile with semi-transparent white background and black text, per-character typing animation."
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."
---

# Apple Terminal Clear Light
# Code Snippet - 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.
Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session.

`code` `developer` `showcase` `terminal` `apple`
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`

<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 />

Expand All @@ -21,12 +21,6 @@ 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 |
Expand All @@ -46,22 +40,5 @@ npx hyperframes add apple-terminal
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>
<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
35 changes: 6 additions & 29 deletions docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: "Apple Terminal Grass"
description: "Apple Terminal Grass profile with black background and bright green text, per-character typing animation."
title: "Code Snippet - Apple Terminal Grass"
description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
---

# Apple Terminal Grass
# Code Snippet - 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.
Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session.

`code` `developer` `showcase` `terminal` `apple`
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`

<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 />

Expand All @@ -21,12 +21,6 @@ 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 |
Expand All @@ -46,22 +40,5 @@ npx hyperframes add apple-terminal
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>
<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
36 changes: 6 additions & 30 deletions docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
---
title: "Apple Terminal Homebrew"
description: "Apple Terminal Homebrew profile with black background, bright green text and lime cursor, per-character typing animation."
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."
---

# Apple Terminal Homebrew
# Code Snippet - Apple Terminal Homebrew

macOS Terminal.app window in the built-in Homebrew profileblack background with vivid green text and a lime `#48F800` cursor. One of the most beloved classic terminal looks.
Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session.

`code` `developer` `showcase` `terminal` `apple`
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`

<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>
Expand All @@ -22,12 +21,6 @@ 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 |
Expand All @@ -47,22 +40,5 @@ npx hyperframes add apple-terminal
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>
<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
35 changes: 6 additions & 29 deletions docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
title: "Apple Terminal Man Page"
description: "Apple Terminal Man Page profile with pale yellow background and black text, per-character typing animation."
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."
---

# Apple Terminal Man Page
# Code Snippet - Apple Terminal Man Page

macOS Terminal.app window in the built-in Man Page profilepale yellow `#FEF49C` background with black text. Evoking classic Unix manual pages, with per-character typing animation.
Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session.

`code` `developer` `showcase` `terminal` `apple`
`code` `developer` `showcase` `terminal` `apple` `apple-terminal`

<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 />

Expand All @@ -21,12 +21,6 @@ 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 |
Expand All @@ -46,22 +40,5 @@ npx hyperframes add apple-terminal
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>
<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
Loading