Meteor

A component that displays a meteor shower animation with customizable meteor count and styling.

API

Prop NameTypeDefaultDescription
countnumber20The number of meteors to display in the animation.
classstring""Additional CSS classes to apply to the meteors for customization.

Component Code

You can copy and paste the following code to create this component:

Meteors.vue

Features

  • Meteor Shower Animation: The component renders an animated meteor shower effect, adding a dynamic visual element to your application.
  • Customizable Meteor Count: Adjust the number of meteors by setting the count prop to control the density of the meteor shower.
  • Randomized Animations: Each meteor has randomized position, delay, and duration, creating a natural and varied animation.
  • Styling Flexibility: Pass additional CSS classes through the class prop to customize the appearance of the meteors.
  • Responsive Design: The component adapts to different screen sizes and uses Vue’s reactivity for smooth animations.

Credits

Marquee
A customizable scrolling component that loops its content horizontally or vertically, with configurable direction, hover pause, and repeat options.
Orbit
A component that animates content in a circular orbit, with customizable duration, delay, and radius. It also offers an optional orbit path display.