Background Meteors

Installation

npx shadcn@latest add @scrollxui/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