Effects Fancy Stable
Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Preview
svelte
<script lang="ts">
import { Confetti } from 'fancy-ui-svelte';
</script>
<Confetti />Installation
pnpm add fancy-ui-svelte
import { Confetti } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { Confetti } from 'fancy-ui-svelte';
</script>
<Confetti />Examples
Basic Usage
svelte
<script lang="ts">
import { ConfettiButton } from "$lib/fancy-ui/confetti";
</script>
<ConfettiButton>
<span
class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center gap-2 rounded-lg px-6 py-3 font-medium transition-colors"
>
Click for confetti!
</span>
</ConfettiButton>Custom Options
Customize confetti behavior.
svelte
<script lang="ts">
import { ConfettiButton } from "$lib/fancy-ui/confetti";
</script>
<div class="flex items-center gap-4">
<ConfettiButton options={{ particleCount: 200, spread: 100 }}>
<span
class="inline-flex items-center gap-2 rounded-lg bg-emerald-600 px-6 py-3 font-medium text-white transition-colors hover:bg-emerald-700"
>
Big burst
</span>
</ConfettiButton>
<ConfettiButton options={{ particleCount: 50, colors: ["#ff0000", "#00ff00", "#0000ff"] }}>
<span
class="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-6 py-3 font-medium text-white transition-colors hover:bg-violet-700"
>
RGB confetti
</span>
</ConfettiButton>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | ConfettiOptions | {} | canvas-confetti options passed to each fire() call |
globalOptions | ConfettiGlobalOptions | {} | Global canvas-confetti initialization options |
manualStart | boolean | false | Prevent auto-firing on mount; call fire() manually |
Slots
| Slot | Description |
|---|---|
children | ConfettiButton or other trigger elements |
Links
Related components
An
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
Effects Stable
Bo
BorderBeam
Gradient beam that races around a container's border using a CSS offset-path animation, masked so only the border ring is painted, with configurable size, speed, anchor position, and gradient colors
Effects Stable
Fi
FireworksHdr
GPU fireworks background with a deterministic, DOM-free physics core (rockets, peony/willow/ring/glyph shells, sparks, embers, smoke) rendered by a WebGPU engine into a wide-gamut, extended-tone-mapping canvas so bursts and comet trails burn brighter than SDR white on HDR displays, degrading silently through a WebGL2 fallback and a soft-knee SDR path everywhere else
Effects Stable