Components
Shooting Stars
Animated shooting stars effect with customizable colors, speed, and timing.
Shooting Stars
The ShootingStars component creates an animated shooting stars effect with customizable colors, speed, and timing. It's perfect for adding dynamic background animations to your UI.
Usage
Shooting Stars
Animated shooting stars with trails
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-gray-900 to-black">
<MShootingStars />
<MStarsBackground />
<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">Shooting Stars</h3>
<p class="text-gray-300">Animated shooting stars with trails</p>
</div>
</div>
</template>
Props
minSpeed
number
Minimum speed of the shooting stars.
maxSpeed
number
Maximum speed of the shooting stars.
minDelay
number
Minimum delay between shooting stars in milliseconds.
maxDelay
number
Maximum delay between shooting stars in milliseconds.
starColor
string
Color of the shooting star.
trailColor
string
Color of the shooting star trail.
starWidth
number
Width of the shooting star.
starHeight
number
Height of the shooting star.
class
string
CSS classes to apply to the SVG container.
Examples
Basic Shooting Stars
Shooting Stars
Add magical shooting star effects to your interface for a whimsical and engaging user experience
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-gray-900 to-black">
<MShootingStars />
<div class="relative z-10 h-full flex items-center justify-center">
<h3 class="text-xl font-bold text-white">Basic Shooting Stars</h3>
</div>
</div>
</template>
Custom Colors and Speed
Custom Shooting Stars
Gold stars with orange trails
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-purple-900 to-blue-900">
<MShootingStars
star-color="#FFD700"
trail-color="#FF4500"
:min-speed="5"
:max-speed="20"
:min-delay="800"
:max-delay="2000"
/>
<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">Custom Shooting Stars</h3>
<p class="text-gray-300">Gold stars with orange trails</p>
</div>
</div>
</template>