🎉 Confettis v0.4.1

Confettis is a small lib to add confettis to your website. Yep, confettis! 🎉

• 😊 SSR Support
• 🎉 Common confettis
• 👽 Emoji coffetis
• ⭐️ Star confettis
• 🟡 Circle confettis (snow?)
• ✨ Confettis with different sizes
• 🗿 Static or moving confettis
• 😄 Super easy to use!

Demo

confettis.sizo.dev

Resources

• Changelog

Installation

Browser:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/confettis.min.js"></script>

Deno:

import * as confetti from 'https://esm.sh/[email protected]'

Node:

$ npm i confettis

import * as confetti from 'confettis'

Usage

Basic usage

confetti.create()

Advanced usage

confetti.create({
    x: 0.5,
    y: 0.7,
    count: 500,
    ticks: -1,
    gravity: [ 0.7, 1.2 ],
    speed: [ 35, 45 ],
    scale: [ 0.7, 0.8 ],
    decay: 0.91,
    shapes: [ 'square', 'ellipse' ]
})

This is just an example, but you can do anything. I recommend you look at the examples I have put on the web! See more examples here!

Parameters

When creating a new confetti you can change the parameters to change the position, particle count, angle, gravity, etc.

| Option | Type | Default | Description | | :---: | :---: | :---: | --- | | canvas | string | confettis | Id of canvas where you are going to show the confetti. If you do not put anything, a canvas will be created with id "confettis". | | count | number | 100 | Number of confetti to launch. Remember that the more particles the web performance will be worse. The recommended is between 1 and 300 particles per second. | | x | number | 0.5 | The X position is horizontal, being 0 the left edge and 1 the right edge. | | y | number | 0.7 | The Y position is vertical, being 0 the upper edge and 1 the lower edge. | | z | number | MAX_SAFE_INTEGER | The Z position on the page (z-index). Determine whether it is shown above or below other web elements. The higher the number, it will be shown above all (recommended). Default is Number.MAX_SAFE_INTEGER (2147483647) to overcome the height of most popular UI libs. | | gravity | number or [number] | 1 | Gravity determine how quickly the confetti will fall. You can play with this parameter to make it fall faster or slower, and you can even make the confetti rise up. | | ticks | number or [number] | 300 | Time that confetti will take to disappear (opacity). The higher the number, it will take longer to disappear. Put it in -1 to deactivate it and make it always visible. | | speed | number or [number] | 45 | Speed with which the confetti will begin to move. | | scale | number or [number] | 0.8 | Scale factor for each confetti particle. Use decimals to make the confetti smaller. Example: [ 0.8, 1, 1.3 ] | | overflow | object | | Prarameter to allow confetti particle exceed the canvas without being deleted | | overflow.left | boolean | false | When set to true allows the left overflow | | overflow.right | boolean | false | When set to true allows the right overflow | | overflow.top | boolean | true | When set to true allows the top overflow | | overflow.bottom | boolean | false | When set to true allows the bottom overflow | | decay | number | 0.92 | Determine the speed with which the confetti will lose speed. Keep this number between 0 and 1 so that the confetti does not go to the speed of light. | | drift | number | 0 | Determine the side where the confetti will go. 0 indicates that it will fall down. A negative number indicates that it will go to the left, and a positive number indicates that it will go to the right. | | angle | number | 90 | The angle at which the confetti is going to be released. In degrees (0-360) | | spread | number | 70 | How far the confetti can come. In degrees (0-360) | | quiet | boolean | false | It allows to create static confetti. Perfect if you want square or ellipse confetti without moving when falling. | | colors | [string] | | Array with strings of the colors you want to show the confetti. The colors must be in Hex format (#ffffff). | | shapes | [string] | | An array of shapes for the confetti. | | emojis | [string] | | An array of emojis for the confetti. |

Accepted shapes

| Shape | Description | | :---: | --- | | square | Create confetti in the form of square. | | triangle | Create confetti in the form of triangle. | | rectangle | Create confetti in the form of rectangle. | | ellipse | Create confetti in the form of ellipse. | | circle | Create confetti in the form of a circle. | | star | Create confetti in the form of star with five spikes. | | emoji | Create confetti with emojis. |

Stop confetti

Stops all animations and clear all confettis.

confetti.stop()

Build

npm install
npm run build

Contributors

All issue reports, feature requests, pull requests and github stars are welcomed and much appreciated.

Thanks

Special thanks to catdad for canvas-confetti. I have created this project as inspiration to obtain a cleaner and legible code in typescript, and add extra functions.