Backgrounds Fancy Stable
Sparkles
Canvas-based floating particle sparkle effect with configurable density and colors
Preview
svelte
<script lang="ts">
import { Sparkles } from 'fancy-ui-svelte';
</script>
<Sparkles background="transparent" particleColor="#ffffff" particleDensity={60} />Installation
pnpm add fancy-ui-svelte
import { Sparkles } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Sparkles } from 'fancy-ui-svelte';
</script>
<Sparkles />Examples
Basic Usage
svelte
<script lang="ts">
import { Sparkles } from "$lib/fancy-ui/sparkles";
</script>
<div class="h-64 overflow-hidden rounded-lg border">
<Sparkles />
</div>Custom Colors
svelte
<script lang="ts">
import { Sparkles } from "$lib/fancy-ui/sparkles";
</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 "$lib/fancy-ui/sparkles";
</script>
<div class="h-64 overflow-hidden rounded-lg border">
<Sparkles
background="#0c1222"
particleColor="#fbbf24"
speed={8}
particleDensity={200}
maxSize={4}
/>
</div>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 |
Links
Related components
Fa
FallingStarsBg
Canvas-based 3D starfield with perspective projection, motion trails, and glow
Backgrounds Stable
Fl
FlickeringGrid
Canvas grid of squares that flicker in and out of opacity at random each frame, pausing automatically via IntersectionObserver when scrolled off-screen and resizing to fit its container via ResizeObserver
Backgrounds Stable
Ma
MatrixRain
Canvas-based falling glyph rain with configurable color, speed, and density
Backgrounds Stable