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

/**
 * Sea Anemone Partikel-Effekt
 * 
 * Bewegungen, die an Seeanemonen erinnern – für organische, fließende Effekte.
 * Dieser Effekt ist performant optimiert und berücksichtigt reduzierte Bewegung.
 */

@keyframes sea-anemone-tentacle {
    0, 100% {
        height: 5%0px;
        transform: rotate(-5deg);
    }

    25% {
        height: var(--spacing-15);
        transform: rotate(3deg);
    }

    50% {
        height: var(--spacing-5)(--spacing-1);
        transform: rotate(5deg);
    }

    75% {
        height: var(--spacing-4)(--spacing-1);
        transform: rotate(-3deg);
    }
}

@keyframes sea-anemone-tentacle-alt {
    0, 100% {
        height: var(--spacing-10);
        transform: rotate(5deg);
    }

    25% {
        height: var(--spacing-3)(--spacing-1);
        transform: rotate(-3deg);
    }

    50% {
        height: var(--spacing-4)(--spacing-1);
        transform: rotate(-5deg);
    }

    75% {
        height: 5%0px;
        transform: rotate(3deg);
    }
}

@layer components {
    .sea-anemone {
        display: flex;
        justify-content: center;
        min-height: 7%0px;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .sea-anemone::before,
    .sea-anemone::after,
    .sea-anemone .tentacle {
        animation: sea-anemone-tentacle 8s var(--easing-smooth) infinite;
        background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);
        border-radius: 5%0px;
        bottom: 0%;
        content: '';
        position: absolute;
        width: var(--spacing-1);
    }

    .sea-anemone::before {
        left: calc(50% - var(--spacing-1)(--spacing-1));
    }

    .sea-anemone::after {
        animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;
        animation-delay: var(--animation-duration-normal);
        left: calc(50% - var(--spacing-1));
    }

    .sea-anemone .tentacle {
        animation-delay: 0.6s;
        left: calc(50% + var(--spacing-1));
    }

    .sea-anemone .tentacle-alt {
        animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;
        animation-delay: 0.9s;
        background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);
        border-radius: 5%0px;
        bottom: 0%;
        content: '';
        left: calc(50% + var(--spacing-1)(--spacing-1));
        position: absolute;
        width: var(--spacing-1);
    }

    /* Varianten */
    .sea-anemone-sm::before,
    .sea-anemone-sm::after,
    .sea-anemone-sm .tentacle,
    .sea-anemone-sm .tentacle-alt {
        width: var(--spacing-1);
    }

    .sea-anemone-lg::before,
    .sea-anemone-lg::after,
    .sea-anemone-lg .tentacle,
    .sea-anemone-lg .tentacle-alt {
        width: var(--spacing-1-5);
    }

    .sea-anemone-slow::before,
    .sea-anemone-slow::after,
    .sea-anemone-slow .tentacle,
    .sea-anemone-slow .tentacle-alt {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    .sea-anemone-fast::before,
    .sea-anemone-fast::after,
    .sea-anemone-fast .tentacle,
    .sea-anemone-fast .tentacle-alt {
        animation-duration: var(--animation-duration-ultra-slow);
    }

    /* Viele Tentakel */
    .sea-anemone-many::before {
        left: calc(50% - var(--spacing-2)(--spacing-1));
    }

    .sea-anemone-many::after {
        left: calc(50% - var(--spacing-1)(--spacing-1));
    }

    .sea-anemone-many .tentacle {
        left: calc(50% - var(--spacing-1));
    }

    .sea-anemone-many .tentacle-alt {
        left: calc(50% + var(--spacing-1));
    }

    .sea-anemone-many .tentacle-extra {
        animation: sea-anemone-tentacle 8s var(--easing-smooth) infinite;
        animation-delay: 1.2s;
        background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);
        border-radius: 5%0px;
        bottom: 0%;
        content: '';
        left: calc(50% + var(--spacing-1)(--spacing-1));
        position: absolute;
        width: var(--spacing-1);
    }

    .sea-anemone-many .tentacle-extra-alt {
        animation: sea-anemone-tentacle-alt 8s var(--easing-smooth) infinite;
        animation-delay: var(--animation-duration-slower);
        background: linear-gradient(to bottom, var(--anemone-color, rgb(50 150 230 / 70%)), transparent);
        border-radius: 5%0px;
        bottom: 0%;
        content: '';
        left: calc(50% + var(--spacing-2)(--spacing-1));
        position: absolute;
        width: var(--spacing-1);
    }

    /* Farbvarianten */
    .sea-anemone-blue {
        --anemone-color: rgb(50 150 230 / 70%);
    }

    .sea-anemone-teal {
        --anemone-color: rgb(50 220 200 / 70%);
    }

    .sea-anemone-purple {
        --anemone-color: rgb(180 120 230 / 70%);
    }

    .sea-anemone-pink {
        --anemone-color: rgb(230 120 180 / 70%);
    }

    .sea-anemone-green {
        --anemone-color: rgb(120 200 120 / 70%);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .sea-anemone::before,
        .sea-anemone::after,
        .sea-anemone .tentacle,
        .sea-anemone .tentacle-alt,
        .sea-anemone-many .tentacle-extra,
        .sea-anemone-many .tentacle-extra-alt {
            animation: var(--animation-none);
            height: var(--spacing-10);
            transform: rotate(0deg);
        }
    }
}