Lamp Effect
Linear 風燈光錐聚焦的區塊標頭，光錐與亮線隨進場展開。
進入視口時，兩片鏡像光錐與中央燈管亮線一起展開，把注意力聚焦到下方的標頭。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.8
0.15
<LampEffect />
安裝
npx shadcn@latest add https://webberui.com/r/lamp-effect.json或在 components.json 設定 registries 後，改用 @webberui/lamp-effect 安裝。
安裝依賴後，從 registry JSON（/r/lamp-effect.json 的 files[0].content）複製 lamp-effect.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { LampEffect } from "@/components/ui/lamp-effect";
<LampEffect>
<h2 className="text-4xl font-semibold text-white">Build in the light</h2>
</LampEffect>光錐主色可透過 color 調整，支援任何 CSS 色值：
<LampEffect color="#a78bfa">
<h2 className="text-4xl font-semibold text-white">紫色燈光</h2>
</LampEffect>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 疊在光錐下方的標頭內容 |
color | string | "#22d3ee" | 光錐主色，對應 --wb-lamp-color |
duration | number | 0.8 | 光錐展開動畫時長（秒） |
delay | number | 0.15 | 進場前延遲（秒） |
once | boolean | true | 只在第一次進入視口時播放 |
className | string | — | 透傳到最外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，直接以展開後的終值渲染，不播放動畫
- 光錐、亮線與暈光皆為裝飾層（
aria-hidden），不影響朗讀