Effects Fancy Stable
Meteors
Animated meteor shower effect with randomized positions and delays
Preview
svelte
<script lang="ts">
import { Meteors } from 'fancy-ui-svelte';
</script>
<Meteors count={15} />Installation
pnpm add fancy-ui-svelte
import { Meteors } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Meteors } from 'fancy-ui-svelte';
</script>
<Meteors />Examples
Basic Usage
svelte
<script lang="ts">
import { Meteors } from "$lib/fancy-ui/meteors";
</script>
<div
class="bg-background relative mx-auto flex h-64 w-full max-w-md items-center justify-center overflow-hidden rounded-xl border p-6"
>
<p class="text-foreground z-10 text-center">Default (20 meteors)</p>
<Meteors />
</div>Custom Count
Control number of meteors.
svelte
<script lang="ts">
import { Meteors } from "$lib/fancy-ui/meteors";
</script>
<div class="flex flex-wrap justify-center gap-6">
<div
class="bg-background relative flex h-48 w-56 items-center justify-center overflow-hidden rounded-xl border p-4"
>
<p class="text-foreground z-10 text-center text-xs">5 meteors</p>
<Meteors count={5} />
</div>
<div
class="bg-background relative flex h-48 w-56 items-center justify-center overflow-hidden rounded-xl border p-4"
>
<p class="text-foreground z-10 text-center text-xs">40 meteors</p>
<Meteors count={40} />
</div>
</div>Card Example
svelte
<script lang="ts">
import { Meteors } from "$lib/fancy-ui/meteors";
</script>
<div
class="relative mx-auto w-full max-w-sm overflow-hidden rounded-2xl border border-zinc-800 bg-zinc-950 p-8 shadow-xl"
>
<Meteors count={15} />
<div class="relative z-10">
<h3 class="mb-2 text-lg font-bold text-white">Shooting Stars</h3>
<p class="text-sm text-zinc-400">
A beautiful meteor shower effect for dark-themed cards and hero sections.
</p>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 20 | Number of meteors to render |
Links
Related components
An
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
Effects Stable
Bo
BorderBeam
Gradient beam that races around a container's border using a CSS offset-path animation, masked so only the border ring is painted, with configurable size, speed, anchor position, and gradient colors
Effects Stable
Co
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Effects Stable