Shared Element

<div class="nuda-vt-shared">
  <div class="nuda-vt-shared__track" data-pos="left">
    <span class="nuda-vt-shared__dot"></span>
  </div>
  <button type="button" class="nuda-vt-shared__btn">Move element</button>
</div>

/* Shared Element
   The dot has a stable view-transition-name, so the API morphs it from its old
   position/size to the new one — even across DOM changes.
   Customize: --vt-accent, the easing on the group */

.nuda-vt-shared__track {
  display: flex;
  align-items: center;
  width: 220px;
  height: 64px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #18181b;
}

.nuda-vt-shared__track[data-pos="left"]  { justify-content: flex-start; }
.nuda-vt-shared__track[data-pos="right"] { justify-content: flex-end; }

.nuda-vt-shared__dot {
  --vt-accent: #e4ff54;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vt-accent);
  /* Stable name => the group animates position + size between snapshots. */
  view-transition-name: vt-shared-dot;
}

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

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

/* The group pseudo controls the morph (transform/size interpolation). */
::view-transition-group(vt-shared-dot) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(vt-shared-dot) { animation: none; }
}

/* Shared Element — vanilla JS
   Toggles the dot's container alignment inside a view transition. */

(function () {
  document.querySelectorAll(".nuda-vt-shared").forEach(function (root) {
    var track = root.querySelector(".nuda-vt-shared__track");
    var btn = root.querySelector(".nuda-vt-shared__btn");

    function doSwap() {
      track.dataset.pos = track.dataset.pos === "left" ? "right" : "left";
    }

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