Gallery Filter Morph

<div class="nuda-galfilt">
  <div class="nuda-galfilt__tabs">
    <span>All</span>
    <span class="is-on">Photos</span>
    <span>Videos</span>
  </div>
  <div class="nuda-galfilt__grid">
    <div class="nuda-galfilt__cell" style="background:#ff5e7a"></div>
    <!-- More cells -->
  </div>
</div>

.nuda-galfilt {
  width: 100%;
  max-width: 240px;
}

.nuda-galfilt__tabs {
  display: inline-flex;
  gap: 14px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #63636e;
  font-size: 11px;
  font-weight: 500;
}

.nuda-galfilt__tabs span {
  position: relative;
  cursor: pointer;
  padding-bottom: 6px;
  transition: color .25s;
}

.nuda-galfilt__tabs span:hover {
  color: #fafafa;
}

.nuda-galfilt__tabs span.is-on {
  color: #e4ff54;
}

.nuda-galfilt__tabs span.is-on::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: #e4ff54;
  border-radius: 99px;
  animation: _filtUnder .35s cubic-bezier(.16,1,.3,1);
}

.nuda-galfilt__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 4px;
}

.nuda-galfilt__cell {
  height: 50px;
  border-radius: 6px;
  animation: _filtIn .55s cubic-bezier(.16,1,.3,1) both;
  transition: transform .25s;
}

.nuda-galfilt__cell:hover {
  transform: scale(.94);
}

@keyframes _filtUnder {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes _filtIn {
  from {
    opacity: 0;
    transform: scale(.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-galfilt__cell {
    animation: none;
  }
}