# StarsBackground

> Three-layer starfield background that scrolls continuously while parallax-shifting in response to cursor movement via spring physics, with stars rendered as box-shadow dots across near, mid, and far depth layers.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `factor` | `number` | `0.05` | Parallax factor for mouse movement |
| `speed` | `number` | `50` | Base animation speed in seconds |
| `stiffness` | `number` | `50` | Spring stiffness for parallax |
| `damping` | `number` | `20` | Spring damping for parallax |
| `starColor` | `string` | `"#fff"` | Color of the stars |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Child content to render over the stars |

## Examples

### Basic Usage

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

<div class="overflow-hidden rounded-lg border">
	<StarsBackground class="h-[400px]">
		<div class="relative z-10 flex h-full items-center justify-center">
			<h2 class="text-4xl font-bold text-white">Move your mouse</h2>
		</div>
	</StarsBackground>
</div>
```

### Custom Color

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

<div class="overflow-hidden rounded-lg border">
	<StarsBackground class="h-[300px]" starColor="#60a5fa">
		<div class="relative z-10 flex h-full items-center justify-center">
			<p class="text-xl text-blue-300">Blue stars</p>
		</div>
	</StarsBackground>
</div>
```

### Animation Speed

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

<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
	<div class="overflow-hidden rounded-lg border">
		<StarsBackground class="h-[200px]" speed={20}>
			<div class="relative z-10 flex h-full items-center justify-center">
				<p class="text-sm text-white/80">speed=20 (fast)</p>
			</div>
		</StarsBackground>
	</div>
	<div class="overflow-hidden rounded-lg border">
		<StarsBackground class="h-[200px]" speed={100}>
			<div class="relative z-10 flex h-full items-center justify-center">
				<p class="text-sm text-white/80">speed=100 (slow)</p>
			</div>
		</StarsBackground>
	</div>
</div>
```