Morph Blob

<!-- Morph Blob Loader -->
<div class="nuda-morph-blob" role="status" aria-label="Loading">
  <div class="nuda-morph-blob__shape"></div>
</div>

/* Morph Blob Loader
   Shape morphing between organic forms.
   Customize: --blob-size, --blob-gradient-start, --blob-gradient-end */

.nuda-morph-blob {
  --blob-size: 48px;
  --blob-gradient-start: #f472b6;
  --blob-gradient-end: #a78bfa;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-morph-blob__shape {
  width: var(--blob-size);
  height: var(--blob-size);
  background: linear-gradient(135deg, var(--blob-gradient-start), var(--blob-gradient-end));
  animation: nuda-morph-blob 3s ease-in-out infinite;
  will-change: border-radius, transform;
}

@keyframes nuda-morph-blob {
  0% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    transform: rotate(0deg);
  }
  33% {
    border-radius: 60% 40% 30% 70% / 40% 60% 50% 50%;
    transform: rotate(120deg);
  }
  66% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: rotate(240deg);
  }
  100% {
    border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-morph-blob__shape {
    animation: none;
    border-radius: 50%;
    opacity: 0.7;
  }
}