Slide Page

<div class="nuda-vt-slide">
  <div class="nuda-vt-slide__viewport">
    <div class="nuda-vt-slide__page" data-page="1">Page 1</div>
  </div>
  <button type="button" class="nuda-vt-slide__btn">Next page</button>
</div>

/* Slide Page
   Directional page slide: the old page exits left, the new one enters from the
   right via custom keyframes on the view-transition pseudo-elements.
   Customize: keyframe directions, animation-duration */

.nuda-vt-slide__viewport {
  width: 240px;
  height: 120px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.nuda-vt-slide__page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  color: #e4ff54;
  view-transition-name: vt-slide-page;
}

.nuda-vt-slide__page[data-page="1"] { background: #18181b; }
.nuda-vt-slide__page[data-page="2"] { background: #1f2937; }

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

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

@keyframes vt-slide-out-left { to { transform: translateX(-100%); } }
@keyframes vt-slide-in-right { from { transform: translateX(100%); } }

::view-transition-old(vt-slide-page) {
  animation: vt-slide-out-left 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
::view-transition-new(vt-slide-page) {
  animation: vt-slide-in-right 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

/* Slide Page — vanilla JS
   Advances the page inside a view transition, instant fallback otherwise. */

(function () {
  document.querySelectorAll(".nuda-vt-slide").forEach(function (root) {
    var page = root.querySelector(".nuda-vt-slide__page");
    var btn = root.querySelector(".nuda-vt-slide__btn");

    function doSwap() {
      var next = page.dataset.page === "1" ? "2" : "1";
      page.dataset.page = next;
      page.textContent = "Page " + next;
    }

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