# Sparkles

> Canvas-based floating particle sparkle effect with configurable density and colors.

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

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `background` | `string` | `"#0d47a1"` | Background color of the canvas container |
| `particleColor` | `string` | `"#ffffff"` | Color of the particles |
| `minSize` | `number` | `1` | Minimum particle radius in pixels |
| `maxSize` | `number` | `3` | Maximum particle radius in pixels |
| `speed` | `number` | `4` | Particle speed multiplier |
| `particleDensity` | `number` | `120` | Number of particles |

## Examples

### Basic Usage

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

<div class="h-64 overflow-hidden rounded-lg border">
	<Sparkles />
</div>
```

### Custom Colors

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

<div class="h-64 overflow-hidden rounded-lg border">
	<Sparkles background="#1a0533" particleColor="#e879f9" speed={2} particleDensity={80} />
</div>
```

### Dense & Fast

More particles, faster speed.

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

<div class="h-64 overflow-hidden rounded-lg border">
	<Sparkles
		background="#0c1222"
		particleColor="#fbbf24"
		speed={8}
		particleDensity={200}
		maxSize={4}
	/>
</div>
```