Confettis

Latest Version v0.3.7
Confettis 🎉 is a new library to create confettis on your website. Enjoy a symphin of possibilities from common confettis to fireworks, snow, effects, emojis, and much more.
GitHub NPM
SSR compatibility Deno compatibility Fully Typed Emoji support
Click to test
More examples below!

Usage

Deno

import * as confetti from 'https://esm.sh/confettis@0.3.7'

Node.js

npm install confettis --save
import * as confetti from 'confettis'

Browser

CDN

<script src="https://unpkg.com/confettis@0.3.7/lib/confettis.min.js"></script>

Local

<script src="[path-to-confettis]/lib/confettis.min.js"></script>

Examples

DefaultDefault confetti with no properties.

confetti.create()

AdvancedAdvanced confetti with some properties.

const x = 0.5
const y = 0.7

// Confetti
confetti.create({
    x: x,
    y: y,
    count: 100,
    gravity: 1,
    ticks: -1,
    scale: [ 0.5, 0.7, 0.8 ],
    speed: 32,
    decay: 0.93,
    shapes: [ 'square', 'ellipse' ]
})

// Particles
confetti.create({
    x: x,
    y: y,
    count: 42,
    gravity: 1.5,
    ticks: -1,
    scale: 0.1,
    speed: 42,
    decay: 0.93,
    shapes: [ 'circle' ]
})

RandomAdvanced confetti with some random properties.

const x = 0.5
const y = 0.7

const minCount = 50
const maxCount = 90

const minAngle = 40
const maxAngle = 130

const minSpeed = 30
const maxSpeed = 50

confetti.create({
    x: x,
    y: y,
    count: randomNumber(minCount, maxCount),
    ticks: -1,
    gravity: 1,
    decay: 0.93,
    speed: randomNumber(minSpeed, maxSpeed),
    angle: randomNumber(minAngle, maxAngle),
    static: false,
    scales: [ 0.5, 0.7, 0.8 ],
    shapes: [ 'square', 'ellipse' ]
})

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}

DropYou can create drop style confetti effect in a very simple way.

const minDropScale = 0.5
const maxDropScale = 0.8

const minDropGravity = 0.3
const maxDropGravity = 0.8

const minDropSpeed = 0.3
const maxDropSpeed = 0.8

const createDrop = () => {
    confetti.create({
        x: randomNumber(0, 1),
        y: 0.0001,
        count: 1,
        gravity: randomNumber(minDropGravity, maxDropGravity),
        ticks: randomNumber(-1, 1000),
        scale: randomNumber(minDropScale, maxDropScale),
        speed: randomNumber(minDropSpeed, maxDropSpeed),
        decay: 0.90,
        spread: 0,
        shapes: [ 'square', 'ellipse' ]
    })
}

setInterval(() => {
    createDrop()
}, 80)

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}

PartyYou can create any type of effect, for example confetti for parties.

const minConfettiScale = 0.5
const maxConfettiScale = 1

const minConfettiSpeed = 20
const maxConfettiSpeed = 30

const minConfettiGravity = 0.6
const maxConfettiGravity = 1.1

const colors = [ '#307BFF', '#FFFFFF' ]

const createParty = () => {

    // Left Confetti
    confetti.create({
        x: 0.001,
        y: 0.5,
        count: 3,
        gravity: [
            randomNumber(minConfettiGravity, maxConfettiGravity),
            randomNumber(minConfettiGravity, maxConfettiGravity),
            randomNumber(minConfettiGravity, maxConfettiGravity),
        ],
        ticks: 200,
        scale: [
            randomNumber(minConfettiScale, maxConfettiScale),
            randomNumber(minConfettiScale, maxConfettiScale),
            randomNumber(minConfettiScale, maxConfettiScale)
        ],
        speed: randomNumber(minConfettiSpeed, maxConfettiSpeed),
        decay: 0.95,
        spread: 50,
        angle: 50,
        shapes: [ 'square', 'ellipse' ],
        colors: colors
    })

    // Right Confetti
    confetti.create({
        x: 1.999,
        y: 0.5,
        count: 3,
        gravity: [
            randomNumber(minConfettiGravity, maxConfettiGravity),
            randomNumber(minConfettiGravity, maxConfettiGravity),
            randomNumber(minConfettiGravity, maxConfettiGravity),
        ],
        ticks: 200,
        scale: [
            randomNumber(minConfettiScale, maxConfettiScale),
            randomNumber(minConfettiScale, maxConfettiScale),
            randomNumber(minConfettiScale, maxConfettiScale)
        ],
        speed: randomNumber(minConfettiSpeed, maxConfettiSpeed),
        decay: 0.95,
        spread: 50,
        angle: 130,
        shapes: [ 'square', 'ellipse' ],
        colors: colors
    })

}

setInterval(() => {
    createParty()
}, 50)

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}

FireworksYou can create fireworks effects in a very simple way.

const minFireworkCount = 30
const maxFireworkCount = 120

const minFireworkSize = 0.1
const maxFireworkSize = 0.4

const minDisappear = 60
const maxDisappear = 180

const minFireworkGravity = 0.4
const maxFireworkGravity = 0.7

const minPos = 0.1
const maxPos = 0.9

const fireworkColors = [
    [ '#2466FF', '#24B3FF', '#24D4FF', '#24FFFC', '#78FFF3', '#B2FFF8' ],
    [ '#B218FF', '#BD39FF', '#CD67FF', '#DA8EFF', '#E4ADFF', '#F5E1FF' ],
    [ '#FF2488', '#FF24BD', '#FF59CD', '#FF7AF5', '#FA99FF', '#FDD6FF' ],
    [ '#FF5920', '#FF7141', '#FF8C65', '#FFA587', '#FFC0AB', '#FFE0D6' ],
    [ '#FFB61B', '#FFC13C', '#FFD16D', '#FFE09D', '#FFE7B3', '#FFF2D4' ],
    [ '#6DFF24', '#8DFF54', '#A6FF7A', '#98FF96', '#B2FFB1', '#DEFFDE' ]
]

const createFirework = () => {

    const xPos = randomNumber(minPos, maxPos)
    const yPos = randomNumber(minPos, maxPos)

    const colorStack = parseInt(randomNumber(0, fireworkColors.length - 1).toFixed(0))
    const colors = fireworkColors[colorStack]

    // Fireworks
    confetti.create({
        x: xPos,
        y: yPos,
        count: randomNumber(minFireworkCount, maxFireworkCount),
        gravity: [
            randomNumber(minFireworkGravity, maxFireworkGravity),
            randomNumber(minFireworkGravity, maxFireworkGravity),
            randomNumber(minFireworkGravity, maxFireworkGravity),
            randomNumber(minFireworkGravity, maxFireworkGravity),
        ],
        ticks: randomNumber(minDisappear, maxDisappear),
        scale: [
            randomNumber(minFireworkSize, maxFireworkSize),
            randomNumber(minFireworkSize, maxFireworkSize),
            randomNumber(minFireworkSize, maxFireworkSize)
        ],
        speed: 26,
        decay: 0.95,
        spread: 360,
        shapes: [ 'circle' ],
        colors: colors
    })

    // Particles
    confetti.create({
        x: xPos,
        y: yPos,
        count: randomNumber(minFireworkCount, maxFireworkCount),
        gravity: [
            randomNumber(minFireworkGravity, maxFireworkGravity),
            randomNumber(minFireworkGravity, maxFireworkGravity),
            randomNumber(minFireworkGravity, maxFireworkGravity),
            randomNumber(minFireworkGravity, maxFireworkGravity),
        ],
        ticks: randomNumber(minDisappear, maxDisappear),
        scale: 0.1,
        speed: 20,
        decay: 0.93,
        spread: 360,
        shapes: [ 'circle' ],
        colors: colors
    })

}

setInterval(() => {
    createFirework()
}, 500)

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}

SnowYou can create snow effect in a very simple way.

const minSnowScale = 0.1
const maxSnowScale = 0.5

const minSnowGravity = 0.1
const maxSnowGravity = 0.8

const minSnowSpeed = 0.2
const maxSnowSpeed = 0.8

const createSnow = () => {
    confetti.create({
        x: randomNumber(0, 1),
        y: 0.0001,
        count: 1,
        gravity: randomNumber(minSnowGravity, maxSnowGravity),
        ticks: randomNumber(-1, 1000),
        scale: randomNumber(minSnowScale, maxSnowScale),
        speed: randomNumber(minSnowSpeed, maxSnowSpeed),
        decay: 0.90,
        spread: 0,
        shapes: [ 'circle' ],
        colors: [ '#ffffff' ]
    })
}

setInterval(() => {
    createSnow()
}, 80)

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}

StarsYou can also create effects with stars. It's very simple!

const minStarCount = 30
const maxStarCount = 50

const minStarSize = 0.6
const maxStarSize = 1

const minDisappear = 50
const maxDisappear = 70

const starColors = [ '#FFFC9A', '#FFD655', '#FFC155', '#FF9D55' ]

// Stars
confetti.create({
    x: 0.5,
    y: 0.5,
    count: randomNumber(minStarCount, maxStarCount),
    gravity: -0.001,
    ticks: randomNumber(minDisappear, maxDisappear),
    scale: [
        randomNumber(minStarSize, maxStarSize),
        randomNumber(minStarSize, maxStarSize),
        randomNumber(minStarSize, maxStarSize)
    ],
    speed: 30,
    decay: 0.94,
    spread: 360,
    shapes: [ 'star' ],
    colors: starColors
})

// Particles
confetti.create({
    x: 0.5,
    y: 0.5,
    count: randomNumber(minStarCount, maxStarCount),
    gravity: -0.001,
    ticks: randomNumber(minDisappear, maxDisappear),
    scale: 0.1,
    speed: 20,
    decay: 0.93,
    spread: 360,
    shapes: [ 'circle' ],
    colors: starColors
})

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}

EmojisYou can use emojis to create any type of effect. In this demo we simulate thematized fireworks for 👻 Halloween.

const minEmojiCount = 8
const maxEmojiCount = 30

const minEmojiSize = 0.1
const maxEmojiSize = 0.4

const minDisappear = 200
const maxDisappear = 500

const minPos = 0.1
const maxPos = 0.9

const emojisList = [
    [ '👻', '💀', '🎃', '🍬', '🦇', '🕷️' ],
]

const createEmoji = () => {

    const xPos = randomNumber(minPos, maxPos)
    const yPos = randomNumber(minPos, maxPos)

    const emojiStack = parseInt(randomNumber(0, emojisList.length - 1).toFixed(0))
    const emojis = emojisList[emojiStack]

    // Emojis
    confetti.create({
        x: xPos,
        y: yPos,
        count: randomNumber(minEmojiCount, maxEmojiCount),
        gravity: 1.5,
        ticks: randomNumber(minDisappear, maxDisappear),
        scale: [ 
            randomNumber(minEmojiSize, maxEmojiSize),
            randomNumber(minEmojiSize, maxEmojiSize),
            randomNumber(minEmojiSize, maxEmojiSize)
        ],
        speed: 31,
        decay: 0.96,
        spread: 360,
        shapes: [ 'emoji' ],
        emojis: emojis
    })

    // Particles
    confetti.create({
        x: xPos,
        y: yPos,
        count: randomNumber(20, 60),
        gravity: 1.7,
        ticks: randomNumber(minDisappear, maxDisappear),
        scale: 0.1,
        speed: 20,
        decay: 0.93,
        spread: 360,
        shapes: [ 'circle' ],
        colors: [ '#ffffff', '#000000', '#FF752B' ]
    })

}

setInterval(() => {
    createEmoji()
}, 900)

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}

HeartsWith the possibility of adding emojis, you can create effects like this that we have created with ❤️ Hearts.

const minHeartScale = 0.1
const maxHeartScale = 0.5

const minHeartSpeed = 5
const maxHeartSpeed = 10

const minHeartGravity = -0.5
const maxHeartGravity = -1.5

const createHeart = () => {

    // Hearts
    confetti.create({
        x: 0.5,
        y: 0.5,
        count: 3,
        gravity: [
            randomNumber(minHeartGravity, maxHeartGravity),
            randomNumber(minHeartGravity, maxHeartGravity),
            randomNumber(minHeartGravity, maxHeartGravity),
            randomNumber(minHeartGravity, maxHeartGravity),
        ],
        ticks: randomNumber(50, 100),
        scale: [
            randomNumber(minHeartScale, maxHeartScale),
            randomNumber(minHeartScale, maxHeartScale),
            randomNumber(minHeartScale, maxHeartScale),
            randomNumber(minHeartScale, maxHeartScale)
        ],
        speed: randomNumber(minHeartSpeed, maxHeartSpeed),
        decay: 0.92,
        spread: 80,
        shapes: [ 'emoji' ],
        emojis: [ '❤️' ]
    })

}

setInterval(() => {
    createHeart()
}, 180)

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}

CookiesThis is another example of how to use emojis to create effects. Test it to feed the monster! 🍪 Ñom ñom ñom 🍪

const minParticleGravity = 1
const maxParticleGravity = 1.5

// Cookies
confetti.create({
    x: 0.5,
    y: 0.7,
    count: 1,
    gravity: 5,
    ticks: -1,
    scale: 0.8,
    speed: 50,
    decay: 0.8,
    spread: 0,
    shapes: [ 'emoji' ],
    emojis: [ '🍪' ]
})

setTimeout(() => {

    // Particles
    confetti.create({
        x: 0.5,
        y: 1.9999,
        count: 50,
        gravity: [
            randomNumber(minParticleGravity, maxParticleGravity),
            randomNumber(minParticleGravity, maxParticleGravity),
            randomNumber(minParticleGravity, maxParticleGravity),
            randomNumber(minParticleGravity, maxParticleGravity),
        ],
        ticks: randomNumber(40, 80),
        scale: [ 0.3, 0.5, 0.7 ],
        speed: 30,
        decay: 0.95,
        spread: 100,
        shapes: [ 'circle' ],
        colors: [ '#f3ad61', '#ce985e', '#6d4534' ]
    })
    
}, 700)

function randomNumber(min, max) {
    return Math.random() * (max - min) + min
}
Lucas O. S.

Who did this?

Hello, I'm Lucas O. S. and this is a small library to create confettis on your website. I was inspired by the existing library called canvas-confetti, but I wanted to create something new with more understandable code and more functionality.

The idea of this library is that web developers can add any style of confetti and other effects to their website. You can see the source code in the confettis repository on github.

You can follow me on my social networks to see my future projects.

Made with Fresh
Copyright © 2023 OVNI.dev.All rights reserved.