Background
Meteors
Animated meteor shower effects with customizable density and styling. Perfect for React applications requiring dynamic sky animations with Next.js integration and TypeScript support.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/meteors.jsonnpx shadcn@latest add https://www.shadcn.io/registry/meteors.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/meteors.jsonbunx shadcn@latest add https://www.shadcn.io/registry/meteors.jsonFeatures
- Customizable meteor count controlling particle density with the
numberprop parameter - Randomized animation timing featuring unique delay and duration values for natural movement patterns
- CSS gradient trails creating beautiful streak effects using pseudo-elements and Tailwind utilities
- Performance optimized using lightweight CSS animations with minimal JavaScript overhead
- Responsive positioning adapting automatically to container dimensions and viewport changes
- TypeScript support with complete interface definitions for reliable integration
- Custom styling flexibility allowing color and effect overrides through className prop
- Tailwind CSS compatibility enabling easy integration with existing design systems
Examples
Dense Meteor Field
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
Meteors
| Prop | Type | Default | Description |
|---|---|---|---|
number | number | 20 | Number of meteors to render |
className | string | - | Additional CSS classes for styling |
Implementation Notes
- Component renders specified number of meteors with randomized positioning and timing
- Each meteor uses CSS animations with unique delay (0-0.6s) and duration (0.5-1.1s) values
- Gradient trails created using CSS pseudo-elements with linear gradients and transforms
- Meteors positioned absolutely within container with diagonal trajectory animations
- Performance optimized using pure CSS animations without JavaScript calculations
- Compatible with shadcn/ui design system and responsive across all device sizes
- Colors and effects customizable through Tailwind CSS utility classes in className prop
Interactive Grid Pattern
Dynamic grid backgrounds that respond to user interaction. Perfect for React dashboards and Next.js applications where subtle animation enhances the user experience without distraction.
Noise
Animated grain texture overlays with customizable patterns. Perfect for React applications requiring film-like visual effects with Next.js integration and TypeScript support.