Gradient Shine Text
流動漸層文字疊加週期掃光，純 CSS keyframes，深淺色自適應。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
6
<GradientShineText />
安裝
npx shadcn@latest add https://webberui.com/r/gradient-shine-text.json或在 components.json 設定 registries 後，改用 @webberui/gradient-shine-text 安裝。
純 CSS 實作，無執行期動畫依賴，只需 cn 工具的兩個套件。安裝後，從 registry JSON（/r/gradient-shine-text.json 的 files[0].content）複製 gradient-shine-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install clsx tailwind-merge使用
import { GradientShineText } from "@/components/ui/gradient-shine-text";
<GradientShineText
text="Beautiful by default."
className="text-4xl font-bold"
/>
// 自訂漸層色與週期，或關閉掃光
<GradientShineText colors={["#0ea5e9", "#34d399"]} duration={8} shine={false}>
漸層流動，也支援中文。
</GradientShineText>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要呈現的文字（與 children 擇一） |
children | ReactNode | — | 自訂內容，優先於 text |
colors | string[] | 內建三色漸層 | 漸層色依序排列，會自動首尾相接以無縫循環 |
duration | number | 6 | 一輪流動週期（秒），掃光在每輪前段掃過一次 |
shine | boolean | true | 是否疊加週期性掃過的高光帶 |
as | React.ElementType | "span" | 渲染的元素標籤 |
className | string | — | 附加樣式（字級、字重等在此設定） |
細節
- 純 CSS 動畫：
@keyframes由元件內嵌<style>注入，安裝到任何專案都不需修改 Tailwind 設定或全域 CSS，也沒有 hydration 閃爍問題 - 無縫循環：流動漸層自動首尾同色，每輪位移正好一個圖寬，
background-repeat下循環無接縫 - 掃光層：第二層
no-repeat的窄幅高光帶疊在漸層上，每輪前 45% 掃過一次，其餘時間停在畫面外 - 深淺色模式：預設配色以
--wb-gst-*CSS 變數定義（以:where壓低特異度），.dark下自動換成亮色系，也可直接用colors完全自訂
可及性
- 文字是真實 DOM 文字（
background-clip: text只影響上色），螢幕閱讀器照常朗讀、可搜尋可選取 - 使用者系統開啟「減少動態效果」時停止動畫，顯示靜態漸層（掃光停留在畫面外不可見）