Line Shadow Text
帶移動線性投影的立體標題文字。
以 attr(data-text) 複製一份文字當投影，填入 45° 斜條紋漸層並沿對角線流動，讓標題浮現立體光影感。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
12
<LineShadowText />
安裝
npx shadcn@latest add https://webberui.com/r/line-shadow-text.json或在 components.json 設定 registries 後，改用 @webberui/line-shadow-text 安裝。
安裝依賴後，從 registry JSON（/r/line-shadow-text.json 的 files[0].content）複製 line-shadow-text.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
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產生，不進入無障礙樹，朗讀時只有一次完整文字