Backgrounds

Meteors

Animated meteor shower effect with customizable density and timing.

Meteors creates an animated meteor shower effect with customizable density and timing.

Usage

Meteor Shower

Animated meteor shower effect

<template>
  <div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-gray-900 to-black">
    <MMeteors :count="30" />
    <div class="relative z-10 h-full flex flex-col items-center justify-center text-center p-4">
      <h3 class="text-2xl font-bold text-white mb-2">
        Meteor Shower
      </h3>
      <p class="text-dimmed">
        Animated meteor shower effect
      </p>
    </div>
  </div>
</template>

Examples

Basic Meteor Shower

Meteor Shower

Create stunning meteor effects that streak across your interface for a cosmic user experience

<template>
  <div class="relative h-96 w-full overflow-hidden rounded-xl border bg-gradient-to-br from-gray-900 to-black">
    <MMeteors />
    <div class="relative z-10 h-full flex flex-col items-center justify-center text-center p-8">
      <div class="mb-8">
        <div class="w-20 h-20 rounded-full bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center mx-auto">
          <UIcon
            name="i-lucide-sparkles"
            class="w-10 h-10 text-white"
          />
        </div>
      </div>
      <h2 class="text-4xl font-bold text-white mb-6">
        Meteor Shower
      </h2>
      <p class="text-dimmed max-w-md mb-8 text-lg">
        Create stunning meteor effects that streak across your interface for a cosmic user experience
      </p>
      <div class="flex flex-col sm:flex-row gap-4">
        <UButton
          color="primary"
          variant="solid"
          size="lg"
        >
          Launch Experience
        </UButton>
        <UButton
          color="neutral"
          variant="outline"
          size="lg"
        >
          View Demo
        </UButton>
      </div>
    </div>
  </div>
</template>

Customize

Count10

Speed1

Angle215

Props

Prop	Type	Default	Description
`count`	`number`	`10`	Number of meteors to display in the shower.
`speed`	`number`	`1`	Multiplier for the fall speed. Higher values make the meteors fall faster, `2` is twice as fast.
`angle`	`number`	`215`	Heading of the streaks in degrees, applied as a `rotate()` on each meteor. Each one then travels 500px along that rotated axis while fading out, so the default `215` sends them down and to the right.
`class`	`string`	`''`	CSS classes to apply to the container. The container fills its parent, so give the parent a height.

UI

This component's theme exposes the slots below. Override any of them per instance with the ui prop, or app-wide under ui.meteors in app.config.ts.

Prop	Type	Default	Description
`ui`	`object`	-	Per-slot classes merged over the theme defaults.

Slot	Props	Description
`root`	-	`relative h-full w-full overflow-hidden`
`meteor`	-	`meteor`

Edit this pageorReport an issue

Light Rays

A fan of soft light beams sweeping out of one corner or edge.

Noise Texture

A film-grain overlay generated by a single SVG turbulence filter.