Emojisplosion

Multiple Explosions

Multiple emojisplosions using setTimeout to cancel the explosions after 5 seconds.

const { cancel } = emojisplosions();
setTimeout(cancel, 5000);

Singular Explosion

A singular explosion.

emojisplosion();

Lots of Emojis

Emojisplosion with a random number of emojis per blast between 100-200.

emojisplosion({
    emojiCount: () => Math.random() * 100 + 100,
});

Always Blue

Emojisplosion with only blue emojis.

emojisplosion({
    emojis: ["🥶", "🧞‍♂️", "👕", "🧵", "👔", "👖", "🥿", "🧢", "🦋", "🦕", "🐟", "🐬", "🐳", "🐋", "🌎", "💧", "💦", "🌊", "🫐", "🧊", "🥣", "🥏", "🥍", "🛝", "🎽", "🎣", "🚙", "🚎", "⛴️", "🗺️", "🌌", "🗾", "💎", "🧿", "🪬", "🩻", "🛋️", "📪", "📘", "🖌️", "💙", "💠", "Ⓜ️", "🌀", "💤", "🛂", "🌐", "🔵", "🔹", "🔷", "🟦"],
});

Only One

Emojisplosion with only one type of emoji per explosion.

emojisplosion({
    uniqueness: 1,
});

Set Position

Emojisplosion that only happens at a set position on the page

// using the explosion container to base the initial explosion positions around
const containerWidth = document.getElementById("explosion-container").offsetWidth;
const containerHeight = document.getElementById("explosion-container").offsetHeight;

emojisplosion({
    position: {
        x: containerWidth / 2,
        y: containerHeight / 2,
    },
});

Title Explosion

Emojisplosion that only happens on the element with an id of 'title' (which is the title of the site).

const element = document.getElementById("title");

let cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

emojisplosion({
    position() {
        // https://stackoverflow.com/questions/1480133
        const offset = cumulativeOffset(element);

        return {
            x: offset.left + element.clientWidth / 2,
            y: offset.top + element.clientHeight / 2,
        };
    },
});

Large

Emojisplosion with extra large emojis.

emojisplosion({
    physics: {
        fontSize: {
            max: 54,
            min: 24,
        },
    },
});

Inverse Gravity

Emojisplosion with inverted gravity.

emojisplosion({
    physics: {
        gravity: -0.35,
        initialVelocities: {
            y: {min: 11.7, max: 14},
        },
    },
});

Spinnin

Emojisplosion with very quickly spinning spiral emojis.

emojisplosion({
    emojis: ["🌀"],
    physics: {
        fontSize: {min: 20, max: 38},
        gravity: 0.1,
        initialVelocities: {
            rotation: {min: -14, max: -14},
        },
        rotationDeceleration: 1.01,
    }
});

Tour de France

Emojisplosion with three biker emojis racing across the page. Only the x value for the initialVelocity property is set.

// using the explosion container to base the initial explosion positions around
const containerWidth = document.getElementById("explosion-container").offsetWidth;
const containerHeight = document.getElementById("explosion-container").offsetHeight;

emojisplosion({
    emojis: ["🚴‍♀️", "🚴", "🚴‍♂️"],
    emojiCount: 3,
    position: {
        x: containerWidth,
        y: Math.floor(containerHeight / 2) + 100,
    },
    physics: {
        fontSize: 68,
        gravity: 0,
        initialVelocities: {
            rotation: 0,
            x: {min: -20, max: -35},
            y: 0,
        },
        rotation: 0,
        rotationDeceleration: 0,
    }
});

Everything Everywhere all at Once (for 3 seconds)

Emojisplosions occuring randomly accross the page every 40 milliseconds for 3 seconds.

const { cancel } = emojisplosions({
    interval: 40
});

setTimeout(cancel, 3000);

Rocket

A singular rocket shoots out from a set spot on the page at an angle, followed by a burst of clouds and sparkles. Each set of emojis uses it's own emojisplosion function. The sparkle function is set to occur 400 milliseconds after the rocket and clouds go off.

// finding the height of the explosion contianer to base y position of the blast around
const containerHeight = document.getElementById("explosion-container").offsetHeight;
const blastYPos = containerHeight - 10;

// function for the rocket
const rocket = () => {
    emojisplosion({
        emojis: ["🚀"], 
        emojiCount: 1,
        position: {
            x: 150,
            y: blastYPos,
        },
        physics: {
            rotationDeceleration: 0,
            fontSize: 45,
            gravity: 0,
            initialVelocities: {
                x: 12,
                y: -10
            },
            rotation: 0,
        }
    });
};

// function for the clouds
const clouds = () => {
    emojisplosion({
        emojis: ["☁️"], 
        emojiCount: 10,
        position: {
            x: 150,
            y: blastYPos,
        },
        physics: {
            rotationDeceleration: 0,
            fontSize: {min: 38, max: 50},
            gravity: 0.1,
            initialVelocities: {
                x: {min: -7, max: 7},
                y: {min: -5, max: -2}
            },
            rotation: 0,
        }
    }); 
};

// function for the sparkles
const sparkles = () => {
    emojisplosion({
        emojis: ["✨"], 
        emojiCount: 10,
        position: {
            x: 200,
            y: blastYPos - 60,
        },
        physics: {
            fontSize: {min: 10, max: 30},
            gravity: 0.2,
            initialVelocities: {
                x: {min: -15, max: 20},
                y: {min: -15, max: 20}
            },
        }
    });
};

rocket();
clouds();

// set sparkles to go off 400 milliseconds after the rocket & clouds
setTimeout(sparkles, 400);

Heart on Fire

An outline of a heart made up of emojis appears on the page. The heart is formed by iterating through a 2d array of x, y coordinates and creating an explosion containing a singular heart emoji using each coordinate.

// 2d array of [x, y] coordinates to form an outline of a heart
const heartCoords = [
    [500, 600], // bottom point
    [500, 410], // center point
    // left line (y = x + 100)
    [350, 450],
    [375, 475],
    [400, 500],
    [425, 525],
    [450, 550],
    [475, 575],
    // right line (y = -x + 1100)
    [650, 450], 
    [623, 477],
    [600, 500],
    [550, 550],
    [574, 526],
    [526, 574],
    // left curve
    [340, 410],
    [340, 430],
    [350, 385],
    [370, 365],
    [400, 350],
    [430, 355],
    [460, 370],
    [480, 385],
    // right curve
    [520, 385],
    [540, 370],
    [570, 355],
    [600, 350],
    [630, 365],
    [650, 385],
    [660, 410],
    [660, 430],
];

// created random x & y values to set an initial velocity for all of the explosions
const randXVelocity = (Math.random() * 15) * (Math.round(Math.random()) ? 1 : -1);
const randYVelocity = (Math.random() * -15) - 3;

// created x & y starting coordinates to add to our heart coords to randomize where the heart occurs on the page
const randStartXCoord = Math.random() * 350 * (Math.round(Math.random()) ? 1 : -1);
const randStartYCoord = Math.random() * 350 * (Math.round(Math.random()) ? 1 : -1);

// itterating through the heartCoords to set off a singular explosion for each coordinate
for (let i = 0; i < heartCoords.length; i++) {
    const xCoordinate = heartCoords[i][0];
    const yCoordinate = heartCoords[i][1];

    emojisplosion({
        emojis: ["❤️‍🔥"], 
        emojiCount: 1,
        position: {
            x: xCoordinate + randStartXCoord,
            y: yCoordinate + randStartYCoord,
        },
        physics: {
            rotationDeceleration: 0,
            fontSize: 35,
            gravity: 0.15,
            initialVelocities: {
                x: randXVelocity,
                y: randYVelocity
            },
            rotation: 0,
        }
    });
}
});

Rainstorm

Emojisplosions occuring from set points at the top of the page for 5 seconds emulating a rainstorm.

const containerWidth = document.getElementById("explosion-container").offsetWidth;
    
// using a loop to set explosions to occur at steps of 25 between 0 & the explosion container width accross the x axis
for (let i = 0; i < containerWidth; i += 25) {

    // define a random gravity for each of the raindrop explosions
    const randGravity = (Math.random() * 0.30) + 0.10

    const { cancel } = emojisplosions({
        emojis: ["💧"],
        emojiCount: 1,
        position: {
            // using our step value as our starting x position
            x: i,
            y: 100,
        },
        physics: {
            rotationDeceleration: 0,
            fontSize: {min: 18, max: 30},
            gravity: randGravity,
            initialVelocities: {
                rotation: 0,
                x: 0,
                y: 0
            },
            rotation: 0,
        },
        // setting a random interval between 100 & 1000 for the explosion in each emojisplosions to occur 
        interval() {
            return Math.floor(Math.random() * 1000) + 100
        }
    });

    // cancel the explosions after 5 seconds 
    setTimeout(cancel, 5000);
};

Rainbow

A rainbow made up of hearts and clouds explodes as an arc across the page. The rainbow is made of columns, where each emoji within the column is a singular emojisplosion.

// finding midpoint of the explosion container for our starting y value position
const containerHeight = document.getElementById("explosion-container").offsetHeight;
const containerMidPoint = Math.floor(containerHeight / 2);

// function to create each heart column of the rainbow
const rainbowCol = () => {
    const rainbowArr = ["❤️", "🧡", "💛", "💚", "💙", "💜"];
    const positionY = containerMidPoint;
    
    // creates an explosion for each heart color in the column, increasing the y cordinate position for each blast
    for (let i = 0; i < rainbowArr.length; i++) {
        emojisplosion({
            emojis: [rainbowArr[i]],
            emojiCount: 1,
            position: {
                x: 0,
                y: positionY,
            },
            physics: {
                fontSize: 35,
                gravity: 0.08,
                initialVelocities: {
                    rotation: 0,
                    x: 20,
                    y: -20
                },
                rotation: 0,
            }
        });
        positionY += 30;
    }
};

// function to create cloud columns
const clouds = () => {
    let positionY = containerMidPoint;

    // creates an explosion for each cloud in the column, increasing the y cordinate position for each blast
    for (let i = 0; i < 6; i++) {
        emojisplosion({
            emojis: ["☁️"],
            emojiCount: 1,
            position: {
                x: 0,
                y: positionY,
            },
            physics: {
                fontSize: 65,
                gravity: 0.08,
                initialVelocities: {
                    rotation: 0,
                    x: 20,
                    y: -20
                },
                rotation: 0,
            }
        });
        positionY += 30;
    }
};
// create one column of clouds before the rainbow
clouds();

// set off rainbow columns at intervals of 80 milliseconds for 3 seconds to create the rainbow
let intervalId = setInterval(rainbowCol, 80);
setTimeout(() => clearInterval(intervalId), 3000);

// create one column of clouds after the rainbow
setTimeout(clouds, 3000);

Shooting Stars

Stars shoot accross the page with trails of sparkles. An emojisplosion is used for each individual emoji and set off in intervals.

// function for the star
const star = (yPos) => {
    emojisplosion({
        emojis: ["⭐️"],
        emojiCount: 1,
        position: {
            x: 0,
            y: yPos,
        },
        physics: {
            fontSize: {min: 20, max: 32},
            gravity: 0.05,
            initialVelocities: {
                x: 45,
                y: -10
            },
        }
    });
};

// function for the trailing sparkles
const sparkles = (yPos, size) => {
    emojisplosion({
        emojis: ["✨"],
        emojiCount: 1,
        position: {
            x: 0,
            y: yPos,
        },
        physics: {
            fontSize: size,
            gravity: 0.05,
            initialVelocities: {
                rotation: 0,
                x: 45,
                y: -10
            },
        }
    });
};

// finding height of the explosion container to base our random y value positions off of
const containerHeight = document.getElementById("explosion-container").offsetHeight;

// function for a singular shooting star 
const shootingStar = () => {
    let randYPos = (Math.random() * containerHeight) + 100;
    let emojiSize = 18;

    star(randYPos);

    // set off sparkle explosions at intervals of 60 milliseconds for 400 milliseconds to create the sparkle trail
    let intervalId = setInterval(() => {
        sparkles(randYPos, emojiSize); 

        // decreasing the size of the trailing sparkle emoji by 3 for each explosion
        emojiSize -= 3;
    }, 60);
    setTimeout(() => clearInterval(intervalId), 400);
}

// set off a shooting star at intervals of 60 milliseconds for 2 seconds 
let intervalId = setInterval(shootingStar, 60);
setTimeout(() => clearInterval(intervalId), 2000);

Firework

A firework of emojisplosions comprised of a singular random emoji is set off at a random position on the page.

// finding the explosion container width and height to base our starting coordinates off of
const containerWidth = document.getElementById("explosion-container").offsetWidth;
const containerHeight = document.getElementById("explosion-container").offsetHeight;

// created x & y starting coordinates to randomize where the firework occurs on the page
const randStartXCoord = Math.random() * containerWidth;
const randStartYCoord = Math.random() * containerHeight;

// function for the initial sparkles in the firework
const sparkles = () => {

    // a 2d array of initial velocity [x, y] coordinates to pass into each sparkle explosion 
    const velocityCoords = [
        [0, -15], 
        [0, 15], 
        [-15, 0],
        [15, 0],
        [10, 10],
        [-10, -10],
        [10, -10],
        [-10, 10]
    ];

    // set off a sparkle explosion for each of the differing intial velocity coordinates
    for (let i = 0; i < velocityCoords.length; i++) {
        emojisplosion({
            className: "sparkles",
            emojis: ["✨"],
            emojiCount: 1,
            position: {
                x: randStartXCoord,
                y: randStartYCoord,
            },
            physics: {
                rotationDeceleration: 0,
                fontSize: 20,
                gravity: 0,
                initialVelocities: {
                    rotation: 0,
                    x: velocityCoords[i][0],
                    y: velocityCoords[i][1]
                },
                rotation: 0,
            }
        })
    }

};

// function for blast parts of the firework 
const blast = () => {

    // choose a random emoji from imported defaultEmojis to set as the emoji for all blasts
    const randEmoji = defaultEmojis[Math.floor(Math.random() * defaultEmojis.length)];

    // a 2d array of [x, y] coodinates to add to the random starting coordinates to set the position for each blast
    const coordDiff = [
        [0, -150], 
        [0, 150], 
        [-150, 0],
        [150, 0],
        [106, 106],
        [-106, -106],
        [106, -106],
        [-106, 106]
    ];

    // set off a blast at each coordinate calculated using the coordDiff array
    for (let i = 0; i < coordDiff.length; i++) {
        emojisplosion({
            emojis: [randEmoji],
            uniqueness: 1,
            position: {
                x: randStartXCoord + coordDiff[i][0],
                y: randStartYCoord + coordDiff[i][1],
            },
            physics: {
                gravity: 0.2,
                initialVelocities: {
                    rotation: 0,
                    x: {min: -10, max: 10},
                    y: {min: -15, max: 15}
                },
            }
        })
    }
};

// remove the sparkles from the page after the blasts go off
// https://stackoverflow.com/a/14066534
const removeSparkles = () => {
    const elements = document.getElementsByClassName("sparkles");
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
};

sparkles();

// remove the sparkles and set off the blasts 630 milliseconds after the sparkles go off
setTimeout(removeSparkles, 630);
setTimeout(blast, 630);

Nope

A UFO appears on the page and briefly stops to abduct up a lone cow. The example consists of three stages defined by time, each with their own set of emojisplosions. The first stage consists of the UFO flying onto the page, the second consists of the UFO stopping to abduct the cow, and the third consists of the UFO flying off the page. **this example looks best on a computer

// finding the midpoint of the height of the explosion contianer to base the y positions of the emojisplosions around
const midContainerHeight = (document.getElementById("explosion-container").offsetHeight) / 2;

// function for the ufo 
const ufo = (pos, vel, className) => {
    emojisplosion({
        className: className,
        emojis: ["🛸"], 
        emojiCount: 1,
        position: {
            x: pos[0],
            y: pos[1],
        },
        physics: {
            fontSize: 75,
            gravity: 0,
            initialVelocities: {
                rotation: 0,
                x: vel[0],
                y: vel[1]
            },
            rotation: 20,
        }
    })
};

// function for the cow 
const cow = (velY, className) => {
    emojisplosion({
        className: className,
        emojis: ["🐄"], 
        emojiCount: 1,
        position: {
            x: 480,
            y: midContainerHeight + 100,
        },
        physics: {
            fontSize: 35,
            gravity: 0,
            initialVelocities: {
                rotation: 0,
                x: 0,
                y: velY
            },
            rotation: 0,
        }
    })
};

// function for the vortex 
const vortex = () => {
    emojisplosion({
        className: "mid", // setting the className to mid as the vortex only occurs in the "mid" stage
        emojis: ["🌪️"],
        emojiCount: 1,
        position: {
            x: 535,
            y: midContainerHeight + 70,
        },
        physics: {
            fontSize: 120,
            gravity: 0,
            initialVelocities: {
                rotation: 0,
                x: 0,
                y: 0
            },
            rotation: 180,
        }
    })
};

// the stages of the example set as classnames to pass to the emojis
const classNames = [
    "start",
    "mid",
    "end",
];

// starting positions as [x, y] coordinates for the ufo at each stage
const ufoPos = [
    [0, midContainerHeight - 200],  // start stage
    [500, midContainerHeight],      // mid stage & end stage
];

// initial velocities as [x, y] for the ufo at each stage
const ufoVel = [
    [15, 6],    // start stage
    [0, 0],     // mid stage
    [15, -6],   // end stage
];

// initial y value velocities for the cow at each stage 
const cowYVel = [
    0,      // start stage
    -3,     // mid stage
];

// function to remove emojis with a specified className from the page 
// https://stackoverflow.com/a/14066534
const removeEmoji = (className) => {
    const elements = document.getElementsByClassName(className);
    while(elements.length > 0){
        elements[0].parentNode.removeChild(elements[0]);
    }
};

// set off starting explosions for ufo and cow
ufo(ufoPos[0], ufoVel[0], classNames[0]);
cow(cowYVel[0], classNames[0]);

// set off mid explosions for ufo, cow & vortex after 2 seconds
setTimeout(vortex, 2000);
setTimeout(() => {cow(cowYVel[1], classNames[1])}, 2000);
setTimeout(() => {ufo(ufoPos[1], ufoVel[1], classNames[1])}, 2000);
// remove starting explosion emojis after 2 seconds
setTimeout(() => {removeEmoji(classNames[0])}, 2000);

// remove mid explosion emojis after 4350 milliseconds
setTimeout(() => {removeEmoji(classNames[1])}, 4350);
// set off last explosion for ufo after 4350 milliseconds
setTimeout(() => {ufo(ufoPos[1], ufoVel[2], classNames[2])}, 4350);

.css-166lo27{color:#FA78BD;}e.css-19v1p32{color:#73C7EB;}m.css-10bk5hz{color:#F3DD7B;}o.css-1a3cht3{color:#A16ED5;}j.css-9qd6vh{color:#84EB7E;}i.css-1pnws0z{color:#FCAD70;}splosion

emojisplosion