# SparklesText

> Text overlaid with small SVG star sparkles that scale, rotate, and fade in a continuous loop, each one regenerating at a random position once its lifespan expires, cycling between two configurable colors.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Text & Typography
- Tags: text, sparkles, animation, stars, decoration, typography
- Docs: https://fancy-ui.rama.app/docs/components/sparkles-text
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/sparkles-text

## Import

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` (required) | `string` | — | Text to display |
| `sparklesCount` | `number` | `10` | Number of sparkle stars |
| `colors` | `{ first: string; second: string }` | `{ first: "#9E7AFF", second: "#FE8BBB" }` | Two colors for sparkle stars |

## Examples

### Basic Usage

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

<SparklesText text="Sparkles" />
```

### Custom Colors

Change sparkle colors.

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

<div class="space-y-8">
	<div class="flex items-center justify-center">
		<SparklesText text="Golden" colors={{ first: "#FFD700", second: "#FFA500" }} />
	</div>
	<div class="flex items-center justify-center">
		<SparklesText
			text="Neon"
			colors={{ first: "#00FF88", second: "#00BBFF" }}
			class="text-foreground"
		/>
	</div>
</div>
```

### Lots of Sparkles

Increase sparkle count.

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

<SparklesText text="Party Time" sparklesCount={20} />
```