Docs
Meteor Shower Backgroud

Meteor Shower Backgroud

A Meteor Shower Backgroud

This is the Meteor Shower Background

Installation

Copy and paste the cn util code into your project.

import { ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"
 
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Update tailwind.config.js

Add the following animations to your tailwind.config.js file:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        meteor: {
          "0%": { transform: "translateY(-20%) translateX(-50%)" },
          "100%": { transform: "translateY(300%) translateX(-50%)" },
        },
      },
      animation: {
        meteor: "meteor var(--duration) var(--delay) ease-in-out infinite",
      },
    }
  }
}

Copy and paste the Meteor Shower code into your project.

API Reference

Props

PropTypeDescription
indexnumberthe meteor dalay time.
childrenReact.ReactNodeThe content of the Dot.
classNamestringAdditional classes for the Dot.

Usage

export function ShowerDemo() {
  return (
    <AnimatedBeam>
      <div className="flex min-h-96 w-full flex-col items-center justify-center text-xl text-white md:text-3xl">
        <div className="max-w-lg rounded-xl bg-green p-4 text-center font-light backdrop-blur-sm">
          This is the Meteor Shower Background
        </div>
      </div>
    </AnimatedBeam>
  )
}
GridIPhone Background