ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-02 12:08:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Miguel Ángel
2026-06-02 12:12:46 -04:00
committed by GitHub
co-authored by Claude Sonnet 4.6
parent a4706da513
commit 689deaf4b8
37 changed files with 4073 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+67
View File
@@ -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