文字動畫
打字機文字
逐字打字並帶閃爍游標的經典打字機效果，支援多句循環與刪除。
逐字打出文字並附上閃爍游標，可傳入單一字串或多句陣列做循環「打字 → 停留 → 刪除」的輪播效果。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add typewriter-textPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.075
0.04
1.4
編輯中的呼叫預設屬性
<TypewriterText/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/typewriter-text.json或在 components.json 設定 registries 後，改用 @webberui/typewriter-text 安裝。
使用
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），朗讀時是完整內容