Meteor Shower BackgroundFree

Subtle canvas meteors drifting across a dark sky — a quiet animated background for heroes and landing sections.

Add to your project

Checking access...

Works with your AI tools

Claude*

Codex*

Lovable

Base44

Figma Make

Replit*

Cursor*

* Compatible with most projects that use the default React/Next.js framework.

Built With

React

Tailwind CSSCanvas API

Props

Prop	Type	Description
`children`	`ReactNode`	Content layered above the canvas (headline, CTA, etc.)
`className`	`string`	Styles for the content wrapper
`containerClassName`	`string`	Styles for the outer shell (size, layout)
`backgroundFill`	`string`	Solid sky color behind the meteors (hex)
`meteorColor`	`string`	Streak color (hex)
`meteorCount`	`number`	How many meteors run at once
`speed`	`'slow' \| 'fast'`	Meteor pace — slow is the subtler default

More Backgrounds Components

Wavy Tide Background

Animated canvas waves that fill the container and drift with the pointer — a softer, SaaS-ready take on classic wavy backgrounds.

Neon Flow Background

Staggered neon trails that sweep across a dark field — colors are prop-driven for easy theming.

Desert Dune Background

Soft layered waves in parallax drift — cool indigo tones by default, colors via props.

Aurora Background

Northern lights as folding canvas curtains: irregular ribbons and faint rays drifting across a night sky.

Background Grid

A static 3D background grid — a wireframe perspective grid that covers the full container, warped and bowed toward a vanishing point for depth. No animation, no layout shift.