npm i svelte-motion clsx tailwind-merge

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

const config = {
	// ... other properties
	theme: {
		extend: {
			animation: {
				// ...other animations
				'meteor-effect': 'meteor 5s linear infinite'
			},
			keyframes: {
				// ... other keyframes
				meteor: {
					'0%': { transform: 'rotate(215deg) translateX(0)', opacity: 1 },
					'70%': { opacity: 1 },
					'100%': {
						transform: 'rotate(215deg) translateX(-500px)',
						opacity: 0
					}
				}
			}
		}
	}
};

<script lang="ts">
	import { cn } from '@/utils';

	export let number: number | undefined = undefined;
	export let className: string | undefined = undefined;

	const meteors = new Array(number || 20).fill(true);
</script>

{#each meteors as meteor, idx (`meteor ${idx}`)}
	<span
		class={cn(
			'absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor-effect rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]',
			"before:absolute before:top-1/2 before:h-[1px] before:w-[50px] before:-translate-y-[50%] before:transform before:bg-gradient-to-r before:from-[#64748b] before:to-transparent before:content-['']",
			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>
{/each}

import Meteors from './Meteors.svelte';

export { Meteors };