hyperframes/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx

---
title: "Code Snippet - Apple Terminal Grass"
description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
---

import { InstallCommand } from "/snippets/install-command.jsx";

## Install

<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-grass" item="code-snippet-apple-terminal-grass" />

That writes one file: `compositions/code-snippet-apple-terminal-grass.html`.

<iframe
  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
  title="code-snippet-apple-terminal-grass preview"
  loading="lazy"
  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-grass.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png");document.body.appendChild(p)});<\/script></body></html>`}
/>

## Source

<Accordion title="code-snippet-apple-terminal-grass.html">

```html
<!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>
```

</Accordion>

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

{/* hf:generated-footer */}

Tagged `code` `developer` `showcase` `terminal` `apple` `apple-terminal`.

## Related topics

- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)