View Transitions Over JS Libraries

Prefer View Transitions API over JavaScript animation libraries for page transitions.

Incorrect (JS-based transition):

import { motion } from "motion/react";

function ImageLightbox() {
  return (
    <motion.img layoutId="hero" />
  );
}

Correct (native View Transition):

function openLightbox(img: HTMLImageElement) {
  img.style.viewTransitionName = "hero";
  document.startViewTransition(() => {
    // Native browser transition
  });
}