TypingEffect

模擬真人打字與刪字動畫的 React 元件，附閃爍游標。為 Docusaurus MDX 部落格文章設計。

使用方式

將 TypingEffect.jsx 複製到你的 Docusaurus 專案中（例如 src/components/），然後在任何 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 是一個物件，執行以下三種動作之一：

{ text: "打出這些字" }        // 逐字打出文字（支援 \n 換行）
{ pause: 1000 }              // 暫停 N 毫秒
{ delete: 5 }                // 往回刪除 N 個字元
{ delete: 'all' }            // 全部刪除

任何 text 或 delete step 都可以加上 speed 覆蓋全域速度設定：

{ text: "慢慢打", speed: [150, 300] }
{ delete: 3, speed: [80, 120] }

行為細節

• 使用 Array.from() 拆分字元，中文字與 emoji 都能正確處理。
• 游標顏色使用 currentColor，自動適應淺色／深色主題。
• 當 loop 設為 false 時，最後一個 step 結束後游標會消失。