Metaball Merge

<!-- Metaball Merge — gooey blend via blur + contrast filter -->
<div class="nuda-ms2-metaball-merge" role="img" aria-label="Two blobs merging and separating">
  <div class="nuda-ms2-metaball-merge__group" aria-hidden="true">
    <span class="nuda-ms2-metaball-merge__dot nuda-ms2-metaball-merge__dot--a"></span>
    <span class="nuda-ms2-metaball-merge__dot nuda-ms2-metaball-merge__dot--b"></span>
  </div>
</div>

.nuda-ms2-metaball-merge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 100px;
  background: #09090b;
  border-radius: 12px;
  overflow: hidden;
}

.nuda-ms2-metaball-merge__group {
  position: relative;
  width: 100px;
  height: 60px;
  filter: blur(8px) contrast(24);
  will-change: filter;
}

.nuda-ms2-metaball-merge__dot {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e4ff54;
  will-change: transform;
}

.nuda-ms2-metaball-merge__dot--a {
  left: 30%;
  transform: translate(-50%,-50%);
  animation: _nuda-ms2MetaballA 3s ease-in-out infinite;
}

.nuda-ms2-metaball-merge__dot--b {
  left: 70%;
  transform: translate(-50%,-50%);
  animation: _nuda-ms2MetaballB 3s ease-in-out infinite;
}

@keyframes _nuda-ms2MetaballA {
  0%,100% {
    transform: translate(-50%,-50%) translateX(0);
  }
  50% {
    transform: translate(-50%,-50%) translateX(20px);
  }
}

@keyframes _nuda-ms2MetaballB {
  0%,100% {
    transform: translate(-50%,-50%) translateX(0);
  }
  50% {
    transform: translate(-50%,-50%) translateX(-20px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-ms2-metaball-merge__dot--a,.nuda-ms2-metaball-merge__dot--b {
    animation: none;
    transform: translate(-50%,-50%);
  }
}