Meteor Effect

Animated diagonal meteor beams with glow heads and trailing streaks, designed as a reusable background layer for cards and hero sections.

Background Effectsgradienthoverlayoutmeteorsbackgroundheroglowmotion

Reusable motion background for heroes, cards, and pricing sections.

Playground

Adjust the important props for this component and grab JSX that matches your choices.

number

Base number of meteor beams before intensity scaling.

meteorClassName

Class names applied to each meteor beam element.

minDelay

Minimum start delay between meteor loops (seconds).

maxDelay

Maximum start delay between meteor loops (seconds).

minDuration

Minimum meteor travel duration (seconds).

maxDuration

Maximum meteor travel duration (seconds).

angle

Travel direction angle in degrees.

glow

Adds glow bloom around meteor heads.

Generated JSX

Copy this into your page.

<Meteors
  number={18}
  meteorClassName=""
  minDelay={0.12}
  maxDelay={2.4}
  minDuration={3.2}
  maxDuration={7.2}
  angle={215}
  glow={true}
/>

Animation effects

gradienthoverlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.