Terminal Animation

Copy
import {
  TerminalAnimationRoot,
  TerminalAnimationContainer,
  TerminalAnimationWindow,
  TerminalAnimationContent,
  TerminalAnimationCommandBar,
  TerminalAnimationOutput,
  TerminalAnimationTabList,
  TerminalAnimationTabTrigger,
  type TabContent,
} from "@/components/ui/terminal-animation"
 
const tabs: TabContent[] = [
  {
    label: "dev",
    command: "npm run dev",
    lines: [
      { text: "  ▲ Next.js 16.1.6", delay: 300 },
      { text: "  - Local: http://localhost:3000", delay: 200, color: "text-cyan-400" },
    ],
  },
]

Copy
<TerminalAnimationRoot tabs={tabs} defaultActiveTab={0}>
  <TerminalAnimationContainer>
    <TerminalAnimationWindow>
      <TerminalAnimationContent>
        <TerminalAnimationCommandBar className="font-mono text-sm" />
        <TerminalAnimationOutput className="mt-2 space-y-1" />
      </TerminalAnimationContent>
 
      <TerminalAnimationTabList className="flex gap-2 p-4">
        {tabs.map((tab, index) => (
          <TerminalAnimationTabTrigger key={tab.label} index={index}>
            {tab.label}
          </TerminalAnimationTabTrigger>
        ))}
      </TerminalAnimationTabList>
    </TerminalAnimationWindow>
  </TerminalAnimationContainer>
</TerminalAnimationRoot>

Copy
const [activeTab, setActiveTab] = useState(1)
 
<TerminalAnimationRoot
  tabs={tabs}
  activeTab={activeTab}
  onActiveTabChange={setActiveTab}
>
  {/* terminal layout */}
</TerminalAnimationRoot>

Copy
<TerminalAnimationOutput
  renderLine={(line, index, visible) => {
    if (!visible) return null
 
    return (
      <div className="font-mono text-sm leading-relaxed">
        <span className="text-muted-foreground mr-3 select-none">{String(index + 1).padStart(2, "0")}</span>
        <span className={line.color ?? "text-foreground"}>{line.text || "\u00A0"}</span>
      </div>
    )
  }}
/>