螢光筆標記
模擬手繪螢光筆掃過的標記高亮，支援底線、刪除線、方框與圈選。
用 canvas 質感的手繪筆觸，在行內文字上掃出螢光筆、底線、刪除線、方框或圈選。全程只靠 2D 幾何抖動與 SVG 路徑描繪，進入視口或懸停時觸發。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
2
0.68
0.9
1
<TextHighlighter />
安裝
npx shadcn@latest add https://webberui.com/r/text-highlighter.json或在 components.json 設定 registries 後，改用 @webberui/text-highlighter 安裝。
安裝依賴後，從 registry JSON（/r/text-highlighter.json 的 files[0].content）複製 text-highlighter.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { TextHighlighter } from "@/components/ui/text-highlighter";
<p>
這句話裡的{" "}
<TextHighlighter color="#fde047">重點</TextHighlighter>{" "}
會被螢光筆掃過。
</p>action 可切換 "highlight"、"underline"、"strike-through"、"box"、"circle" 五種標記樣式。多段文字可各自設定 delay 形成接力揭示。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 要被標記的行內內容 |
action | "highlight" | "underline" | "strike-through" | "box" | "circle" | "highlight" | 標記方式 |
color | string | "#fde047" | 墨水顏色 |
roughness | number | 2 | 手繪抖動幅度（px） |
thickness | number | 0.68 | 螢光筆粗細相對行高的比例 |
strokeWidth | number | 自動 | 明確線寬（px），未給時依 action 推算 |
duration | number | 0.9 | 掃過動畫時長（秒） |
delay | number | 0 | 進場前延遲（秒） |
trigger | "inView" | "hover" | "inView" | 觸發時機 |
once | boolean | true | inView 模式是否只播放一次 |
seed | number | 1 | 亂數種子，固定手繪路徑 |
mixBlendMode | string | 螢光筆為 multiply | 混色模式 |
可及性
- 使用者系統開啟「減少動態效果」時，筆觸不做掃過動畫、直接顯示最終標記
- 標記層為 SVG 且帶
aria-hidden，文字本身維持原生可讀，輔助科技朗讀時不受影響 - 手繪路徑在客戶端量測後才描繪，SSR 僅輸出純文字，避免 hydration 落差