燈光錐標題 Lamp Effect｜免費 React 元件

進入視口時，兩片鏡像光錐與中央燈管亮線一起展開，把注意力聚焦到下方的標頭。

把這個效果裝進你的專案

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

npx webberui@latest add lamp-effect

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

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

光錐顏色color

動畫時長（秒）duration

0.8

進場延遲（秒）delay

0.15

只播放一次once

import * as React from "react";

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

編輯中的呼叫預設屬性

<LampEffect/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/lamp-effect.json

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

使用

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），不影響朗讀

Lamp Effect

把這個效果裝進你的專案

Playground

安裝

使用

Props

可及性

本頁目錄