Files
frames/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
zooqueen 75094e0d60 frames: publish the toolchain as @hanzo/frames
@hanzo/frame is taken by the hero video primitive — one full-bleed video
element — which has held that name on npm since it shipped. This repo is the
video toolchain: a CLI, a renderer, a studio, a player. Plural is what it is,
so the CLI publishes as @hanzo/frames and the workspace packages follow it
(@hanzo/frames-core, @hanzo/frames-engine, and the rest).

The binary stays `frames`, and now actually ships. The manifest mapped it to
bin/frames.mjs while the file on disk was bin/hyperframes.mjs, so a global
install produced no working command.

The paths that name a package to fetch were pointing elsewhere. The update
check read registry.npmjs.org/frames, a different author's package, and the
npm, bun and pnpm installers would have pulled it over the CLI; the render
image installed the upstream hyperframes; scaffolded projects and the docs
pinned the unscoped name. All of them now name @hanzo/frames.
2026-08-13 18:10:14 -07:00

68 lines
2.0 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
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="/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" poster="/images/catalog/blocks/code-snippet-apple-terminal-basic.png" autoPlay muted loop playsInline />
## Install
<CodeGroup>
```bash Terminal
npx @hanzo/frames add code-snippet-apple-terminal-basic
```
</CodeGroup>
Install all Apple Terminal themes at once:
```bash Terminal
npx @hanzo/frames 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` | frames: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