Burst Effect

Expanding particle burst animation using multiple radial gradients

<div class="firework firework-burst">
    <div class="firework-launch"></div>
    <div class="firework-particles"></div>
</div>

Theme Variants

Different colour themes for various occasions

Grand Display

Launch multiple fireworks with different themes simultaneously

// Launch multiple fireworks
function launchMultipleFireworks(containerId, theme, count) {
    const themes = ['celebration', 'special', 'birthday', 'newyear'];
    
    for (let i = 0; i < count; i++) {
        setTimeout(() => {
            const currentTheme = theme === 'mixed' ? 
                themes[Math.floor(Math.random() * themes.length)] : theme;
            const position = 20 + Math.random() * 60;
            launchFirework(containerId, currentTheme, position);
        }, i * 300 + Math.random() * 200);
    }
}

Colour Variants

Click each card to launch themed fireworks

Continuous Animation

Loop the fireworks animation infinitely for ongoing celebrations

// Start continuous fireworks display
startContinuousDisplay('container-id');

// Stop the display
stopContinuousDisplay();

Hover Trigger

Trigger fireworks animation on hover for interactive elements

// Add hover trigger to button
button.addEventListener('mouseenter', () => {
    launchFirework('container-id', 'celebration');
});

Click to Launch

Click anywhere on the canvas to launch fireworks at that position

// Click to launch at mouse position
container.addEventListener('click', (e) => {
    const rect = container.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 100;
    launchFirework('container-id', 'celebration', x);
});

Usage Examples

Real-world applications of fireworks effects

Success Message

Achievement Badge

Celebration Button

CSS Classes Reference

Base Classes

• .firework - Base firework container
• .firework-burst - Expanding particle burst effect
• .firework-sparkle - Twinkling stars effect
• .firework-trail - Falling particle trail effect

Size Modifiers

• .firework-sm - Small size (100px)
• .firework-md - Medium size (300px)
• .firework-lg - Large size (400px)
• .firework-xl - Extra large size (500px)

Colour Modifiers

• .firework-primary - Primary theme colours
• .firework-success - Success theme colours
• .firework-rainbow - Rainbow colours

Behavior Modifiers

• .firework-continuous - Loop animation infinitely
• .firework-on-hover - Trigger on hover

CSS Variables

• --dm-fw-duration - Animation duration (default: 1.5s)
• --dm-fw-delay - Animation delay (default: 0s)
• --dm-fw-color-1 through --dm-fw-color-8 - Custom colours