commit 36661beaf74edd78337d4801ecde9e179cac8a66 Author: Wiwi Kuan Date: Wed Apr 1 21:48:32 2026 +0000 新增 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..65fb2af --- /dev/null +++ b/README.md @@ -0,0 +1,60 @@ +# TypingEffect + +模擬真人打字與刪字動畫的 React 元件,附閃爍游標。為 Docusaurus MDX 部落格文章設計。 + +## 使用方式 + +將 `TypingEffect.jsx` 複製到你的 Docusaurus 專案中(例如 `src/components/`),然後在任何 MDX 檔案中引入: + +```mdx +import TypingEffect from '@site/src/components/TypingEffect'; + + +``` + +## Props + +| Prop | 型別 | 預設值 | 說明 | +|------|------|--------|------| +| `steps` | `Step[]` | `[]` | 動畫腳本(見下方) | +| `loop` | `boolean` | `true` | 是否循環播放 | +| `typingSpeed` | `[min, max]` | `[40, 120]` | 打字速度範圍,單位為每字元毫秒數 | +| `deleteSpeed` | `[min, max]` | `[20, 60]` | 刪字速度範圍,單位為每字元毫秒數 | + +## Steps + +每個 step 是一個物件,執行以下三種動作之一: + +```js +{ text: "打出這些字" } // 逐字打出文字(支援 \n 換行) +{ pause: 1000 } // 暫停 N 毫秒 +{ delete: 5 } // 往回刪除 N 個字元 +{ delete: 'all' } // 全部刪除 +``` + +任何 `text` 或 `delete` step 都可以加上 `speed` 覆蓋全域速度設定: + +```js +{ text: "慢慢打", speed: [150, 300] } +{ delete: 3, speed: [80, 120] } +``` + +## 行為細節 + +- 使用 `Array.from()` 拆分字元,中文字與 emoji 都能正確處理。 +- 游標顏色使用 `currentColor`,自動適應淺色/深色主題。 +- 當 `loop` 設為 `false` 時,最後一個 step 結束後游標會消失。 + +## 授權 + +MIT \ No newline at end of file