# 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.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: animation, meteors, particles, decoration, space, shooting stars
- Docs: https://fancy-ui.rama.app/docs/components/meteors
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/meteors

## Import

```svelte
<script lang="ts">
  import { Meteors } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Meteors } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## 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 |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { Meteors } from "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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 "fancy-ui-svelte";
</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=&#123;235&#125;</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=&#123;2&#125; seed=&#123;7&#125;</p>
	</div>
</div>
```