時空扭曲背景 Warp Background｜免費 React 元件

以 CSS 3D 透視把四面網格牆折成隧道，光束沿牆面向深處飛行，營造 warp speed 效果。純 CSS transform 與 keyframes，無任何 WebGL 相依。

把這個效果裝進你的專案

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

npx webberui@latest add warp-background

Warp Background 是用 React 與 Tailwind CSS 做的時空隧道（warp speed）網格背景，光束動畫完全由 CSS 3D transform 與 @keyframes 完成，Motion 只用來偵測減少動態效果。四面牆的尺寸以 container query 單位（cqw／cqh）對齊卡片大小，換尺寸不需要重新計算。

Playground

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

透視強度 (px)perspective

100

每面光束數beamsPerSide

網格與光束寬度 (%)beamSize

飛行秒數beamDuration

光束色相beamHue

210

import * as React from "react";

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

編輯中的呼叫預設屬性

<WarpBackground/>

    </div>
  );
}

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

適用情境

產品發表、版本上線公告的 CTA 卡片
開發者工具或 AI 產品首頁中，強調「速度」「部署」的功能區塊
活動報名、倒數頁面的主視覺卡片
空狀態或等候畫面，讓頁面不至於太空

安裝

npx webberui@latest add https://webberui.com/r/warp-background.json

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

使用

import { WarpBackground } from "@/components/ui/warp-background";

<WarpBackground className="p-10">
  <h3 className="text-2xl font-semibold">穿越時空扭曲</h3>
</WarpBackground>

容器需要明確尺寸：用 className 給定高度與內距（例如 h-[320px] max-w-md p-10），前景內容置中的佈局也寫在 className。

範例

置中的 CTA 卡片

前景置中的版面寫在 className；beamHue 固定色相後，所有光束都會是同一個色系。

<WarpBackground
  beamHue={210}
  className="flex h-[360px] max-w-xl items-center justify-center p-10 text-center"
>
  <div>
    <h3 className="text-2xl font-semibold">部署時間縮短到 30 秒</h3>
    <p className="mt-2 text-neutral-500">連結 Git 儲存庫，推送後自動建置上線。</p>
  </div>
</WarpBackground>

更強烈的扭曲與更密的光束

perspective 越小，透視越誇張；beamsPerSide 增加每面光束數，beamDuration 縮短讓光束飛得更快。

<WarpBackground
  perspective={60}
  beamsPerSide={5}
  beamSize={4}
  beamDuration={2}
  beamDelayMax={2}
  className="h-80 p-10"
>
  {/* 前景內容 */}
</WarpBackground>

beamSize 同時決定網格格子與光束寬度，數值是佔容器的百分比。

滿版深色區塊

容器預設帶圓角、邊框與淺色背景；className 會用 cn 合併，可以覆寫成滿版深色區塊，再把網格線調亮。

<WarpBackground
  gridColor="rgba(255,255,255,0.12)"
  className="h-[480px] rounded-none border-0 bg-neutral-950 px-6 py-20 text-white"
>
  {/* 前景內容 */}
</WarpBackground>

Props

Prop	型別	預設值	說明
`perspective`	`number`	`100`	透視強度（px），越小扭曲越劇烈
`beamsPerSide`	`number`	`3`	每一面同時飛行的光束數
`beamSize`	`number`	`5`	網格格子與光束寬度（佔容器 `%`）
`beamDelayMin`	`number`	`0`	光束延遲最小值（秒）
`beamDelayMax`	`number`	`3`	光束延遲最大值（秒）
`beamDuration`	`number`	`3`	單束飛完全程秒數
`gridColor`	`string`	`rgba(128,128,140,0.28)`	網格線顏色
`beamHue`	`number`	—	固定色相（`0`~`360`）；不給則每束隨機取色
`children`	`ReactNode`	—	疊在網格上的前景內容
`className`	`string`	—	透傳到容器；在此指定尺寸與內距

可及性

使用者系統開啟「減少動態效果」時，只保留靜態透視網格，光束不飛行
背景層帶 aria-hidden 且 pointer-events-none，不干擾前景互動與朗讀
光束使用亂數色相，故僅在客戶端掛載後渲染，避免 SSR hydration 不一致

常見問題

需要 WebGL 或 canvas 嗎？

不需要。網格是 CSS 漸層背景，隧道是 3D transform 翻折出來的四面牆，光束是 CSS @keyframes 動畫。依賴只有 motion（偵測減少動態效果）、clsx 與 tailwind-merge。

可以在 Next.js App Router 使用嗎？會有 hydration 問題嗎？

可以，檔案開頭已經有 "use client"。光束的位置、延遲與色相用亂數產生，所以只在客戶端掛載後才渲染；伺服器端與首次渲染只輸出靜態網格，不會出現 hydration 不一致。

容器尺寸要怎麼設定？

在 className 指定明確的高度，例如 h-80 或 h-[360px]。網格牆是以容器尺寸為基準的 container query 單位計算，不指定高度時，隧道只會跟前景內容一樣高。

怎麼改顏色？

gridColor 控制網格線顏色，beamHue 固定光束色相（0–360），不傳時每一束隨機取色。容器背景與邊框直接在 className 覆寫。

有考慮減少動態效果嗎？

有。偵測到「減少動態效果」時只保留靜態的透視網格，不渲染飛行的光束。

Warp Background

把這個效果裝進你的專案

本頁目錄