Card Stack Push

<div class="nuda-vt2-card-stack">
  <div class="nuda-vt2-card-stack__stage" data-state="a">
    <span class="nuda-vt2-card-stack__label">Card 1</span>
  </div>
  <button type="button" class="nuda-vt2-card-stack__btn">Push card</button>
</div>

/* Card Stack Push — vanilla JS
   The old card recedes (scales down, dims, nudges back) while the new card
   pushes up from below, like a notification stack advancing one item. */

(function () {
  document.querySelectorAll(".nuda-vt2-card-stack").forEach(function (root) {
    var stage = root.querySelector(".nuda-vt2-card-stack__stage");
    var label = root.querySelector(".nuda-vt2-card-stack__label");
    var btn = root.querySelector(".nuda-vt2-card-stack__btn");

    function doSwap() {
      var next = stage.dataset.state === "a" ? "b" : "a";
      stage.dataset.state = next;
      label.textContent = next === "a" ? "Card 1" : "Card 2";
    }

    btn.addEventListener("click", function () {
      if (!document.startViewTransition) { doSwap(); return; }
      document.startViewTransition(doSwap);
    });
  });
})();

.nuda-vt2-card-stack-demo {
  padding: .5rem;
}

.nuda-vt2-card-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.nuda-vt2-card-stack__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 80px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  view-transition-name: vt2-card-stack-stage;
}

.nuda-vt2-card-stack__stage[data-state="a"] {
  background: #18181b;
}

.nuda-vt2-card-stack__stage[data-state="b"] {
  background: #1f2937;
}

.nuda-vt2-card-stack__label {
  font-size: .78rem;
  font-weight: 700;
  color: #e4ff54;
}

.nuda-vt2-card-stack__btn {
  background: #e4ff54;
  color: #09090b;
  border: none;
  border-radius: 8px;
  padding: .4rem .8rem;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}

.nuda-vt2-card-stack__btn:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

@keyframes _nuda-vt2cardpushout {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(-10%) scale(.94);
    opacity: .5;
  }
}

@keyframes _nuda-vt2cardpushin {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

::view-transition-old(vt2-card-stack-stage) {
  animation: _nuda-vt2cardpushout .4s cubic-bezier(.4,0,.2,1) both;
}

::view-transition-new(vt2-card-stack-stage) {
  animation: _nuda-vt2cardpushin .4s cubic-bezier(.4,0,.2,1) both;
}

@supports not (view-transition-name:none) {
  .nuda-vt2-card-stack__stage {
    transition: background-color .3s ease;
  }
}

@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(vt2-card-stack-stage),::view-transition-new(vt2-card-stack-stage) {
    animation: none;
  }
  .nuda-vt2-card-stack__stage {
    transition: none;
  }
}