React Shooting Stars Background

Cosmic meteor showers that turn interfaces into stargazing experiences. Build mesmerizing React space backgrounds with SVG animations, customizable trajectories, realistic depth effects, and TypeScript support for Next.js applications with shadcn/ui.

React

SVG Animations

RequestAnimationFrame

Creating cosmic space experiences?

Join our Discord community for help from other developers.

Most interfaces feel earthbound. Confined to grids and boxes. What if your background could capture the wonder of looking up at a meteor shower? The sense of infinite space and cosmic movement? This React component creates shooting stars that streak across your interface with realistic physics and customizable colors.

Cosmic meteor shower effects

Watch shooting stars streak across infinite space with realistic depth and movement:

Loading component...

'use client';import { cn } from "@/lib/utils";import React, { useEffect, useState, useRef } from "react";interface ShootingStar {  id: number;  x: number;  y: number;  angle: number;  scale: number;  speed: number;  distance: number;}interface ShootingStarsProps {  minSpeed?: number;  maxSpeed?: number;  minDelay?: number;  maxDelay?: number;  starColor?: string;  trailColor?: string;  starWidth?: number;  starHeight?: number;  className?: string;}const getRandomStartPoint = () => {  const side = Math.floor(Math.random() * 4);  const offset = Math.random() * window.innerWidth;  switch (side) {    case 0:      return { x: offset, y: 0, angle: 45 };    case 1:      return { x: window.innerWidth, y: offset, angle: 135 };    case 2:      return { x: offset, y: window.innerHeight, angle: 225 };    case 3:      return { x: 0, y: offset, angle: 315 };    default:      return { x: 0, y: 0, angle: 45 };  }};export const ShootingStars: React.FC<ShootingStarsProps> = ({  minSpeed = 10,  maxSpeed = 30,  minDelay = 1200,  maxDelay = 4200,  starColor = "#9E00FF",  trailColor = "#2EB9DF",  starWidth = 10,  starHeight = 1,  className,}) => {  const [star, setStar] = useState<ShootingStar | null>(null);  const svgRef = useRef<SVGSVGElement>(null);  useEffect(() => {    const createStar = () => {      const { x, y, angle } = getRandomStartPoint();      const newStar: ShootingStar = {        id: Date.now(),        x,        y,        angle,        scale: 1,        speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,        distance: 0,      };      setStar(newStar);      const randomDelay = Math.random() * (maxDelay - minDelay) + minDelay;      setTimeout(createStar, randomDelay);    };    createStar();    return () => {};  }, [minSpeed, maxSpeed, minDelay, maxDelay]);  useEffect(() => {    const moveStar = () => {      if (star) {        setStar((prevStar) => {          if (!prevStar) return null;          const newX =            prevStar.x +            prevStar.speed * Math.cos((prevStar.angle * Math.PI) / 180);          const newY =            prevStar.y +            prevStar.speed * Math.sin((prevStar.angle * Math.PI) / 180);          const newDistance = prevStar.distance + prevStar.speed;          const newScale = 1 + newDistance / 100;          if (            newX < -20 ||            newX > window.innerWidth + 20 ||            newY < -20 ||            newY > window.innerHeight + 20          ) {            return null;          }          return {            ...prevStar,            x: newX,            y: newY,            distance: newDistance,            scale: newScale,          };        });      }    };    const animationFrame = requestAnimationFrame(moveStar);    return () => cancelAnimationFrame(animationFrame);  }, [star]);  return (    <svg      ref={svgRef}      className={cn("w-full h-full absolute inset-0", className)}    >      {star && (        <rect          key={star.id}          x={star.x}          y={star.y}          width={starWidth * star.scale}          height={starHeight}          fill="url(#gradient)"          transform={`rotate(${star.angle}, ${            star.x + (starWidth * star.scale) / 2          }, ${star.y + starHeight / 2})`}        />      )}      <defs>        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">          <stop offset="0%" style={{ stopColor: trailColor, stopOpacity: 0 }} />          <stop            offset="100%"            style={{ stopColor: starColor, stopOpacity: 1 }}          />        </linearGradient>      </defs>    </svg>  );};

Built for React applications with TypeScript and Next.js. Uses SVG rendering with requestAnimationFrame for smooth 60fps animations. Stars appear from random screen edges with diagonal trajectories that grow larger as they travel, creating natural depth perception. Perfect for space themes, gaming interfaces, or any design that needs to feel vast and infinite.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/shooting-stars.json

npx shadcn@latest add https://www.shadcn.io/registry/shooting-stars.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/shooting-stars.json

bunx shadcn@latest add https://www.shadcn.io/registry/shooting-stars.json

Usage

import { ShootingStars } from "@/components/ui/shooting-stars";

export default function CosmicHero() {
  return (
    <div className="relative h-screen w-full bg-black overflow-hidden">
      {/* Your content */}
      <div className="relative z-10 flex items-center justify-center h-full">
        <div className="text-center">
          <h1 className="text-6xl font-bold text-white mb-4">
            Explore the Universe
          </h1>
          <p className="text-xl text-gray-300">
            Journey through infinite cosmic possibilities
          </p>
        </div>
      </div>
      
      {/* Shooting stars effect */}
      <ShootingStars
        starColor="#9E00FF"
        trailColor="#2EB9DF"
        minSpeed={15}
        maxSpeed={35}
        minDelay={1200}
        maxDelay={4200}
      />
    </div>
  );
}

Why most space effects look artificial

Most developers use CSS animations with linear movement—stars that travel in perfect straight lines at constant speeds. Others try particle libraries with thousands of identical white dots that look like snow, not stars. Some use canvas with complex math but forget about depth perception.

This React component uses SVG with realistic physics simulation. Stars appear from random screen edges with diagonal trajectories that mimic real meteor behavior. Each star grows larger as it travels, creating natural depth perception like objects moving toward you. requestAnimationFrame ensures smooth 60fps animation. Randomized timing between appearances creates organic meteor shower patterns.

Features

Realistic depth simulation with stars growing larger as they travel toward the viewer
Multi-directional trajectories with stars appearing from random screen edges and angles
Customizable color system supporting star and trail colors for brand-matched cosmic themes
Variable speed physics with min/max ranges creating natural movement variation
Randomized timing intervals preventing predictable patterns in meteor appearances
SVG-based rendering providing crisp visuals at any resolution with efficient performance
Layerable instances supporting multiple components for complex multi-color effects
Performance optimized using requestAnimationFrame and efficient DOM manipulation
TypeScript definitions for all physics and visual customization parameters
shadcn/ui compatible with proper theming and dark/light mode adaptation

Examples

Multi-Color Effect

Layer multiple instances with different colors and speeds for complex cosmic displays:

Loading component...

'use client';import React from "react";import { ShootingStars } from "@/components/ui/shadcn-io/shooting-stars";const Example = () => {  return (    <div className="h-[40rem] w-full bg-black relative overflow-hidden rounded-lg">      {/* Background with stars */}      <div className="absolute inset-0">        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.1)_0%,rgba(0,0,0,0)_70%)]" />        <div className="stars absolute inset-0" />      </div>      {/* Content */}      <div className="relative z-10 flex flex-col items-center justify-center h-full text-center">        <h1 className="text-3xl md:text-5xl font-bold text-white mb-6">          Multi-Color Stars        </h1>        <p className="text-base md:text-lg text-gray-300 max-w-xl mx-auto px-4">          Multiple layers of shooting stars with different colors and speeds        </p>      </div>      {/* Multiple shooting star layers with different colors and speeds */}      <ShootingStars        starColor="#9E00FF"        trailColor="#2EB9DF"        minSpeed={15}        maxSpeed={35}        minDelay={1000}        maxDelay={3000}      />      <ShootingStars        starColor="#FF0099"        trailColor="#FFB800"        minSpeed={10}        maxSpeed={25}        minDelay={2000}        maxDelay={4000}      />      <ShootingStars        starColor="#00FF9E"        trailColor="#00B8FF"        minSpeed={20}        maxSpeed={40}        minDelay={1500}        maxDelay={3500}      />      <style jsx>{`        .stars {          background-image:             radial-gradient(1px 1px at 20px 30px, #eee, rgba(0,0,0,0)),            radial-gradient(1px 1px at 40px 70px, #fff, rgba(0,0,0,0)),            radial-gradient(1px 1px at 50px 160px, #ddd, rgba(0,0,0,0)),            radial-gradient(1px 1px at 90px 40px, #fff, rgba(0,0,0,0)),            radial-gradient(1px 1px at 130px 80px, #fff, rgba(0,0,0,0)),            radial-gradient(1px 1px at 160px 120px, #ddd, rgba(0,0,0,0));          background-repeat: repeat;          background-size: 200px 200px;          animation: twinkle 4s ease-in-out infinite;          opacity: 0.3;        }        @keyframes twinkle {          0% { opacity: 0.3; }          50% { opacity: 0.6; }          100% { opacity: 0.3; }        }      `}</style>    </div>  );};export default Example;

'use client';import { cn } from "@/lib/utils";import React, { useEffect, useState, useRef } from "react";interface ShootingStar {  id: number;  x: number;  y: number;  angle: number;  scale: number;  speed: number;  distance: number;}interface ShootingStarsProps {  minSpeed?: number;  maxSpeed?: number;  minDelay?: number;  maxDelay?: number;  starColor?: string;  trailColor?: string;  starWidth?: number;  starHeight?: number;  className?: string;}const getRandomStartPoint = () => {  const side = Math.floor(Math.random() * 4);  const offset = Math.random() * window.innerWidth;  switch (side) {    case 0:      return { x: offset, y: 0, angle: 45 };    case 1:      return { x: window.innerWidth, y: offset, angle: 135 };    case 2:      return { x: offset, y: window.innerHeight, angle: 225 };    case 3:      return { x: 0, y: offset, angle: 315 };    default:      return { x: 0, y: 0, angle: 45 };  }};export const ShootingStars: React.FC<ShootingStarsProps> = ({  minSpeed = 10,  maxSpeed = 30,  minDelay = 1200,  maxDelay = 4200,  starColor = "#9E00FF",  trailColor = "#2EB9DF",  starWidth = 10,  starHeight = 1,  className,}) => {  const [star, setStar] = useState<ShootingStar | null>(null);  const svgRef = useRef<SVGSVGElement>(null);  useEffect(() => {    const createStar = () => {      const { x, y, angle } = getRandomStartPoint();      const newStar: ShootingStar = {        id: Date.now(),        x,        y,        angle,        scale: 1,        speed: Math.random() * (maxSpeed - minSpeed) + minSpeed,        distance: 0,      };      setStar(newStar);      const randomDelay = Math.random() * (maxDelay - minDelay) + minDelay;      setTimeout(createStar, randomDelay);    };    createStar();    return () => {};  }, [minSpeed, maxSpeed, minDelay, maxDelay]);  useEffect(() => {    const moveStar = () => {      if (star) {        setStar((prevStar) => {          if (!prevStar) return null;          const newX =            prevStar.x +            prevStar.speed * Math.cos((prevStar.angle * Math.PI) / 180);          const newY =            prevStar.y +            prevStar.speed * Math.sin((prevStar.angle * Math.PI) / 180);          const newDistance = prevStar.distance + prevStar.speed;          const newScale = 1 + newDistance / 100;          if (            newX < -20 ||            newX > window.innerWidth + 20 ||            newY < -20 ||            newY > window.innerHeight + 20          ) {            return null;          }          return {            ...prevStar,            x: newX,            y: newY,            distance: newDistance,            scale: newScale,          };        });      }    };    const animationFrame = requestAnimationFrame(moveStar);    return () => cancelAnimationFrame(animationFrame);  }, [star]);  return (    <svg      ref={svgRef}      className={cn("w-full h-full absolute inset-0", className)}    >      {star && (        <rect          key={star.id}          x={star.x}          y={star.y}          width={starWidth * star.scale}          height={starHeight}          fill="url(#gradient)"          transform={`rotate(${star.angle}, ${            star.x + (starWidth * star.scale) / 2          }, ${star.y + starHeight / 2})`}        />      )}      <defs>        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">          <stop offset="0%" style={{ stopColor: trailColor, stopOpacity: 0 }} />          <stop            offset="100%"            style={{ stopColor: starColor, stopOpacity: 1 }}          />        </linearGradient>      </defs>    </svg>  );};

API Reference

ShootingStars

Main component for SVG-based shooting star meteor shower effects.

Prop	Type	Default	Description
`starColor`	`string`	`"#9E00FF"`	Color of the star heads (hex, rgb, or CSS colors)
`trailColor`	`string`	`"#2EB9DF"`	Color of the trailing streaks (hex, rgb, or CSS colors)
`minSpeed`	`number`	`10`	Minimum movement speed (pixels per frame)
`maxSpeed`	`number`	`30`	Maximum movement speed (pixels per frame)
`minDelay`	`number`	`1200`	Minimum delay between meteors (milliseconds)
`maxDelay`	`number`	`4200`	Maximum delay between meteors (milliseconds)
`starWidth`	`number`	`10`	Width of the star trail stroke
`starHeight`	`number`	`1`	Height of the star trail stroke
`className`	`string`	-	Additional CSS classes for the SVG container

Physics Simulation Details

Each shooting star follows realistic meteor physics:

// Trajectory calculation
startX = random screen edge
startY = random screen edge  
endX = opposite edge + random offset
endY = opposite edge + random offset

// Depth simulation
scale: 0.1 → 1.0 (grows as it approaches)
opacity: 0.8 → 0.0 (fades as it passes)

// Speed variation
speed = random(minSpeed, maxSpeed)
delay = random(minDelay, maxDelay)

Color Customization Examples

// Classic blue-purple cosmic
starColor="#9E00FF" trailColor="#2EB9DF"

// Warm golden meteor shower
starColor="#FFD700" trailColor="#FFA500"

// Cool green aurora effect
starColor="#00FF9E" trailColor="#00B8FF"

// Red Mars atmosphere
starColor="#FF4444" trailColor="#FF8888"

Layering Multiple Effects

// Layer 3 different colored meteor showers
<ShootingStars starColor="#9E00FF" trailColor="#2EB9DF" minDelay={1000} maxDelay={3000} />
<ShootingStars starColor="#FF0099" trailColor="#FFB800" minDelay={2000} maxDelay={4000} />
<ShootingStars starColor="#00FF9E" trailColor="#00B8FF" minDelay={1500} maxDelay={3500} />

Common gotchas

Performance with multiple layers: Each ShootingStars instance creates its own animation loop. 3+ layers might impact performance on older devices. Test on target hardware.

SVG rendering limitations: Very fast speeds (50+) or very short delays (200ms) can cause visual artifacts. Stick to realistic meteor shower timing for best results.

Color format flexibility: Supports hex, rgb(), hsl(), and named colors, but hex values (#RRGGBB) provide the most consistent results across browsers.

Container overflow requirements: Stars travel outside viewport bounds for realistic trajectories. Always use overflow-hidden on the parent container.

Z-index layering conflicts: Stars render behind content by default. If your content disappears, ensure it has relative z-10 or higher positioning.

Mobile battery considerations: Continuous animations drain battery faster on mobile. Consider reducing frequency or pausing animations when the tab isn't visible.

Explore other cosmic and space-themed background components for React applications:

React Shooting Stars Background

Cosmic meteor shower effects

Installation

Usage

Why most space effects look artificial

Features

Examples

Multi-Color Effect

API Reference

ShootingStars

Physics Simulation Details

Color Customization Examples

Layering Multiple Effects

Common gotchas

You might also like

Meteors

Particles

Sparkles

Aurora

Vortex

Fireworks Background

Questions developers actually ask

On this page

React Shooting Stars Background