Cross Fade

<div class="nuda-vt-crossfade">
  <div class="nuda-vt-crossfade__stage" data-state="a">
    <span class="nuda-vt-crossfade__panel">State A</span>
  </div>
  <button type="button" class="nuda-vt-crossfade__btn">Swap state</button>
</div>

/* Cross Fade
   Default cross-fade between two states using the View Transitions API.
   The named element fades old -> new automatically.
   Customize: --vt-accent, animation-duration */

.nuda-vt-crossfade__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 96px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Opt this element into its own snapshot for the transition. */
  view-transition-name: vt-crossfade-stage;
}

.nuda-vt-crossfade__stage[data-state="a"] { background: #18181b; }
.nuda-vt-crossfade__stage[data-state="b"] { background: #1f2937; }

.nuda-vt-crossfade__panel {
  --vt-accent: #e4ff54;
  font-size: 1rem;
  font-weight: 700;
  color: var(--vt-accent);
}

.nuda-vt-crossfade__btn {
  background: #e4ff54;
  color: #09090b;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

.nuda-vt-crossfade__btn:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 2px;
}

/* Tune the cross-fade. The UA default is already a fade; this controls timing. */
::view-transition-old(vt-crossfade-stage),
::view-transition-new(vt-crossfade-stage) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(vt-crossfade-stage),
  ::view-transition-new(vt-crossfade-stage) { animation: none; }
}

/* Cross Fade — vanilla JS
   Swaps state inside a view transition with an instant fallback. */

(function () {
  document.querySelectorAll(".nuda-vt-crossfade").forEach(function (root) {
    var stage = root.querySelector(".nuda-vt-crossfade__stage");
    var panel = root.querySelector(".nuda-vt-crossfade__panel");
    var btn = root.querySelector(".nuda-vt-crossfade__btn");

    function doSwap() {
      var next = stage.dataset.state === "a" ? "b" : "a";
      stage.dataset.state = next;
      panel.textContent = next === "a" ? "State A" : "State B";
    }

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