docusaurus-typing-effect/README.md

# 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 結束後游標會消失。