文字動畫
Line Shadow Text
帶移動線性投影的立體標題文字。
以 attr(data-text) 複製一份文字當投影，填入 45° 斜條紋漸層並沿對角線流動，讓標題浮現立體光影感。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add line-shadow-textPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
12
編輯中的呼叫預設屬性
<LineShadowText/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/line-shadow-text.json或在 components.json 設定 registries 後，改用 @webberui/line-shadow-text 安裝。
使用
import { LineShadowText } from "@/components/ui/line-shadow-text";
<h1 className="text-6xl font-bold">
Ship <LineShadowText text="faster" shadowColor="#6366f1" />
</h1>投影顏色預設沿用文字自身顏色（currentColor），會自動跟隨主題明暗；也可用 shadowColor 指定對比色營造霓虹感。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要呈現的文字，同時寫入 data-text 供投影層複製 |
as | React.ElementType | "span" | 渲染的標籤，例如 "h1" |
shadowColor | string | currentColor | 投影條紋顏色，會自動跟隨主題 |
duration | number | 12 | 線性光影流動一圈的時長（秒） |
offset | string | "0.04em" | 投影相對本體的偏移量（CSS 長度） |
className | string | — | 透傳至根元素的類名 |
可及性
- 使用者系統開啟「減少動態效果」時，投影靜止不再流動，保留立體外觀
- 投影層由 CSS
::after產生，不進入無障礙樹，朗讀時只有一次完整文字