Shooting Stars

Animated meteor shower effects with customizable colors and trajectories. Perfect for React applications requiring dynamic sky animations with Next.js integration and TypeScript support.

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>  );};

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

Features

Customizable star colors with hex color values for personalized visual themes
Variable speed control configuring minimum and maximum ranges for natural movement patterns
Adjustable timing intervals controlling delay between star appearances for different effects
Multi-directional trajectories with stars appearing from random screen edges
Scalable depth animation where stars grow larger as they travel for realistic perception
Performance optimized using efficient SVG rendering with requestAnimationFrame
Layerable effects supporting multiple instances for complex multi-color combinations
TypeScript support with complete interface definitions for reliable integration

Examples

Multi-Color Effect

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>  );};

Use Cases

This free open source React component works well for:

Hero sections - Dynamic sky effects for space-themed landing pages built with Next.js
Gaming interfaces - Atmospheric backgrounds for space games and sci-fi applications using TypeScript
Portfolio headers - Eye-catching animations showcasing creative capabilities
Event websites - Dramatic backgrounds for conferences and product launches using shadcn/ui design
Loading screens - Engaging animations during content loading and data processing
Creative showcases - Artistic backgrounds for design portfolios using Tailwind CSS animations

API Reference

ShootingStars

Prop	Type	Default	Description
`starColor`	`string`	`"#9E00FF"`	Color of the shooting stars (hex format)
`trailColor`	`string`	`"#2EB9DF"`	Color of the star trails (hex format)
`minSpeed`	`number`	`10`	Minimum speed of star movement
`maxSpeed`	`number`	`30`	Maximum speed of star movement
`minDelay`	`number`	`1200`	Minimum delay between star appearances (ms)
`maxDelay`	`number`	`4200`	Maximum delay between star appearances (ms)
`starWidth`	`number`	`10`	Width of the star trail
`starHeight`	`number`	`1`	Height of the star trail
`className`	`string`	`undefined`	Additional CSS classes for the container

Implementation Notes

Component uses SVG-based rendering with requestAnimationFrame for smooth animations
Stars appear from random screen edges with realistic diagonal trajectories
Each star grows in size as it travels, creating natural depth perception effects
Multiple instances can be layered with different colors and timing for complex effects
Performance optimized using efficient DOM manipulation and memory management
Compatible with shadcn/ui design system and responsive across all device sizes
Animation timing randomized between minDelay and maxDelay for natural appearance
Star colors customizable via hex values to match any design system or brand palette

Reactshooting-stars

Reactshooting-stars

On this page