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!
Browser:
<script src="https://cdn.jsdelivr.net/npm/confettis@0.3.4/lib/confettis.min.js"></script>
Deno:
import * as confetti from 'https://esm.sh/confettis@0.3.4'
Node:
$ npm i confettis
import * as confetti from 'confettis'
confetti.create()
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!
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 common square confetti. |
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. |
All issue reports, feature requests, pull requests and github stars are welcomed and much appreciated.
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.