Docs
Meteor Shower Backgroud
Meteor Shower Backgroud
A Meteor Shower Backgroud
Usage
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",
},
}
}
}