Effects Fancy Stable
Meteors
Meteor shower in depth: seeded meteors with glowing heads and tapering tails fall diagonally in parallax (near ones larger, brighter and faster), fading in and burning out, a few flaring before they go
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>Options
Colour, direction, speed and seed.
svelte
<script lang="ts">
import { Meteors } from "$lib/fancy-ui/meteors";
</script>
<div class="grid w-full gap-4 sm:grid-cols-3">
<div class="relative h-48 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
<Meteors count={18} color="#fcd34d" />
<p class="relative z-10 p-4 text-xs text-zinc-400">color="#fcd34d"</p>
</div>
<div class="relative h-48 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
<Meteors count={18} angle={235} color="#a5b4fc" />
<p class="relative z-10 p-4 text-xs text-zinc-400">angle={235}</p>
</div>
<div class="relative h-48 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
<Meteors count={30} speed={2} seed={7} />
<p class="relative z-10 p-4 text-xs text-zinc-400">speed={2} seed={7}</p>
</div>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 20 | Number of meteors to render |
angle | number | 215 | Direction of travel in degrees (215 = down and to the right) |
speed | number | 1 | Speed multiplier |
color | string | - | Head and tail colour; defaults to pale blue-white on dark pages and slate on light ones |
seed | number | 1 | Seed for the field; same seed, same shower on server and client |
class | string | - | Additional CSS classes on each meteor |
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