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
Preview
<script lang="ts">
import { SparklesText } from 'fancy-ui-svelte';
</script>
<SparklesText text="Sparkles" sparklesCount={8} />Installation
Usage
<script lang="ts">
import { SparklesText } from 'fancy-ui-svelte';
</script>
<SparklesText />Examples
Basic Usage
<script lang="ts">
import { SparklesText } from "$lib/fancy-ui/sparkles-text";
</script>
<SparklesText text="Sparkles" />Custom Colors
Change sparkle colors.
<script lang="ts">
import { SparklesText } from "$lib/fancy-ui/sparkles-text";
</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.
<script lang="ts">
import { SparklesText } from "$lib/fancy-ui/sparkles-text";
</script>
<SparklesText text="Party Time" sparklesCount={20} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text * | 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 |
Links
Related components
BlurReveal
Scroll-triggered reveal that unblurs and slides each direct child into place as the container enters the viewport, staggering up to 10 children via CSS nth-child delays and respecting reduced motion
BoxReveal
Reveal animation where a solid color box slides left to right across content on viewport entry, unveiling it as it fades up into place underneath, triggered once via IntersectionObserver
ColourfulText
Per-character text animation where each glyph transitions to a new color from a shuffled palette, staggered across characters and reshuffling automatically every 5 seconds using pure CSS transitions