Components
Stars Background
Animated starfield background with customizable density and twinkling effects.
Stars Background
The StarsBackground component creates an animated starfield background with customizable star density and twinkling effects. It's perfect for adding a cosmic background to your UI.
Usage
Stars Background
Animated starfield background
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-gray-900 to-black">
<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">Stars Background</h3>
<p class="text-gray-300">Animated starfield background</p>
</div>
</div>
</template>
Props
starDensity
number
Density of stars in the background (stars per pixel).
allStarsTwinkle
boolean
Whether all stars should twinkle.
twinkleProbability
number
Probability that a star will twinkle (0-1).
minTwinkleSpeed
number
Minimum twinkling speed.
maxTwinkleSpeed
number
Maximum twinkling speed.
class
string
CSS classes to apply to the canvas container.
Examples
Basic Stars Background
Starfield Background
Create an immersive starfield background with twinkling stars 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">
<MStarsBackground />
<div class="relative z-10 h-full flex items-center justify-center">
<h3 class="text-xl font-bold text-white">Basic Stars</h3>
</div>
</div>
</template>
Custom Density and Twinkling
Dense Twinkling Stars
More stars with faster twinkling
<template>
<div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-blue-900 to-purple-900">
<MStarsBackground
:star-density="0.0003"
:twinkle-probability="0.9"
:min-twinkle-speed="0.2"
:max-twinkle-speed="0.8"
/>
<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 Twinkling Stars</h3>
<p class="text-gray-300">More stars with faster twinkling</p>
</div>
</div>
</template>