React Meteors Background

Powered by

React

CSS Animations

CSS Gradients

Static backgrounds are earthbound. Boring. What if your interface could capture the drama of a meteor shower? The sense of movement and cosmic scale? This React component creates shooting stars that streak across your background with realistic physics and beautiful gradient trails.

Cosmic meteor showers

Watch shooting stars streak across with randomized timing and natural movement:

'use client';import React from "react";import { Meteors } from "@/components/ui/shadcn-io/meteors";const Example = () => {  return (     <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">      <Meteors number={30} />      <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">        Meteors      </span>    </div>  );};export default Example;

"use client";import { cn } from "@/lib/utils";import React, { useEffect, useState } from "react";interface MeteorsProps {  number?: number;  minDelay?: number;  maxDelay?: number;  minDuration?: number;  maxDuration?: number;  angle?: number;  className?: string;}export const Meteors = ({  number = 20,  minDelay = 0.2,  maxDelay = 1.2,  minDuration = 2,  maxDuration = 10,  angle = 215,  className,}: MeteorsProps) => {  const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(    [],  );  useEffect(() => {    const styles = [...new Array(number)].map(() => ({      "--angle": -angle + "deg",      top: "-5%",      left: `calc(0% + ${Math.floor(Math.random() * window.innerWidth)}px)`,      animationDelay: Math.random() * (maxDelay - minDelay) + minDelay + "s",      animationDuration:        Math.floor(Math.random() * (maxDuration - minDuration) + minDuration) +        "s",    }));    setMeteorStyles(styles);  }, [number, minDelay, maxDelay, minDuration, maxDuration, angle]);  return (    <>      {[...meteorStyles].map((style, idx) => (        // Meteor Head        <span          key={idx}          style={{ ...style }}          className={cn(            "pointer-events-none absolute size-0.5 rotate-[var(--angle)] animate-meteor rounded-full bg-zinc-500 shadow-[0_0_0_1px_#ffffff10]",            className,          )}        >          {/* Meteor Tail */}          <div className="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-zinc-500 to-transparent" />        </span>      ))}    </>  );};

Built for React applications with TypeScript and Next.js. Each meteor gets randomized delay and duration values for natural variation. CSS gradients create realistic trails that fade from bright white to transparent. Perfect for space themes, gaming interfaces, or any design that needs to feel dynamic and alive.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/meteors.json

npx shadcn@latest add https://www.shadcn.io/registry/meteors.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/meteors.json

bunx shadcn@latest add https://www.shadcn.io/registry/meteors.json

Usage

import { Meteors } from "@/components/ui/meteors";

export default function SpaceHero() {
  return (
    <div className="relative h-screen w-full bg-black overflow-hidden">
      <Meteors number={30} />
      <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">
            Launch into the Future
          </h1>
          <p className="text-xl text-gray-300">
            Where innovation meets the cosmos
          </p>
        </div>
      </div>
    </div>
  );
}

Why most particle animations look fake

Most developers use JavaScript libraries that animate with setInterval or requestAnimationFrame. It's choppy, performance-heavy, and looks robotic. Others use canvas particles that require complex math for trajectories. Some try CSS keyframes with identical timing—every particle moves in sync like a marching band.

This React component uses pure CSS animations with randomized delay and duration values. Each meteor gets unique timing between 0-0.6s delay and 0.5-1.1s duration, creating natural variation. CSS gradients with pseudo-elements create realistic trails without canvas overhead. The diagonal trajectory uses simple transforms, not complex trigonometry.

Features

• Randomized animation timing with unique delay and duration for each meteor
• CSS gradient trails creating realistic streak effects with smooth opacity fades
• Customizable particle density controlling visual intensity with the number prop
• Pure CSS animations providing smooth 60fps performance without JavaScript overhead
• Diagonal trajectory physics using optimized transform animations for natural movement
• Responsive container adaptation automatically adjusting to parent dimensions
• TypeScript definitions for all customization and styling parameters
• Memory efficient implementation preventing performance degradation
• shadcn/ui compatible with proper z-index layering for content overlay

Examples

Dense Meteor Field

Increase the density for more dramatic meteor shower effects:

'use client';import React from "react";import { Meteors } from "@/components/ui/shadcn-io/meteors";const Example = () => {  return (     <div className="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border">      <Meteors number={200} />      <span className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text text-center text-8xl font-semibold leading-none text-transparent dark:from-white dark:to-slate-900/10">        Meteors      </span>    </div>  );};export default Example;

"use client";import { cn } from "@/lib/utils";import React, { useEffect, useState } from "react";interface MeteorsProps {  number?: number;  minDelay?: number;  maxDelay?: number;  minDuration?: number;  maxDuration?: number;  angle?: number;  className?: string;}export const Meteors = ({  number = 20,  minDelay = 0.2,  maxDelay = 1.2,  minDuration = 2,  maxDuration = 10,  angle = 215,  className,}: MeteorsProps) => {  const [meteorStyles, setMeteorStyles] = useState<Array<React.CSSProperties>>(    [],  );  useEffect(() => {    const styles = [...new Array(number)].map(() => ({      "--angle": -angle + "deg",      top: "-5%",      left: `calc(0% + ${Math.floor(Math.random() * window.innerWidth)}px)`,      animationDelay: Math.random() * (maxDelay - minDelay) + minDelay + "s",      animationDuration:        Math.floor(Math.random() * (maxDuration - minDuration) + minDuration) +        "s",    }));    setMeteorStyles(styles);  }, [number, minDelay, maxDelay, minDuration, maxDuration, angle]);  return (    <>      {[...meteorStyles].map((style, idx) => (        // Meteor Head        <span          key={idx}          style={{ ...style }}          className={cn(            "pointer-events-none absolute size-0.5 rotate-[var(--angle)] animate-meteor rounded-full bg-zinc-500 shadow-[0_0_0_1px_#ffffff10]",            className,          )}        >          {/* Meteor Tail */}          <div className="pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-zinc-500 to-transparent" />        </span>      ))}    </>  );};

API Reference

Meteors

Main component for animated meteor shower particle effects.

Animation Physics

Each meteor uses carefully calculated CSS animations:

/* Randomized timing for natural variation */
animation-delay: 0s to 0.6s (random)
animation-duration: 0.5s to 1.1s (random)

/* Diagonal trajectory using transforms */
transform: translateX(-500px) translateY(-500px)

/* Gradient trail effect */
background: linear-gradient(90deg, #ffffff, transparent)

Meteor Density Guidelines

• Subtle (10-20): Background ambiance without distraction
• Moderate (30-50): Noticeable cosmic atmosphere
• Dense (100+): Dramatic meteor storm effect
• Extreme (200+): Intense particle field for gaming/sci-fi themes

Common gotchas

Performance with high counts: Each meteor is a DOM element with CSS animations. Numbers above 100 might impact performance on older devices. Test on target hardware.

Container overflow handling: Meteors animate outside container bounds. Always use overflow-hidden on the parent container to prevent scrollbars and layout issues.

Z-index content layering: Your content needs relative z-10 or higher to appear above meteors. Meteors use lower z-index values for background layering.

Animation timing conflicts: If you have other CSS animations, meteor timings might interfere. Consider using CSS animation-fill-mode: both for predictable states.

Dark theme visibility: Default meteors are white/gray. On light backgrounds, they might be barely visible. Customize colors using CSS variables or className overrides.

Mobile performance considerations: Touch devices handle CSS animations well, but battery drain increases with high particle counts. Consider reducing numbers on mobile.

You might also like

Explore other dynamic background components for React applications:

Questions developers actually ask