Skip to main content
A dynamic meteor shower animation effect with customizable trajectories, speeds, and quantities.

​
Installation

    ​
    Usage

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <Meteors number={30} />
    </div>
  )
}

    ​
    Custom Angle

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

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <Meteors number={20} angle={180} />
    </div>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    numbernumber20Number of meteors to render
    minDelaynumber0.2Minimum delay in seconds before meteor animation starts
    maxDelaynumber1.2Maximum delay in seconds before meteor animation starts
    minDurationnumber2Minimum duration in seconds for meteor animation
    maxDurationnumber10Maximum duration in seconds for meteor animation
    anglenumber215Angle in degrees for meteor trajectory
    classNamestring-Additional CSS classes for meteor elements
    Each meteor is randomly positioned and has randomized animation delays and durations within the specified ranges.
    Adjust the angle prop to change the direction of the meteor shower. Default value of 215 creates a diagonal effect from top-right to bottom-left.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us