Components
Meteors
Animated meteor shower effect with customizable density and timing.
Meteors
The Meteors component creates an animated meteor shower effect with customizable density and timing. It's perfect for adding dynamic background animations to your UI.
Usage
Meteor Shower
Animated meteor shower effect
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-gray-900 to-black">
<MMeteors :number="30" />
<div class="relative z-10 h-full flex flex-col items-center justify-center text-center p-4">
<h3 class="text-2xl font-bold text-white mb-2">Meteor Shower</h3>
<p class="text-gray-300">Animated meteor shower effect</p>
</div>
</div>
</template>
Props
number
number
Number of meteors to display in the shower.
class
string
CSS classes to apply to the meteor elements.
Examples
Basic Meteor Shower
Meteor Shower
Create stunning meteor effects that streak across your interface for a cosmic user experience
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-gray-900 to-black">
<MMeteors />
<div class="relative z-10 h-full flex items-center justify-center">
<h3 class="text-xl font-bold text-white">Basic Meteor Shower</h3>
</div>
</div>
</template>
Custom Meteor Count
Dense Meteor Shower
50 meteors for a more intense effect
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-gray-900 to-black">
<MMeteors :number="50" />
<div class="relative z-10 h-full flex flex-col items-center justify-center text-center p-4">
<h3 class="text-xl font-bold text-white mb-2">Dense Meteor Shower</h3>
<p class="text-gray-300">50 meteors for a more intense effect</p>
</div>
</div>
</template>