體積光束背景 Light Rays｜免費 React 元件

以 canvas 2D 繪製的體積光束背景：一組射線自光源錨點灑出，各自閃爍、緩慢擺動，末端柔和淡出，營造神性光（god rays）氛圍。可疊放前景內容。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add light-rays

Light Rays 是用 React 與 canvas 2D 做的光束背景（god rays、體積光）元件，版面用 Tailwind CSS，減少動態效果的偵測來自 Motion。光束外觀由固定種子產生，每次渲染都一樣；前景內容直接放在 children。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

光源位置origin

射線數量rayCount

扇形角度spread

整體亮度intensity

0.7

動畫速度speed

射線顏色color

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<LightRays/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

適用情境

產品發表頁或 SaaS 首頁的 hero 背景
活動、展覽或音樂會頁面的主視覺，搭配暖色光營造舞台感
登入頁、等候名單頁等內容少、需要氛圍的版面
定價區或 CTA 區塊的重點強調背景

安裝

npx webberui@latest add https://webberui.com/r/light-rays.json

或在 components.json 設定 registries 後，改用 @webberui/light-rays 安裝。

使用

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"，控制光束灑出的方向。

範例

置中的 hero 區塊

前景的版面直接寫在 className；followMouse 讓光源輕微跟著滑鼠移動。

<LightRays
  followMouse
  className="flex h-[520px] w-full flex-col items-center justify-center text-center"
>
  <h1 className="text-4xl font-semibold text-white">新版控制台上線</h1>
  <p className="mt-3 max-w-md text-neutral-300">部署紀錄、流量與錯誤追蹤整合在同一個畫面。</p>
</LightRays>

冷色側光＋顆粒

origin="left" 讓光從左側灑入；開啟 grain 可以減少大面積漸層的色帶，blur 越小光束邊緣越銳利。

<LightRays
  origin="left"
  color="#9ad7ff"
  rayCount={20}
  spread={40}
  blur={16}
  intensity={0.5}
  grain
  className="h-96 w-full rounded-2xl"
/>

淺色背景

元件預設背景是 bg-neutral-950；cn 會合併 class，所以傳入其他背景色就能覆寫，再調低 intensity 搭配較深的光色。

<LightRays
  color="#f59e0b"
  intensity={0.35}
  speed={0.6}
  className="h-80 w-full bg-amber-50"
>
  {/* 前景內容 */}
</LightRays>

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，不攔截前景內容的互動

常見問題

可以在 Next.js App Router 使用嗎？

可以。檔案開頭已經有 "use client"，在 Server Component 頁面裡照一般方式 import 即可。canvas 在掛載後才開始繪製，首次渲染與 SSR 輸出一致，不會有 hydration 不一致的問題。

會影響效能嗎？

動畫用 requestAnimationFrame 繪製，IntersectionObserver 偵測到元件捲出視窗時會暫停迴圈，捲回來再接上。裝置像素比上限為 2，避免高解析度螢幕的畫布過大。

怎麼調整顏色、密度與速度？

color 設定光色，rayCount 控制射線數量，spread 是扇形總角度，speed 是動畫速度倍率，intensity 控制整體亮度；柔和程度由 blur 決定，它是套在 canvas 上的 CSS filter: blur()。

觸控裝置上 `followMouse` 會作用嗎？

不會。只處理 pointerType 為 mouse 的指標事件，觸控與觸控筆不會移動光源。

有考慮減少動態效果嗎？

有。偵測到「減少動態效果」時只畫一張靜態光束，不啟動動畫迴圈。

Light Rays

把這個效果裝進你的專案

本頁目錄