Sparkles

Live Demo

Reduced motionPlay effects

Burst sparkles

import { sparkles } from "party-js";

sparkles(button);

PlaygroundsTry it in the effects playground

Usage

Pass the element the sparkles should burst out of. They appear in four quick bursts from the middle of the element, shoot outwards, and then hover for a moment while they settle. Occasionally, a sparkle briefly grows and flashes towards white.

Most sparkles are small, with a few big ones among them. The size option sets the size of the largest ones:

import { range, sparkles } from "party-js";

button.addEventListener("click", () => {
    sparkles(button, {
        count: range(40, 60),
        size: 16,
    });
});

The glints come from the twinkle() behavior, which you can use in your own effects too.

You can find a complete list of options and their defaults in the reference.