# FallingStarsBg

> Canvas-based 3D starfield with perspective projection, motion trails, and glow.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Backgrounds
- Tags: background, stars, canvas, animation, 3d, space
- Docs: https://fancy-ui.rama.app/docs/components/bg-falling-stars
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/bg-falling-stars

## Import

```svelte
<script lang="ts">
  import { FallingStarsBg } 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 { FallingStarsBg } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `string` | `"#FFF"` | Star color as hex string |
| `count` | `number` | `200` | Number of stars |

## Examples

### Basic Usage

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

<div class="relative h-[400px] overflow-hidden rounded-lg border bg-black">
	<FallingStarsBg />
	<div class="relative z-10 flex h-full items-center justify-center">
		<h2 class="text-4xl font-bold text-white">Falling Stars</h2>
	</div>
</div>
```

### Custom Color

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

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
	<div class="relative h-[250px] overflow-hidden rounded-lg border bg-black">
		<FallingStarsBg color="#60a5fa" />
		<div class="relative z-10 flex h-full items-center justify-center">
			<p class="text-blue-300">color="#60a5fa"</p>
		</div>
	</div>
	<div class="relative h-[250px] overflow-hidden rounded-lg border bg-black">
		<FallingStarsBg color="#f472b6" />
		<div class="relative z-10 flex h-full items-center justify-center">
			<p class="text-pink-300">color="#f472b6"</p>
		</div>
	</div>
</div>
```

### Star Count

Control number of stars.

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

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
	<div class="relative h-[250px] overflow-hidden rounded-lg border bg-black">
		<FallingStarsBg count={50} />
		<div class="relative z-10 flex h-full items-center justify-center">
			<p class="text-sm text-white/80">count=50 (sparse)</p>
		</div>
	</div>
	<div class="relative h-[250px] overflow-hidden rounded-lg border bg-black">
		<FallingStarsBg count={500} />
		<div class="relative z-10 flex h-full items-center justify-center">
			<p class="text-sm text-white/80">count=500 (dense)</p>
		</div>
	</div>
</div>
```