---
title: "Shooting Stars"
description: "Animated shooting stars effect with customizable colors, speed, and timing."
canonical_url: "https://nuxt-motion-block.pages.dev/components/backgrounds/shooting-stars"
---
# Shooting Stars

> Animated shooting stars effect with customizable colors, speed, and timing.

The ShootingStars component creates an animated shooting stars effect with customizable colors, speed, and timing. It's perfect for adding dynamic background animations to your UI.

## Usage

<code-preview label="Preview">
<div className="flex,justify-center,w-full,h-full">
<component-example name="shooting-stars-example">



</component-example>
</div>

<template v-slot:code="">

```vue
<template>
  <div class="relative h-64 w-full overflow-hidden rounded-lg border bg-gradient-to-br from-gray-900 to-black">
    <MShootingStars />
    <MStarsBackground />
    <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">
        Shooting Stars
      </h3>
      <p class="text-dimmed">
        Animated shooting stars with trails
      </p>
    </div>
  </div>
</template>
```

</template>
</code-preview>

## Examples

### Basic Shooting Stars

<code-preview label="Preview">
<div className="flex,justify-center,w-full,h-full">
<component-example name="shooting-stars-basic">



</component-example>
</div>

<template v-slot:code="">

```vue
<template>
  <div class="relative h-96 w-full overflow-hidden rounded-xl border bg-gradient-to-br from-gray-900 to-black">
    <MShootingStars />
    <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-cyan-400 flex items-center justify-center mx-auto">
          <UIcon
            name="i-lucide-star"
            class="w-10 h-10 text-white"
          />
        </div>
      </div>
      <h2 class="text-4xl font-bold text-white mb-6">
        Shooting Stars
      </h2>
      <p class="text-dimmed max-w-md mb-8 text-lg">
        Add magical shooting star effects to your interface for a whimsical and engaging user experience
      </p>
      <div class="flex flex-col sm:flex-row gap-4">
        <UButton
          color="primary"
          variant="solid"
          size="lg"
        >
          Create Magic
        </UButton>
        <UButton
          color="neutral"
          variant="outline"
          size="lg"
        >
          View Demo
        </UButton>
      </div>
    </div>
  </div>
</template>
```

</template>
</code-preview>

### Customize

<code-preview label="Preview">
<div className="w-full">
<component-example name="shooting-stars-custom">



</component-example>
</div>

<template v-slot:code="">
<playground-code name="ShootingStars">



</playground-code>
</template>
</code-preview>

## Props

<component-props>
<component-prop name="minSpeed" type="number" default="10">

Minimum speed of the shooting stars.

</component-prop>

<component-prop name="maxSpeed" type="number" default="30">

Maximum speed of the shooting stars.

</component-prop>

<component-prop name="minDelay" type="number" default="1200">

Minimum delay between shooting stars in milliseconds.

</component-prop>

<component-prop name="maxDelay" type="number" default="4200">

Maximum delay between shooting stars in milliseconds.

</component-prop>

<component-prop name="starColor" type="string" default="'#9E00FF'">

Color of the shooting star.

</component-prop>

<component-prop name="trailColor" type="string" default="'#2EB9DF'">

Color of the shooting star trail.

</component-prop>

<component-prop name="starWidth" type="number" default="10">

Width of the shooting star.

</component-prop>

<component-prop name="starHeight" type="number" default="1">

Height of the shooting star.

</component-prop>

<component-prop name="class" type="string" default="''">

CSS classes to apply to the SVG container.

</component-prop>
</component-props>

## UI

This component's theme exposes the slots below. Override any of them per instance with the [`ui` prop](https://nuxt-motion-block.pages.dev/getting-started/theming), or app-wide under `ui.shootingStars` in `app.config.ts`.

<component-props>
<component-prop name="ui" type="object">

Per-slot classes merged over the theme defaults.

</component-prop>
</component-props>

<component-slots>
<component-slot-row name="root">

`w-full h-full absolute inset-0`

</component-slot-row>
</component-slots>


## Sitemap

See the full [sitemap](https://nuxt-motion-block.pages.dev/sitemap.md) for all pages.