Meteors

A night-sky meteor shower simulated on canvas 2D: every meteor carries a gradient trail and a glowing head, with an optional layer of faintly twinkling stars behind it — a good fit as a hero or card backdrop.

Meteors is a React meteor shower background component drawn with canvas 2D. The wrapper is laid out with Tailwind CSS, and Motion is only used to read the reduced-motion setting; pass your content as children and the meteors streak across underneath it.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

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>
  );
}

When to use

• Dark hero sections on a product homepage or event page, as a moving backdrop behind the headline.
• Background decoration for pricing cards, membership plan cards or announcement cards.
• Sparse pages such as 404 or coming-soon screens that need some visual interest.
• Brand or event pages with a space, astronomy or night theme.

Installation

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

Usage

Pass your foreground content as children and the meteors will sit beneath it:

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>

The container height is up to your className (for example h-[320px]); the component itself uses no viewport height units.

Examples

Hero with a call to action

Layout for children goes straight into className; here flex centers the heading and the button.

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">See every page's performance score before you deploy</h1>
      <a href="/signup" className="rounded-full bg-white px-5 py-2.5 text-sm font-medium text-slate-900">
        Get started
      </a>
    </Meteors>
  );
}

Card background with a brand color and fewer meteors

On a small card, fewer meteors and no stars keep it clean.

<Meteors
  quantity={8}
  color="#a78bfa"
  stars={false}
  trailLength={80}
  className="rounded-2xl p-6"
>
  <h3 className="text-lg font-semibold text-white">New: bulk export</h3>
  <p className="mt-2 text-sm text-slate-300">Export reports for an entire folder in one go.</p>
</Meteors>

Light background

The wrapper defaults to bg-slate-950. Swap it for a light color in className and set a dark color so the meteors stay visible.

<Meteors color="#0f172a" angle={135} speed={5} className="h-72 rounded-xl bg-white">
  <div className="p-8 text-slate-900">Scheduled maintenance in progress. Back in about 30 minutes.</div>
</Meteors>

Props

Accessibility

• When the user has "reduce motion" enabled at the system level, only a single static frame of stars and meteors is drawn and the animation loop never starts
• The canvas is a purely decorative layer with aria-hidden and pointer-events-none, so it interferes with neither the foreground content nor assistive technology

FAQ

Does it work with the Next.js App Router?

Yes. The file starts with "use client", so import it from a Server Component page as usual. The canvas and window are only accessed inside effects, so server rendering is safe.

Is it expensive to run?

It draws with requestAnimationFrame and uses an IntersectionObserver to pause the loop when the canvas scrolls out of view and resume when it comes back. Device pixel ratio is capped at 2, and the number of background stars scales with area up to 160.

How do I change the color, angle and speed?

color accepts any CSS color. When omitted, it uses the canvas text color and re-reads it whenever the html element's class changes (for example on a light/dark theme switch). Set direction with angle (0 is right, 90 is straight down), speed with speed and trail length with trailLength.

What happens with reduced motion?

It draws a single still frame without starting the animation loop, and the stars do not twinkle. The canvas has aria-hidden and pointer-events-none, so it does not interfere with interacting with or reading the foreground content.

What are the dependencies?

motion, clsx and tailwind-merge. If you prefer not to use the CLI, copy the source from the Manual tab in Installation.