文字動畫
Text Hover Gradient
hover 時以漸層輪廓描邊填色（x.ai 風），聚光跟隨游標顯露色彩。
以 SVG 描邊呈現文字，掛載時自動描一次輪廓；hover 時漸層聚光跟隨游標，將描邊逐步填上光譜色。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add text-hover-gradientPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
56
0.75
0.28
3.5
編輯中的呼叫預設屬性
<TextHoverGradient/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/text-hover-gradient.json或在 components.json 設定 registries 後，改用 @webberui/text-hover-gradient 安裝。
使用
import { TextHoverGradient } from "@/components/ui/text-hover-gradient";
<TextHoverGradient text="webber" className="text-6xl font-bold" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要描邊填色的文字（單行） |
colors | string[] | 暖冷交錯光譜 | 漸層停靠色，沿水平方向鋪開 |
strokeWidth | number | 0.75 | 描邊粗細（相對 viewBox 高 100 的 user unit） |
drawDuration | number | 3.5 | 掛載自描輪廓時長（秒），設 0 關閉 |
followDuration | number | 0.28 | 聚光跟隨游標的收斂時長（秒） |
spotlight | string | "22%" | 聚光半徑（viewBox 百分比字串） |
fontSize | number | 56 | 字級（SVG user unit），文字置中於 300x100 的 viewBox |
可及性
- 使用者系統開啟「減少動態效果」時，跳過自描輪廓與聚光動畫，直接顯示完整漸層描邊
- 以
viewBox縮放，字級與描邊隨容器等比適配