Summer pricing is live: save $50 on Starwind Pro lifetime access.
Starwind Pro
Back to Shaders

Shooting Stars

Pro

A night-sky shader with fine meteor trails, layered stars, and varied flight paths. Includes live sky and meteor controls.

Upgrade to Pro
Loading code...

Starwind Dependencies

Sign in to view code and copy install commands.

Sign in

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Upgrade to Pro

Failed to load code. Please try again.

Code

Usage
<ShaderShootingStars
  shootingStarAngle={-32}
  shootingStarSpeed={0.7}
  shootingStarAmount={7}
  shootingStarSize={0.9}
  shootingStarTrailLength={0.24}
  backgroundStarAmount={0.62}
  starTwinkleSpeed={0.35}
  skyZenithColor="#04060e"
  skyHorizonColor="#152436"
  starCoreColor="#ebf6ff"
  shootingStarCoreColor="#c1f5ff"
  shootingStarTrailColor="#57b8ff"
/>

Props

proptypedefaultdescription
shootingStarAngle number -32 Travel angle in degrees. Negative values move toward the lower edge.
shootingStarSpeed number 0.7 Meteor lifecycle motion multiplier.
shootingStarAmount number 7 Number of meteor emitters. Each emitter pauses between flights.
shootingStarSize number 0.9 Meteor head and trail width multiplier.
shootingStarTrailLength number 0.24 Meteor trail length.
backgroundStarAmount number 0.62 Background star population.
starTwinkleSpeed number 0.35 Background star twinkle motion.
opacity number 0.96 Canvas opacity.
maxDpr number 1.5 Maximum device pixel ratio.
maxFps 30 | 45 | 60 60 Maximum animation frames per second.
skyZenithColor string "#04060e" Upper sky CSS color or comma-separated RGB channels.
skyHorizonColor string "#152436" Lower sky CSS color or comma-separated RGB channels.
starCoreColor string "#ebf6ff" Background star CSS color or comma-separated RGB channels.
shootingStarCoreColor string "#c1f5ff" Meteor head CSS color or comma-separated RGB channels.
shootingStarTrailColor string "#57b8ff" Meteor trail CSS color or comma-separated RGB channels.