@casoon/dragonfly/effects/particles/fireworks.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Fireworks Partikel-Effekt
 * 
 * Partikel, die wie Feuerwerkskörper explodieren – für festliche Anlässe.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes firework-rise {
    0% {
        opacity: var(--opacity-0);
        transform: translateX(100%);
    }

    50% {
        opacity: var(--opacity-100);
    }

    75%, 100% {
        opacity: var(--opacity-0);
        transform: translateX(0%);
    }
}

@keyframes firework-explode {
    0% {
        box-shadow:
            0 0 0 0 var(--firework-color-1, rgb(255 50 50 / 90%)),
            0 0 0 0 var(--firework-color-2, rgb(50 255 50 / 90%)),
            0 0 0 0 var(--firework-color-3, rgb(50 50 255 / 90%));
        opacity: var(--opacity-100);
        transform: scale(0.01);
    }

    30% {
        box-shadow:
            -50px -50px 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),
            50px -40px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),
            0 60px 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));
        opacity: var(--opacity-100);
        transform: scale(0.7);
    }

    70% {
        box-shadow:
            -100px -100px 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),
            100px -80px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),
            0 var(--spacing-1)(--spacing-5) 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));
        opacity: var(--opacity-30);
    }

    100% {
        box-shadow:
            -var(--spacing-1)(--spacing-5) -var(--spacing-1)(--spacing-5) 0 0 var(--firework-color-1, rgb(255 50 50 / 0%)),
            var(--spacing-1)(--spacing-5) -100px 0 0 var(--firework-color-2, rgb(50 255 50 / 0%)),
            0 140px 0 0 var(--firework-color-3, rgb(50 50 255 / 0%));
        opacity: var(--opacity-0);
        transform: var(--transform-scale-100);
    }
}

@layer components {
    .fireworks {
        overflow: hidden;
        position: relative;
    }

    .fireworks::before,
    .fireworks::after {
        background: var(--firework-base-color, rgb(255 220 180));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .fireworks::before {
        animation: 
            firework-rise 2.5s var(--easing-decelerate) forwards,
            firework-explode 0.5s var(--easing-decelerate) 1.2s forwards;
        bottom: 0%;
        left: 4%0%;
    }

    .fireworks::after {
        animation: 
            firework-rise 2.5s var(--easing-decelerate) 1s forwards,
            firework-explode 0.5s var(--easing-decelerate) 2.2s forwards;
        bottom: 0%;
        left: 6%0%;
    }

    /* Varianten */
    .fireworks-sm::before,
    .fireworks-sm::after {
        height: var(--border-width-thick);
        width: var(--border-width-thick);

        --firework-size-multiplier: 0.7;
    }

    .fireworks-lg::before,
    .fireworks-lg::after {
        height: var(--spacing-1-5);
        width: var(--spacing-1-5);

        --firework-size-multiplier: 1.5;
    }

    .fireworks-slow::before {
        animation: 
            firework-rise 4s var(--easing-decelerate) forwards,
            firework-explode 1s var(--easing-decelerate) 2s forwards;
    }

    .fireworks-slow::after {
        animation: 
            firework-rise 4s var(--easing-decelerate) 1.5s forwards,
            firework-explode 1s var(--easing-decelerate) 3.5s forwards;
    }

    .fireworks-fast::before {
        animation: 
            firework-rise 1.5s var(--easing-decelerate) forwards,
            firework-explode 0.3s var(--easing-decelerate) 0.7s forwards;
    }

    .fireworks-fast::after {
        animation: 
            firework-rise 1.5s var(--easing-decelerate) 0.5s forwards,
            firework-explode 0.3s var(--easing-decelerate) 1.2s forwards;
    }

    /* Farbvarianten */
    .fireworks-red {
        --firework-base-color: rgb(255 150 150);
        --firework-color-1: rgb(255 50 50 / 90%);
        --firework-color-2: rgb(255 100 50 / 90%);
        --firework-color-3: rgb(255 50 100 / 90%);
    }

    .fireworks-blue {
        --firework-base-color: rgb(150 150 255);
        --firework-color-1: rgb(50 50 255 / 90%);
        --firework-color-2: rgb(50 100 255 / 90%);
        --firework-color-3: rgb(100 50 255 / 90%);
    }

    .fireworks-green {
        --firework-base-color: rgb(150 255 150);
        --firework-color-1: rgb(50 255 50 / 90%);
        --firework-color-2: rgb(100 255 50 / 90%);
        --firework-color-3: rgb(50 255 100 / 90%);
    }

    .fireworks-gold {
        --firework-base-color: rgb(255 230 150);
        --firework-color-1: rgb(255 215 0 / 90%);
        --firework-color-2: rgb(255 200 50 / 90%);
        --firework-color-3: rgb(255 180 0 / 90%);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .fireworks::before,
        .fireworks::after {
            animation: var(--animation-none);
            opacity: var(--opacity-0);
        }
    }
}