Meteor Effect
A group of beams in the background of a container, sort of like meteors.
Meteors because they're cool
I don't know what to write so I'll just paste something cool here. One more sentence because lorem ipsum is just unacceptable. Won't ChatGPT the shit out of this.
Installation
Install dependencies
npm i framer-motion clsx tailwind-mergeAdd util file
utils/cn.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}Add this into your tailwind.config.ts file
tailwind.config.js
theme: {
extend: {
animation: {
"meteor-effect": "meteor 5s linear infinite",
},
keyframes: {
meteor: {
"0%": { transform: "rotate(215deg) translateX(0)", opacity: "1" },
"70%": { opacity: "1" },
"100%": {
transform: "rotate(215deg) translateX(-500px)",
opacity: "0",
},
},
},
},
},
Copy the source code
components/ui/meteors.tsx
import { cn } from "@/utils/cn";
import clsx from "clsx";
import React from "react";
export const Meteors = ({
number,
className,
}: {
number?: number;
className?: string;
}) => {
const meteors = new Array(number || 20).fill(true);
return (
<>
{meteors.map((el, idx) => (
<span
key={"meteor" + idx}
className={cn(
"animate-meteor-effect absolute top-1/2 left-1/2 h-0.5 w-0.5 rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10] rotate-[215deg]",
"before:content-[''] before:absolute before:top-1/2 before:transform before:-translate-y-[50%] before:w-[50px] before:h-[1px] before:bg-gradient-to-r before:from-[#64748b] before:to-transparent",
className
)}
style={{
top: 0,
left: Math.floor(Math.random() * (400 - -400) + -400) + "px",
animationDelay: Math.random() * (0.8 - 0.2) + 0.2 + "s",
animationDuration: Math.floor(Math.random() * (10 - 2) + 2) + "s",
}}
></span>
))}
</>
);
};Props
| Prop name | Type | Description |
|---|---|---|
className | string | The class name of the child component. |
number | number | The number of meteors you want in the card |