Tab Morph

<div class="nuda-vt-tab">
  <div class="nuda-vt-tab__bar" role="tablist" aria-label="Sections">
    <button type="button" role="tab" class="nuda-vt-tab__tab" aria-selected="true">One</button>
    <button type="button" role="tab" class="nuda-vt-tab__tab" aria-selected="false">Two</button>
  </div>
  <div class="nuda-vt-tab__panel" role="tabpanel">Content One</div>
</div>

/* Tab Morph
   The active-tab pill carries a shared view-transition-name so it slides between
   tabs; the panel content cross-fades. Both are driven by one transition.
   Customize: --vt-accent, animation-duration */

.nuda-vt-tab__bar {
  display: flex;
  gap: 4px;
  background: #18181b;
  border-radius: 10px;
  padding: 4px;
}

.nuda-vt-tab__tab {
  --vt-accent: #e4ff54;
  position: relative;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 0.4rem 0.9rem;
  font-weight: 700;
  color: #888;
  cursor: pointer;
}

.nuda-vt-tab__tab[aria-selected="true"] { color: #09090b; }

/* Only the selected pill exists at a time, so its name moves between tabs. */
.nuda-vt-tab__tab[aria-selected="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vt-accent);
  border-radius: 7px;
  z-index: -1;
  view-transition-name: vt-tab-indicator;
}

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

.nuda-vt-tab__panel {
  margin-top: 0.6rem;
  font-weight: 700;
  color: #e4ff54;
  view-transition-name: vt-tab-panel;
}

::view-transition-group(vt-tab-indicator) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(vt-tab-panel),
::view-transition-new(vt-tab-panel) { animation-duration: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(vt-tab-indicator),
  ::view-transition-old(vt-tab-panel),
  ::view-transition-new(vt-tab-panel) { animation: none; }
}

/* Tab Morph — vanilla JS
   Switches the active tab + panel inside a view transition. */

(function () {
  document.querySelectorAll(".nuda-vt-tab").forEach(function (root) {
    var tabs = root.querySelectorAll(".nuda-vt-tab__tab");
    var panel = root.querySelector(".nuda-vt-tab__panel");

    tabs.forEach(function (tab) {
      tab.addEventListener("click", function () {
        var label = tab.textContent;

        function doSwap() {
          tabs.forEach(function (t) {
            t.setAttribute("aria-selected", String(t === tab));
          });
          panel.textContent = "Content " + label;
        }

        if (!document.startViewTransition) { doSwap(); return; }
        document.startViewTransition(doSwap);
      });
    });
  });
})();