svelte-confetti-p5

DEMO & Examples | REPL

svelte-confetti-p5 🎊

svelte-confetti-p5 is an awesome svelte realistic fullpage confetti animation, that can be customized in creative ways like snow flakes, falling balls and more.

---

p5 what?

No CSS animations, but html Canvas created using P5.js (library for creative coding)

Thanks

• Based on Tibo's work on Codepen, modified by me to easily control options using Svelte
• We're using P5-svelte to make it work in svelte

Installation

# pnpm
pnpm i -D svelte-confetti-p5@latest

pnpm is used here just as an example, you can use your package of choice

Usage

<script>
  import { ConfettiP5 } from "svelte-confetti-p5";
</script>

<ConfettiP5 />

Customize everything

Settings

Prop	Type	Description	Default
amount	number	Amount of particles	300
colors	string[]	Colors of the confetti. Default is very colorful	["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#4CAF50", "#8BC34A", "#CDDC39", "#FFEB3B", "#FFC107", "#FF9800", "#FF5722"]
minSize	number	Minimum particle size in pixels	5
maxSize	number	Minimum particle size in pixels	15
loop	boolean	Rain forever or until all particles fall	false
spacing	number	Spacing between particles	10
power	number	The force of the confetti when it starts	10
shapes	"squares" | "circles" | "mix" | "images"	Particle shapes. (mix = circles&squares.images = only images)	"mix"
images	string[]	Image URLS / Base64 Images	[]
wind	number	Wind from sides	6
weight	number	Weight of the particle (this determines the falling speed)	100
rotate	number	Rotate particles from side to side because of wind	2
flip	number	Flip amount to create 3d effect for each particle	20
w	number	Canvas width	window width
h	number	Canvas height	window height
position	"fixed" | "absolute"	CSS position of the canvas	"fixed"
zIndex	number	z-index of the canvas	999
destoryOnFinish	boolean	Destroys the canvas when all particles fall (Never gets destroyed when loop i set true, as expected)	true
frameRate	number	Refresh rate. Changing this will affect the overall speed of the animation. Recommended to keep as default	60

Dispatchers

Dispatcher	Description	event returns
on:start	Fires when the confetti animation starts	-
on:eachfall	Fires when a single confetti particle has falled	on:eachfall=(e => e.detail) returns the total amount of particles falled so far
on:done	Fires when all confetti particles fall	-
on:destroy	Fires when the canvas is destroyed, automaticlly happens when all particles finished falling	-

Features

• Auto sets the canvas width & height of the screen, even on screen resize.

Examples

Nice and slow

<ConfettiP5
  on:eachfall={onEachFall}
  on:start={onStart}
  on:done={onDone}
  on:destory={onDestroy}
  loop
  colors={["#fbfefd", "#00186a", "#003afb", "#7aa8f7"]}
  amount={120}
  minSize={5}
  maxSize={15}
  spacing={15}
  flip={3}
  wind={0}
  weight={100}
  rotate={3}
  power={0}
/>

Snow flakes:

<ConfettiP5
  on:eachfall={onEachFall}
  on:start={onStart}
  on:done={onDone}
  on:destory={onDestroy}
  colors={["#e7edf3", "#e4f3ff", "#b9e1ff", "#a6d9ff"]}
  shapes="circles"
  minSize={0}
  maxSize={14}
  spacing={5}
  amount={50}
  flip={0}
  wind={0}
  power={2}
  weight={50}
/>

More examples here

REPL Playground here

Used by

License

MIT license

---

Publishing

(Dev note): To publish this library to npm:

pnpm publish