Svelte Confetti P5

elron
1

Need a Svelte website built?

Hire a professional Svelte developer today.

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}
/>