Animated Terminal
逐行打字模擬的命令列終端機，支援指令逐字輸入、輸出揭示與循環播放。
一個帶 macOS 視窗外觀的終端機，依序把每一行「打」出來：command 逐字輸入並帶提示符，output 與 comment 按節奏揭示，最後留下閃爍的待命游標。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
45
500
<AnimatedTerminal />
安裝
npx shadcn@latest add https://webberui.com/r/animated-terminal.json或在 components.json 設定 registries 後，改用 @webberui/animated-terminal 安裝。
安裝依賴後，從 registry JSON（/r/animated-terminal.json 的 files[0].content）複製 animated-terminal.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { AnimatedTerminal } from "@/components/ui/animated-terminal";
<AnimatedTerminal
title="webberui — zsh"
lines={[
{ type: "command", text: "npm run build" },
{ type: "output", text: "Build complete in 4.2s", delay: 800 },
]}
/>;每一筆 lines 的 type 可為 "command"、"output" 或 "comment"；只有 command 會逐字輸入並顯示提示符，output 與 comment 會整行揭示。用 delay 為某一行加上開始前的停頓，模擬編譯或等待。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
lines | TerminalLine[] | — | 要依序播放的行 |
typingSpeed | number | 45 | command 逐字輸入速度（毫秒/字） |
lineDelay | number | 500 | 每行完成後、進入下一行前的停頓（毫秒） |
startDelay | number | 300 | 整體開始前的延遲（毫秒） |
prompt | string | "$" | 預設提示符 |
title | string | "bash" | 視窗標題列文字 |
showTrafficLights | boolean | true | 顯示 macOS 紅黃綠三顆燈 |
loop | boolean | false | 播完後循環重播 |
loopDelay | number | 2200 | 循環前的停頓（毫秒） |
TerminalLine
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
type | "command" | "output" | "comment" | "command" | 行類型 |
text | string | — | 該行文字內容 |
prompt | string | 繼承 prompt | 覆寫此行的提示符（僅 command 有效） |
delay | number | 0 | 此行開始前的額外停頓（毫秒） |
可及性
- 使用者系統開啟「減少動態效果」時，直接完整渲染所有行，游標不閃爍
- 三顆視窗燈與游標皆帶
aria-hidden，不干擾螢幕閱讀器