流星雨背景 Meteors｜免費 React 元件

背景流星／流星雨劃過效果，canvas 2D 繪製發光拖尾與閃爍星點。

以 canvas 2D 模擬夜空流星雨：每顆流星帶漸層拖尾與發光頭部，背景可選鋪一層微微閃爍的星點，適合當 hero 或卡片底層。

把這個效果裝進你的專案

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

npx webberui@latest add meteors

Meteors 是用 React 與 canvas 2D 繪製的流星雨背景（meteor shower background）元件，外層容器用 Tailwind CSS 排版，Motion 只用來讀取「減少動態效果」設定；把內容當成 children 放進去，流星就在底層斜劃而過。

Playground

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

流星數量quantity

飛行角度（度）angle

115

飛行速度speed

拖尾長度（px）trailLength

120

頭部光暈glow

背景星點stars

import * as React from "react";

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

編輯中的呼叫預設屬性

<Meteors/>

    </div>
  );
}

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

適用情境

產品首頁或活動頁的深色 hero 區塊，當作主標題後方的動態背景。
定價卡、會員方案卡或公告卡片的底層裝飾。
404、即將推出（coming soon）這類內容較少、需要一點畫面張力的頁面。
太空、天文、夜間主題的品牌或活動頁。

安裝

npx webberui@latest add https://webberui.com/r/meteors.json

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

使用

把前景內容當作 children 傳入，流星會鋪在內容底層：

import { Meteors } from "@/components/ui/meteors";

<Meteors className="h-[320px] w-full rounded-xl">
  <div className="relative z-10 flex h-full items-center justify-center">
    <h3 className="text-2xl font-semibold text-slate-100">Meteor Shower</h3>
  </div>
</Meteors>

容器高度由你的 className 決定（例如 h-[320px]）；元件本身不使用任何 viewport 高度單位。

範例

Hero 區塊加上 CTA

children 的佈局直接寫在 className，這裡用 flex 把標題與按鈕置中。

import { Meteors } from "@/components/ui/meteors";

export function Hero() {
  return (
    <Meteors className="flex min-h-[480px] flex-col items-center justify-center gap-6 px-6 text-center">
      <h1 className="text-4xl font-semibold text-white">部署前就看到每個頁面的效能分數</h1>
      <a href="/signup" className="rounded-full bg-white px-5 py-2.5 text-sm font-medium text-slate-900">
        開始使用
      </a>
    </Meteors>
  );
}

卡片底層：品牌色、數量較少

小面積的卡片用較少的流星、關掉星點，畫面比較乾淨。

<Meteors
  quantity={8}
  color="#a78bfa"
  stars={false}
  trailLength={80}
  className="rounded-2xl p-6"
>
  <h3 className="text-lg font-semibold text-white">新功能：批次匯出</h3>
  <p className="mt-2 text-sm text-slate-300">現在可以一次匯出整個資料夾的報表。</p>
</Meteors>

淺色背景

外層預設底色是 bg-slate-950，可以用 className 換成淺色，再把 color 設成深色，讓流星在淺底上看得見。

<Meteors color="#0f172a" angle={135} speed={5} className="h-72 rounded-xl bg-white">
  <div className="p-8 text-slate-900">系統維護中，預計 30 分鐘後恢復。</div>
</Meteors>

Props

Prop	型別	預設值	說明
`quantity`	`number`	`20`	同時在畫面上的流星數量
`color`	`string`	`currentColor`	流星顏色；未指定時隨主題的文字色
`angle`	`number`	`115`	飛行方向（度），`0` 向右、`90` 正下方
`speed`	`number`	`8`	頭部速度（每幀位移 px）
`trailLength`	`number`	`120`	拖尾長度基準（px）
`glow`	`boolean`	`true`	流星頭部是否帶發光光暈
`stars`	`boolean`	`true`	背景是否鋪一層閃爍星點
`children`	`ReactNode`	—	疊在流星之上的前景內容

可及性

使用者系統開啟「減少動態效果」時，只繪製一張靜止的星空與流星，不啟動動畫迴圈
canvas 為純裝飾層，帶 aria-hidden 且 pointer-events-none，不干擾前景內容與輔助科技

常見問題

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

可以。檔案開頭已有 "use client"，在 Server Component 頁面中照常 import。canvas 與 window 只在 effect 裡存取，SSR 不會出錯。

會不會很耗效能？

元件以 requestAnimationFrame 繪製，並用 IntersectionObserver 在 canvas 捲出畫面時暫停迴圈、捲回來再繼續。裝置像素比最多以 2 倍計算，背景星點數量依面積計算、上限 160 顆。

怎麼調顏色、角度與速度？

color 接受任何 CSS 顏色；未指定時沿用 canvas 的文字色，並在 html 的 class 改變（例如切換深淺主題）時重新讀取。方向用 angle（0 向右、90 正下方），速度用 speed，拖尾長度用 trailLength。

開啟「減少動態效果」會怎樣？

只畫一張靜止的畫面，不啟動動畫迴圈，星點也不閃爍。canvas 帶 aria-hidden 與 pointer-events-none，不影響前景內容的操作與朗讀。

需要哪些依賴？

motion、clsx 與 tailwind-merge。不想用 CLI 時，可在安裝區的「手動」分頁複製原始碼。

Meteors

把這個效果裝進你的專案

本頁目錄