Confetti
Confetti celebration effect powered by canvas-confetti with button trigger support
Preview
<script lang="ts">
import { Confetti } from 'fancy-ui-svelte';
</script>
<Confetti />Installation
Usage
<script lang="ts">
import { Confetti } from 'fancy-ui-svelte';
</script>
<Confetti />Examples
Basic Usage
<script lang="ts">
import { ConfettiButton } from "$lib/fancy-ui/confetti";
</script>
<ConfettiButton sound>
<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.
<script lang="ts">
import { ConfettiButton } from "$lib/fancy-ui/confetti";
</script>
<div class="flex items-center gap-4">
<ConfettiButton sound 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 sound 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 |
ConfettiButton.sound | boolean | false | Plays the press cue when the confetti button fires a burst, once the user has enabled sound |
Slots
| Slot | Description |
|---|---|
children | ConfettiButton or other trigger elements |
Links
Related components
AnimatedBeam
Animated SVG beams connecting elements with smooth gradients
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
DatamoshTransition
Page-transition overlay that looks like a corrupted video decode: a fixed grid of columns, narrow on the left and wide on the right, fills with flat blocks of saturated colour that fall, snap open through the middle of the frame and squeeze shut again; cover() drops the columns over the page right to left and reveal() lets them fall away, both as promises for any router's navigation hook