{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "terminal-animation-demo",
  "type": "registry:component",
  "registryDependencies": [
    "terminal-animation"
  ],
  "files": [
    {
      "path": "registry/default/example/terminal-animation-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nimport {\n  TerminalAnimationBackgroundGradient,\n  TerminalAnimationBlinkingCursor,\n  TerminalAnimationCommandBar,\n  TerminalAnimationContainer,\n  TerminalAnimationContent,\n  TerminalAnimationOutput,\n  TerminalAnimationRoot,\n  TerminalAnimationTabList,\n  TerminalAnimationTabTrigger,\n  TerminalAnimationTrailingPrompt,\n  TerminalAnimationWindow,\n  type TabContent,\n  type TerminalLine,\n} from \"../ui/terminal-animation\"\n\nexport interface TerminalAnimationDemoProps {\n  /** Tab content for each command; defaults to defaultTerminalTabs */\n  tabs?: TabContent[]\n  /** Background image URL; when unset, BackgroundGradient is used */\n  backgroundImage?: string\n  /** Force dark mode for the terminal regardless of page theme */\n  alwaysDark?: boolean\n}\n\nconst backgroundImage =\n  \"/component-images/terminal-animation/terminal-animation-bg-2.png\"\n\nconst tabs: TabContent[] = [\n  {\n    label: \"install\",\n    command: \"npm install\",\n    lines: [\n      { text: \"\", delay: 80 },\n      {\n        text: \"added 1,247 packages in 12s\",\n        color: \"text-[#6FF7CC]\",\n        delay: 400,\n      },\n      { text: \"\", delay: 80 },\n      {\n        text: \"  Cult UI is looking for funding\",\n        color: \"text-slate-400\",\n        delay: 150,\n      },\n      {\n        text: \"    run `npm fund cult-ui` for details\",\n        color: \"text-slate-500\",\n        delay: 100,\n      },\n      {\n        text: \"  +-----------------------+\",\n        color: \"text-[#ED42B5]\",\n        delay: 120,\n      },\n      {\n        text: \"  |       CULT UI         |\",\n        color: \"text-[#ED42B5]\",\n        delay: 120,\n      },\n      {\n        text: \"  |   Shadcn expanded    |\",\n        color: \"text-[#ED42B5]\",\n        delay: 120,\n      },\n      {\n        text: \"  +-----------------------+\",\n        color: \"text-[#ED42B5]\",\n        delay: 160,\n      },\n      { text: \"\", delay: 80 },\n      {\n        text: \"  found 0 vulnerabilities\",\n        color: \"text-[#ADFA1F]\",\n        delay: 250,\n      },\n    ],\n  },\n  {\n    label: \"build\",\n    command: \"npm run build\",\n    lines: [\n      { text: \"\", delay: 80 },\n      {\n        text: \"  ▲ Next.js 16.1.6\",\n        color: \"text-slate-300\",\n        delay: 300,\n      },\n      { text: \"\", delay: 80 },\n      {\n        text: \"  Creating an optimized production build...\",\n        color: \"text-slate-400\",\n        delay: 250,\n      },\n      {\n        text: \"  ✓ Compiled successfully\",\n        color: \"text-[#6FF7CC]\",\n        delay: 200,\n      },\n      {\n        text: \"  ✓ Linting and checking validity of types\",\n        color: \"text-[#6FF7CC]\",\n        delay: 150,\n      },\n      {\n        text: \"  ✓ Generating static pages (12/12)\",\n        color: \"text-[#6FF7CC]\",\n        delay: 150,\n      },\n      {\n        text: \"  Route (app)  /  142 kB  |  First Load JS 198 kB\",\n        color: \"text-slate-500\",\n        delay: 150,\n      },\n      {\n        text: \"  Route (app)  /blog 61 kB | First Load JS 57 kB\",\n        color: \"text-slate-500\",\n        delay: 150,\n      },\n      {\n        text: \"  Route (app)  /about 75 kB | First Load JS 92 kB\",\n        color: \"text-slate-500\",\n        delay: 150,\n      },\n      { text: \"\", delay: 80 },\n      {\n        text: \"  ✓ Build completed in 4.2s\",\n        color: \"text-[#6FF7CC]\",\n        delay: 300,\n      },\n    ],\n  },\n  {\n    label: \"deploy\",\n    command: \"vercel deploy --prod\",\n    lines: [\n      { text: \"\", delay: 80 },\n      { text: \"  Vercel CLI 39.2.0\", color: \"text-slate-400\", delay: 200 },\n      { text: \"\", delay: 80 },\n      {\n        text: \"  > Deploying to production...\",\n        color: \"text-[#ED42B5]\",\n        delay: 300,\n      },\n      { text: \"\", delay: 80 },\n      { text: \"  ✓ Building\", color: \"text-[#6FF7CC]\", delay: 250 },\n      { text: \"  ✓ Uploading\", color: \"text-[#6FF7CC]\", delay: 200 },\n      { text: \"  ✓ Finalizing\", color: \"text-[#6FF7CC]\", delay: 200 },\n      { text: \"\", delay: 80 },\n      {\n        text: \"  Production: https://aisdkagents.vercel.app\",\n        color: \"text-[#ED42B5]\",\n        delay: 400,\n      },\n      { text: \"\", delay: 80 },\n      {\n        text: \"  ✓ Deployment complete\",\n        color: \"text-[#6FF7CC]\",\n        delay: 250,\n      },\n    ],\n  },\n  {\n    label: \"test\",\n    command: \"npm test\",\n    lines: [\n      { text: \"\", delay: 80 },\n      {\n        text: \"  PASS  src/components/Button.test.tsx\",\n        color: \"text-slate-400\",\n        delay: 200,\n      },\n      {\n        text: \"    ✓ renders correctly\",\n        color: \"text-[#ADFA1F]\",\n        delay: 100,\n      },\n      {\n        text: \"    ✓ handles click events\",\n        color: \"text-[#ADFA1F]\",\n        delay: 100,\n      },\n      {\n        text: \"  PASS  src/utils/format.test.ts\",\n        color: \"text-slate-400\",\n        delay: 150,\n      },\n      {\n        text: \"    ✓ formats currency\",\n        color: \"text-[#ADFA1F]\",\n        delay: 100,\n      },\n      {\n        text: \"    ✓ formats dates\",\n        color: \"text-[#ADFA1F]\",\n        delay: 100,\n      },\n      { text: \"\", delay: 80 },\n      {\n        text: \"  Test Suites: 2 passed, 2 total\",\n        color: \"text-[#ADFA1F]\",\n        delay: 200,\n      },\n      {\n        text: \"  Tests:       4 passed, 4 total\",\n        color: \"text-[#ADFA1F]\",\n        delay: 150,\n      },\n      { text: \"  Time:        1.234 s\", color: \"text-slate-500\", delay: 100 },\n    ],\n  },\n]\n\nexport function TerminalAnimationDemo() {\n  const [animationKey, setAnimationKey] = useState(0)\n\n  return (\n    <TerminalAnimationRoot\n      key={animationKey}\n      alwaysDark={true}\n      backgroundImage={backgroundImage}\n      className=\"bg-background relative flex w-full justify-center overflow-clip\"\n      defaultActiveTab={1}\n      hideCursorOnComplete={false}\n      tabs={tabs}\n    >\n      <button\n        className=\"absolute top-4 left-4 z-20 rounded-md border border-white/25 bg-black/45 px-3 py-1.5 font-mono text-[11px] tracking-wide text-white/90 uppercase transition hover:bg-black/65\"\n        onClick={() => setAnimationKey((prev) => prev + 1)}\n        type=\"button\"\n      >\n        Refresh\n      </button>\n      <a\n        className=\"absolute top-4 right-4 z-20 rounded-md border border-white/25 bg-black/45 px-3 py-1.5 font-mono text-[11px] tracking-wide text-white/90 uppercase transition hover:bg-black/65\"\n        download=\"terminal-animation-image-2.png\"\n        href={backgroundImage}\n      >\n        Download BG\n      </a>\n      {!backgroundImage && <TerminalAnimationBackgroundGradient />}\n      <TerminalAnimationContainer className=\"max-w-[43rem]\">\n        <TerminalAnimationWindow className=\"outline-1 outline-offset-[2px] outline-white/30\">\n          <TerminalAnimationContent className=\"min-h-[26rem]\">\n            <div className=\"flex items-center gap-2 leading-relaxed\">\n              <span className=\"text-muted-foreground font-mono text-[10px] select-none md:text-sm\">\n                $\n              </span>\n              <TerminalAnimationCommandBar\n                className=\"text-foreground font-mono text-[10px] md:text-sm\"\n                cursor={<TerminalAnimationBlinkingCursor />}\n              />\n            </div>\n\n            <TerminalAnimationOutput\n              className=\"mt-1\"\n              renderLine={(\n                line: TerminalLine,\n                _i: number,\n                visible: boolean\n              ) => {\n                if (!visible) {\n                  return null\n                }\n                return (\n                  <div className=\"leading-relaxed\">\n                    <span\n                      className={cn(\n                        \"font-mono text-[10px] md:text-sm\",\n                        line.color ?? \"text-muted-foreground\"\n                      )}\n                    >\n                      {line.text || \"\\u00A0\"}\n                    </span>\n                  </div>\n                )\n              }}\n            />\n            <TerminalAnimationTrailingPrompt className=\"mt-1 flex items-center gap-2 leading-relaxed\">\n              <span className=\"text-muted-foreground font-mono text-sm select-none\">\n                $\n              </span>\n              <TerminalAnimationBlinkingCursor />\n            </TerminalAnimationTrailingPrompt>\n          </TerminalAnimationContent>\n\n          <div className=\"flex justify-center pb-6\">\n            <TerminalAnimationTabList className=\"border-border bg-muted/50 inline-flex items-center gap-0 rounded-lg border px-1 py-1\">\n              {tabs.map((tab, i) => (\n                <TerminalAnimationTabTrigger\n                  className={cn(\n                    \"cursor-pointer rounded-md px-3.5 py-1 font-mono text-sm transition-all duration-150\",\n                    \"data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:font-medium\",\n                    \"data-[state=inactive]:text-muted-foreground data-[state=inactive]:hover:text-foreground\"\n                  )}\n                  index={i}\n                  key={tab.label}\n                >\n                  {tab.label}\n                </TerminalAnimationTabTrigger>\n              ))}\n            </TerminalAnimationTabList>\n          </div>\n        </TerminalAnimationWindow>\n      </TerminalAnimationContainer>\n    </TerminalAnimationRoot>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}