Light Rays
由上／側灑下的體積光束射線，隨微風般擺動與呼吸。
以 canvas 2D 繪製的體積光束背景：一組射線自光源錨點灑出，各自閃爍、緩慢擺動，末端柔和淡出，營造神性光（god rays）氛圍。可疊放前景內容。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
14
60
0.7
1
<LightRays />
安裝
npx shadcn@latest add https://webberui.com/r/light-rays.json或在 components.json 設定 registries 後，改用 @webberui/light-rays 安裝。
安裝依賴後，從 registry JSON（/r/light-rays.json 的 files[0].content）複製 light-rays.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { LightRays } from "@/components/ui/light-rays";
<LightRays color="#ffe8b0" origin="top" className="h-[340px] w-full rounded-xl">
{/* 前景內容 */}
</LightRays>origin 可選 "top"、"top-left"、"top-right"、"left"、"right"、"center"，控制光束灑出的方向。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
color | string | "#fff4d6" | 射線顏色（CSS 顏色字串） |
rayCount | number | 14 | 射線數量，越多越密 |
origin | "top" | "top-left" | "top-right" | "left" | "right" | "center" | "top" | 光源錨點位置 |
spread | number | 60 | 扇形展開總角度（度） |
speed | number | 1 | 動畫速度倍率 |
blur | number | 24 | 光束柔化模糊量（px） |
intensity | number | 0.7 | 整體亮度 0–1 |
grain | boolean | false | 疊加細微噪點顆粒 |
followMouse | boolean | false | 光源輕微跟隨滑鼠（僅滑鼠指標） |
children | ReactNode | — | 疊在光束之上的前景內容 |
可及性
- 使用者系統開啟「減少動態效果」時，僅渲染一張靜態光束，不進入動畫迴圈
- canvas 標記
aria-hidden，純裝飾不干擾輔助科技 - 光束層
pointer-events-none，不攔截前景內容的互動