Background Meteors

Grid Background with Meteors

Installation

npx scrollx-ui@latest add backgroundmeteors

Usage

import BackgroundMeteors from "@/components/ui/backgroundmeteors";

<BackgroundMeteors>
  <h1 className="text-xl text-center text-gray-800 dark:text-gray-100">
    Welcome to the Meteor Show
  </h1>
</BackgroundMeteors>

API Reference

BackgroundMeteors

BackgroundMeteors is a React component that creates an animated background featuring vertical meteor-like beams falling from the top to the bottom of the screen over a grid pattern. It supports light and dark mode styling and automatically regenerates beams to keep the animation continuous.

Props

• children (ReactNode, optional):
  Any React elements passed as children will be rendered centered above the meteor animation. This is useful for placing content such as headings, buttons, or other UI elements on top of the background effect.