demo · v137

view-transition-name: match-element

Six cards, one CSS rule: view-transition-name: match-element. The browser auto-generates a stable identity per element so shuffles morph the right card to the right destination — no per-card naming, no nth-child hacks.

Heads upYou also need document.startViewTransition() support. The probe below tells you exactly what's wired.
probing…
A
B
C
D
E
F

the code

.vcard { view-transition-name: match-element; }

shuffleBtn.addEventListener("click", () => {
  document.startViewTransition(() => reorder(cards));
});

see also