Text Hover Gradient

hover 時以漸層輪廓描邊填色（x.ai 風），聚光跟隨游標顯露色彩。

以 SVG 描邊呈現文字，掛載時自動描一次輪廓；hover 時漸層聚光跟隨游標，將描邊逐步填上光譜色。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

文字內容text

字級fontSize

描邊粗細strokeWidth

0.75

聚光半徑spotlight

跟隨游標時長（秒）followDuration

0.28

入場描繪時長（秒）drawDuration

3.5

<TextHoverGradient />

npx shadcn@latest add https://webberui.com/r/text-hover-gradient.json

或在 components.json 設定 registries 後，改用 @webberui/text-hover-gradient 安裝。

安裝依賴後，從 registry JSON（/r/text-hover-gradient.json 的 files[0].content）複製 text-hover-gradient.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge

import { TextHoverGradient } from "@/components/ui/text-hover-gradient";

<TextHoverGradient text="webber" className="text-6xl font-bold" />

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`