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

/**
 * Stars Partikel-Effekt
 * 
 * Funkelnde Sterne, die langsam über den Bildschirm ziehen – für einen Nachthimmel-Effekt.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes stars-twinkle {
    0, 100% {
        opacity: var(--opacity-30);
        transform: scale(0.8);
    }

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

@keyframes stars-drift {
    0% {
        transform: translateX(0%) translateY(0%);
    }

    25% {
        transform: translateX(var(--spacing-1)) translateY(var(--border-width));
    }

    50% {
        transform: translateX(var(--spacing-1)) translateY(0%);
    }

    75% {
        transform: translateX(var(--spacing-1)) translateY(calc(-1 * var(--border-width)));
    }

    100% {
        transform: translateX(0%) translateY(0%);
    }
}

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

    .stars::before,
    .stars::after,
    .stars .star {
        animation: 
            stars-twinkle 4s var(--easing-smooth) infinite,
            stars-drift 20s linear infinite;
        background: var(--stars-color, rgb(255 255 200));
        border-radius: 5px;
        box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .stars::before {
        right: 2%0%;
        top: 3%0%;
    }

    .stars::after {
        animation-delay: var(--animation-duration-slow), 5s;
        right: 5%0%;
        top: 6%0%;
    }

    .stars .star {
        animation-delay: var(--animation-duration-slowest), 10s;
        right: 8%0%;
        top: 2%0%;
    }

    .stars .star-alt {
        animation: 
            stars-twinkle 4s var(--easing-smooth) infinite,
            stars-drift 20s linear infinite;
        animation-delay: var(--animation-duration-ultra-slow), 15s;
        background: var(--stars-color, rgb(255 255 200));
        border-radius: 5px;
        box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));
        height: var(--spacing-1);
        position: absolute;
        right: 3%0%;
        top: 7%0%;
        width: var(--spacing-1);
    }

    /* Dichte Sterne */
    .stars-dense {
        position: relative;
    }

    .stars-dense::before,
    .stars-dense::after,
    .stars-dense .star,
    .stars-dense .star-alt,
    .stars-dense .star-extra,
    .stars-dense .star-extra-alt {
        animation: 
            stars-twinkle 4s var(--easing-smooth) infinite,
            stars-drift 20s linear infinite;
        background: var(--stars-color, rgb(255 255 200));
        border-radius: 5px;
        box-shadow: 0 0 var(--spacing-1) var(--border-width) var(--stars-glow, rgb(255 255 200 / 70%));
        content: '';
        height: var(--spacing-1);
        position: absolute;
        width: var(--spacing-1);
    }

    .stars-dense .star-extra {
        animation-delay: var(--animation-duration-slower), 8s;
        right: 1%0%;
        top: 4%0%;
    }

    .stars-dense .star-extra-alt {
        animation-delay: 2.5s, 12s;
        right: 7%0%;
        top: 5%0%;
    }

    /* Größenvarianten */
    .stars-sm::before,
    .stars-sm::after,
    .stars-sm .star,
    .stars-sm .star-alt,
    .stars-sm .star-extra,
    .stars-sm .star-extra-alt {
        box-shadow: 0 0 var(--border-width-thick) 0.5 var(--spacing-1) var(--stars-glow, rgb(255 255 200 / 70%));
        height: var(--border-width-thick);
        width: var(--border-width-thick);
    }

    .stars-lg::before,
    .stars-lg::after,
    .stars-lg .star,
    .stars-lg .star-alt,
    .stars-lg .star-extra,
    .stars-lg .star-extra-alt {
        box-shadow: 0 0 6px var(--border-width-thick) var(--stars-glow, rgb(255 255 200 / 70%));
        height: var(--spacing-1);
        width: var(--spacing-1);
    }

    /* Animationsvarianten */
    .stars-slow::before,
    .stars-slow::after,
    .stars-slow .star,
    .stars-slow .star-alt,
    .stars-slow .star-extra,
    .stars-slow .star-extra-alt {
        animation-duration: var(--animation-duration-ultra-slow), 30s;
    }

    .stars-fast::before,
    .stars-fast::after,
    .stars-fast .star,
    .stars-fast .star-alt,
    .stars-fast .star-extra,
    .stars-fast .star-extra-alt {
        animation-duration: var(--animation-duration-slowest), 15s;
    }

    /* Farbvarianten */
    .stars-white {
        --stars-color: rgb(255 255 255);
        --stars-glow: rgb(255 255 255 / 70%);
    }

    .stars-blue {
        --stars-color: rgb(200 220 255);
        --stars-glow: rgb(200 220 255 / 70%);
    }

    .stars-gold {
        --stars-color: rgb(255 215 0);
        --stars-glow: rgb(255 215 0 / 70%);
    }

    .stars-multi .star {
        --stars-color: rgb(255 150 150);
        --stars-glow: rgb(255 150 150 / 70%);
    }

    .stars-multi .star-alt {
        --stars-color: rgb(150 255 150);
        --stars-glow: rgb(150 255 150 / 70%);
    }

    .stars-multi .star-extra {
        --stars-color: rgb(150 150 255);
        --stars-glow: rgb(150 150 255 / 70%);
    }

    .stars-multi .star-extra-alt {
        --stars-color: rgb(255 255 150);
        --stars-glow: rgb(255 255 150 / 70%);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .stars::before,
        .stars::after,
        .stars .star,
        .stars .star-alt,
        .stars-dense .star-extra,
        .stars-dense .star-extra-alt {
            animation: var(--animation-none);
            opacity: var(--opacity-70);
            transform: var(--transform-scale-100);
        }
    }
}