打字機文字
逐字打字並帶閃爍游標的經典打字機效果，支援多句循環與刪除。
逐字打出文字並附上閃爍游標，可傳入單一字串或多句陣列做循環「打字 → 停留 → 刪除」的輪播效果。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.075
0.04
1.4
<TypewriterText />
安裝
npx shadcn@latest add https://webberui.com/r/typewriter-text.json或在 components.json 設定 registries 後，改用 @webberui/typewriter-text 安裝。
安裝依賴後，從 registry JSON（/r/typewriter-text.json 的 files[0].content）複製 typewriter-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { TypewriterText } from "@/components/ui/typewriter-text";
<TypewriterText text={["動畫元件", "互動介面", "美好體驗"]} />傳單一字串並關閉 loop，就是一次性的打字效果：
<TypewriterText text="Hello, world." loop={false} />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | string[] | — | 要打字的字串；給陣列時逐句循環 |
typeSpeed | number | 0.075 | 每個字元打出的間隔（秒） |
deleteSpeed | number | 0.04 | 每個字元刪除的間隔（秒） |
pauseDuration | number | 1.4 | 打完一句後、開始刪除前的停留（秒） |
startDelay | number | 0 | 首次開始前的延遲（秒） |
loop | boolean | true | 是否循環播放 |
cursorChar | string | "|" | 游標字元 |
showCursor | boolean | true | 是否顯示游標 |
cursorBlinkDuration | number | 1 | 游標閃爍週期（秒） |
cursorClassName | string | — | 游標的額外樣式 |
可及性
- 使用者系統開啟「減少動態效果」時，直接顯示完整文字、游標停止閃爍
- 容器帶
aria-label（完整句子），打字過程對輔助科技隱藏（aria-hidden），朗讀時是完整內容