新增 README.md

README.md

@@ -0,0 +1,60 @@
+# TypingEffect
+
+模擬真人打字與刪字動畫的 React 元件，附閃爍游標。為 Docusaurus MDX 部落格文章設計。
+
+## 使用方式
+
+將 `TypingEffect.jsx` 複製到你的 Docusaurus 專案中（例如 `src/components/`），然後在任何 MDX 檔案中引入：
+
+```mdx
+import TypingEffect from '@site/src/components/TypingEffect';
+
+<TypingEffect steps={[
+  { text: "Hello World" },
+  { pause: 1000 },
+  { delete: 5 },
+  { text: "你好" },
+  { pause: 800 },
+  { delete: 'all' },
+  { text: "最終文字\n第二行" },
+  { pause: 2000 },
+  { delete: 'all' },
+]} />
+```
+
+## 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