@casoon/dragonfly/effects/particles/firefly.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.

/**
 * Firefly Partikel-Effekt
 * 
 * Leuchtende Punkte mit sanften Bewegungen – simulieren Glühwürmchen.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes firefly-float {
    0% {
        opacity: var(--opacity-0);
        transform: translate(0%, 0%);
    }

    20% {
        opacity: var(--opacity-80);
    }

    40% {
        opacity: var(--opacity-30);
        transform: translate(30px, calc(-1 * var(--spacing-5)));
    }

    60% {
        opacity: var(--opacity-100);
        transform: translate(60px, 0%);
    }

    80% {
        opacity: var(--opacity-40);
        transform: translate(30px, var(--spacing-5));
    }

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

@keyframes firefly-glow {
    0, 100% {
        box-shadow: 0 0 var(--spacing-2) var(--border-width-thick) var(--firefly-glow-color, rgb(255 255 180 / 70%));
    }

    50% {
        box-shadow: 0 0 var(--spacing-1)(--border-width-thick) var(--spacing-1) var(--firefly-glow-color, rgb(255 255 180 / 90%));
    }
}

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

    .firefly::before,
    .firefly::after {
        animation: 
            firefly-float 8s infinite var(--easing-smooth),
            firefly-glow 2s infinite var(--easing-smooth);
        background: var(--firefly-color, rgb(255 255 180));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .firefly::before {
        bottom: 2%0%;
        left: 1%0%;
    }

    .firefly::after {
        animation-delay: var(--animation-duration-slowest), 0.5s;
        bottom: 4%0%;
        left: 6%0%;
    }

    /* Zusätzliche Fireflies */
    .firefly-many {
        position: relative;
    }

    .firefly-many::before,
    .firefly-many::after {
        animation: 
            firefly-float 8s infinite var(--easing-smooth),
            firefly-glow 2s infinite var(--easing-smooth);
        background: var(--firefly-color, rgb(255 255 180));
        border-radius: 5px;
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .firefly-many::before {
        animation-delay: var(--animation-duration-ultra-slow), 1s;
        bottom: 3%0%;
        left: 3%0%;
    }

    .firefly-many::after {
        animation-delay: var(--animation-duration-ultra-slow), 1.5s;
        bottom: 7%0%;
        left: 4%0%;
    }

    /* Größenvarianten */
    .firefly-sm::before,
    .firefly-sm::after {
        height: var(--border-width-thick);
        width: var(--border-width-thick);
    }

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

    /* Geschwindigkeitsvarianten */
    .firefly-slow::before,
    .firefly-slow::after {
        animation-duration: var(--animation-duration-ultra-slow), 3s;
    }

    .firefly-fast::before,
    .firefly-fast::after {
        animation-duration: var(--animation-duration-ultra-slow), 1s;
    }

    /* Farbvarianten */
    .firefly-green::before,
    .firefly-green::after {
        --firefly-color: rgb(180 255 180);
        --firefly-glow-color: rgb(180 255 180 / 70%);
    }

    .firefly-blue::before,
    .firefly-blue::after {
        --firefly-color: rgb(180 180 255);
        --firefly-glow-color: rgb(180 180 255 / 70%);
    }

    .firefly-purple::before,
    .firefly-purple::after {
        --firefly-color: rgb(220 180 255);
        --firefly-glow-color: rgb(220 180 255 / 70%);
    }

    .firefly-red::before,
    .firefly-red::after {
        --firefly-color: rgb(255 180 180);
        --firefly-glow-color: rgb(255 180 180 / 70%);
    }
}

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