Merge pull request #67 from pras75299/feat/terminal-component

Feat/terminal component

Author: pras75299

apps/www/components/ui/hero-terminal.tsx

@@ -38,6 +38,7 @@ import {
   LucideUserCircle2,
   LucideWand2,
   LucideWaves,
+  Terminal,
 } from "lucide-react";
 
 export type ComponentVariant = {
@@ -108,6 +109,7 @@ const iconMap = {
   LucideUserCircle2,
   LucideWand2,
   LucideWaves,
+  Terminal,
 } satisfies Record<string, ElementType>;
 
 const componentDefinitions = [
@@ -3309,6 +3311,81 @@ const componentDefinitions = [
       }
     ],
     "usageCode": "import { MagneticLettersHero } from \"@/components/ui/hero-magnetic-letters\";\n\nexport default function Hero() {\n  return <MagneticLettersHero headline=\"Motion, where it matters.\" />;\n}"
+  },
+  {
+    "slug": "hero-terminal",
+    "name": "Terminal Hero",
+    "description": "A 'code-builds-the-page' hero: a headline above a macOS-style terminal that types your install commands and prints their output. Ships the reusable Terminal window too, with reduced-motion, in-view triggering, replay, copy, and keystroke sound.",
+    "icon": "Terminal",
+    "category": "Hero",
+    "kind": "block",
+    "addedAt": "2026-05-28",
+    "props": [
+      {
+        "name": "children",
+        "type": "ReactNode",
+        "description": "Slotted hero content above the terminal (headline / subhead / CTAs). When omitted, a default composition renders."
+      },
+      {
+        "name": "commands",
+        "type": "string[]",
+        "description": "Commands typed out sequentially in the terminal. Defaults to a shadcn init/install sequence."
+      },
+      {
+        "name": "outputs",
+        "type": "Record<number, string[]>",
+        "default": "{}",
+        "description": "Output lines printed after a command finishes typing, keyed by the command's index."
+      },
+      {
+        "name": "username",
+        "type": "string",
+        "default": "\"you\"",
+        "description": "Name shown highlighted in the shell prompt (renders as `username:~$`)."
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "default": "\"zsh — your-project\"",
+        "description": "Text shown centered in the window title bar."
+      },
+      {
+        "name": "typingSpeed",
+        "type": "number",
+        "default": "50",
+        "description": "Typing speed in milliseconds per character."
+      },
+      {
+        "name": "delayBetweenCommands",
+        "type": "number",
+        "default": "800",
+        "description": "Pause in milliseconds after a command's output before the next command starts."
+      },
+      {
+        "name": "initialDelay",
+        "type": "number",
+        "default": "500",
+        "description": "Delay in milliseconds before the first command begins typing."
+      },
+      {
+        "name": "enableSound",
+        "type": "boolean",
+        "default": "false",
+        "description": "Play a subtle keystroke click on each character via the Web Audio API. Defaults off in the hero to avoid autoplay audio."
+      },
+      {
+        "name": "loop",
+        "type": "boolean",
+        "default": "false",
+        "description": "Restart the typing sequence from the top once it finishes."
+      },
+      {
+        "name": "className",
+        "type": "string",
+        "description": "Extra classes on the outer `<section>`."
+      }
+    ],
+    "usageCode": "import { TerminalHero } from \"@/components/ui/hero-terminal\";\n\nexport default function Hero() {\n  return (\n    <TerminalHero\n      username=\"you\"\n      title=\"zsh — your-project\"\n      commands={[\n        \"npx shadcn@latest init\",\n        \"npm install motion\",\n        \"npx shadcn@latest add button card\",\n      ]}\n      outputs={{\n        0: [\n          \"✔ Preflight checks passed.\",\n          \"✔ Created components.json\",\n          \"✔ Initialized project.\",\n        ],\n        1: [\"added 1 package in 2s\"],\n        2: [\"✔ Done. Installed button, card.\"],\n      }}\n    >\n      <span className=\"mb-5 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3 py-1 text-xs uppercase tracking-[0.18em] text-white/70 backdrop-blur\">\n        One command to ship\n      </span>\n      <h1 className=\"text-balance text-4xl font-semibold tracking-tight sm:text-6xl\">\n        Watch your stack build itself.\n      </h1>\n      <p className=\"mt-5 max-w-xl text-pretty text-base text-white/65 sm:text-lg\">\n        Copy-paste components, zero config — production-ready before the cursor\n        stops blinking.\n      </p>\n    </TerminalHero>\n  );\n}"
   }
 ] satisfies ComponentDefinition[];
 

apps/www/config/components.ts

@@ -77,6 +77,7 @@ import { LiquidAuroraMeshHero } from "@/components/ui/hero-liquid-aurora-mesh";
 import { NoiseDotFieldHero } from "@/components/ui/hero-noise-dot-field";
 import { LogoMarqueeHero } from "@/components/ui/hero-logo-marquee";
 import { MagneticLettersHero } from "@/components/ui/hero-magnetic-letters";
+import { TerminalHero } from "@/components/ui/hero-terminal";
 import { motion } from "motion/react";
 import { useRef, useState } from "react";
 import {
@@ -3828,4 +3829,5 @@ export const componentDemos: Record<string, DemoComponent> = {
     </LogoMarqueeHero>
   ),
   "hero-magnetic-letters": () => <MagneticLettersHero />,
+  "hero-terminal": () => <TerminalHero />,
 };

apps/www/config/demos.tsx

@@ -1116,5 +1116,10 @@ export const docsScenarios: Record<string, ComponentDocs> = {
     "slug": "hero-magnetic-letters",
     "overview": "Per-glyph cursor-tracking hero. The headline reads as a normal h1 to screen readers (aria-label on the wrapper, aria-hidden on each animated span), so accessibility is preserved despite the per-letter wrapping.",
     "scenarios": []
+  },
+  "hero-terminal": {
+    "slug": "hero-terminal",
+    "overview": "TerminalHero pairs a headline with a live terminal that types your getting-started commands and prints their output — a high-conversion 'see it work' pattern for landing pages. The standalone `Terminal` window is exported from the same file for reuse elsewhere. The animation starts when the hero scrolls into view, respects `prefers-reduced-motion` (rendering the finished transcript instantly), and exposes copy + replay controls. The animated transcript is `aria-hidden` while a screen-reader-only copy carries the real content.",
+    "scenarios": []
   }
 };

apps/www/config/docs-scenarios.ts

@@ -1144,6 +1144,24 @@
         }
       ]
     },
+    {
+      "name": "hero-terminal",
+      "type": "registry:ui",
+      "title": "Terminal Hero",
+      "description": "A 'code-builds-the-page' hero: a headline above a macOS-style terminal that types your install commands and prints their output. Ships the reusable Terminal window too, with reduced-motion, in-view triggering, replay, copy, and keystroke sound.",
+      "dependencies": [
+        "motion",
+        "clsx",
+        "tailwind-merge"
+      ],
+      "files": [
+        {
+          "path": "components/ui/hero-terminal.tsx",
+          "type": "registry:component",
+          "target": "components/ui/hero-terminal.tsx"
+        }
+      ]
+    },
     {
       "name": "magnetic-text",
       "type": "registry:ui",

apps/www/public/r/hero-terminal.json

@@ -625,6 +625,23 @@
       ]
     }
   ],
+  "hero-terminal": [
+    {
+      "version": "1.0.1",
+      "date": "2026-05-29",
+      "changes": [
+        "Stop the prompt cursor from blinking under prefers-reduced-motion to honor the full reduced-motion claim.",
+        "Add a focus-visible ring to the copy and replay controls for keyboard users."
+      ]
+    },
+    {
+      "version": "1.0.0",
+      "date": "2026-05-28",
+      "changes": [
+        "Initial release."
+      ]
+    }
+  ],
   "magnetic-text": [
     {
       "version": "1.0.0",

apps/www/public/r/registry.json

@@ -61,6 +61,7 @@
     "hero-noise-dot-field",
     "hero-logo-marquee",
     "hero-magnetic-letters",
+    "hero-terminal",
     "magnetic-text"
   ]
 }