{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "terminal-hero",
  "type": "registry:ui",
  "title": "Terminal hero",
  "description": "Demonstrates a developer workflow and result through progressive commands.",
  "dependencies": [
    "motion"
  ],
  "categories": [
    "hero-story"
  ],
  "docs": "https://motion-lexicon.pages.dev/en/components/terminal-hero/",
  "meta": {
    "engines": [
      "motion"
    ],
    "runtimeCost": "light",
    "signature": "Command, output, and completion form one loop",
    "sceneFamily": "spatial-dark",
    "motionRole": "ui",
    "primaryState": "Terminal workflow ready to run",
    "assetProvenance": "self-contained"
  },
  "files": [
    {
      "path": "src/registry/components/terminal-hero.tsx",
      "type": "registry:ui",
      "target": "components/motion-lexicon/terminal-hero.tsx",
      "content": "\"use client\";\nimport { useReducedMotion } from \"motion/react\";\nimport { useState } from \"react\";\nexport type TerminalHeroStep = { command: string; output: string; status?: \"success\" | \"info\" | \"warning\" };\nexport type TerminalHeroProps = { steps: readonly TerminalHeroStep[]; title?: string; label?: string; runLabel?: string; resetLabel?: string; className?: string; onComplete?: () => void };\nexport function TerminalHero({ steps, title = \"Ship the page\", label = \"Terminal workflow\", runLabel = \"Run next\", resetLabel = \"Reset\", className = \"\", onComplete }: TerminalHeroProps) { const reduced = useReducedMotion() === true; const [visible, setVisible] = useState(0); const complete = visible >= steps.length; const run = () => { if (complete) return; const next = visible + 1; setVisible(next); if (next === steps.length) onComplete?.(); }; return <section aria-label={label} className={`w-full overflow-hidden rounded-[20px] border border-[#a9dec4]/20 bg-[#09120e] p-4 text-[#e7fff0] shadow-[0_26px_56px_-38px_rgba(0,0,0,.92)] ${className}`}><div className=\"flex items-start justify-between gap-3\"><div><span className=\"font-mono text-[9px] tracking-[.16em] text-[#a7deb8]/60\">TERMINAL WORKFLOW</span><h2 className=\"mt-1 font-serif text-[28px] leading-none tracking-[-.055em]\">{title}</h2></div><span className=\"mt-1 flex gap-1.5\" aria-hidden><i className=\"size-2 rounded-full bg-[#ec7755]\" /><i className=\"size-2 rounded-full bg-[#e8c16b]\" /><i className=\"size-2 rounded-full bg-[#8fd2a0]\" /></span></div><div className=\"mt-5 min-h-[190px] rounded-[12px] border border-white/10 bg-black/25 p-3 font-mono text-[10px] leading-[1.8]\" aria-live=\"polite\">{steps.slice(0, visible).map((step, index) => <div key={`${step.command}-${index}`}><span className=\"text-[#a7deb8]\">$</span> <span className=\"text-[#f4ffe7]\">{step.command}</span><br /><span className={step.status === \"warning\" ? \"text-[#efc27b]\" : \"text-[#9acbb4]\"}>{step.output}</span></div>)}{!complete ? <span className=\"text-[#a7deb8]/65\">{reduced ? \"Ready\" : \"▍\"}</span> : <span className=\"text-[#8fd2a0]\">✓ workflow complete</span>}</div><div className=\"mt-3 flex gap-2\"><button type=\"button\" disabled={complete} onClick={run} className=\"min-h-11 flex-1 rounded-xl bg-[#dff0bf] px-3 text-[11px] font-semibold text-[#152317] outline-none focus-visible:ring-2 focus-visible:ring-[#a7deb8] disabled:opacity-50\">{runLabel}</button><button type=\"button\" onClick={() => setVisible(0)} className=\"min-h-11 rounded-xl border border-white/15 px-4 text-[11px] outline-none focus-visible:ring-2 focus-visible:ring-[#a7deb8]\">{resetLabel}</button></div></section>; }\n"
    }
  ]
}