Shared element transition

import { useState } from 'react';
import { Dialog } from '@base-ui/react/dialog';
import { AnimatePresence, motion } from 'motion/react';

const photos = [
  { id: 'harbor', title: 'Harbor at dawn' },
  { id: 'dunes', title: 'Desert dunes' },
  { id: 'lagoon', title: 'Glacier lagoon' }
];
type Photo = (typeof photos)[number];

// The thumbnail and the large image share a layoutId, so Motion flies one into the other.
function PhotoImage({ photo }: { photo: Photo }) {
  return (
    <motion.img
      layoutId={photo.id}
      layoutCrossfade={false}
      transition={{ type: 'spring', bounce: 0, duration: 0.4 }}
      src={`/photos/${photo.id}.jpg`}
      alt={photo.title}
      style={{ borderRadius: 12 }}
      className='aspect-square w-full object-cover'
    />
  );
}

export function PhotoGallery() {
  const [open, setOpen] = useState<Photo | null>(null);
  return (
    <Dialog.Root open={open !== null} onOpenChange={() => setOpen(null)}>
      <div className='grid w-96 grid-cols-3 gap-3'>
        {photos.map((photo) => (
          <button key={photo.id} type='button' onClick={() => setOpen(photo)}>
            <PhotoImage photo={photo} />
          </button>
        ))}
      </div>
      <AnimatePresence>
        {open && (
          <Dialog.Portal keepMounted>
            <Dialog.Backdrop className='fixed inset-0 bg-black/40 transition-opacity duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0' />
            {/* The exit fade also tells Base UI to wait before hiding the popup. */}
            <Dialog.Popup
              render={<motion.div exit={{ opacity: 0 }} />}
              className='fixed top-1/2 left-1/2 w-80 max-w-[calc(100vw-2rem)] -translate-1/2'
            >
              <PhotoImage photo={open} />
              <div className='mt-2 flex items-center justify-between rounded-xl bg-background p-4 transition-[opacity,translate] duration-300 starting:translate-y-2 starting:opacity-0'>
                <Dialog.Title className='font-medium'>
                  {open.title}
                </Dialog.Title>
                <Dialog.Close className='text-sm underline'>Close</Dialog.Close>
              </div>
            </Dialog.Popup>
          </Dialog.Portal>
        )}
      </AnimatePresence>
    </Dialog.Root>
  );
}