Morphing dialogPro

• Galleries, collections and feature cards where the detail view should feel connected to the card.

• Forms and confirmations: use a dialog.
• Lists of dozens of cards on low-end devices.

Import it from @/components/ui/morphing-dialog after installing.

import { MorphingDialog } from "@/components/ui/morphing-dialog";

export function Collection() {
  return (
    <MorphingDialog title="Aurora" subtitle="24 pieces" image="/covers/aurora.jpg">
      <p>Soft gradients and glass surfaces…</p>
    </MorphingDialog>
  );
}

• A real modal: aria-modal, labelled by the title, focus trapped and returned to the card.
• Page scroll is locked while open.

• Frame, cover, title and subtitle share layout IDs and fly between card and dialog (spring, 500ms).
• Body text fades up after the morph.
• Instant under reduced motion.

• Cards up to 272px; the dialog is up to 512px and scrolls inside on short screens.

• Dialog content mounts only when open.

• Each instance gets its own layout IDs, so many can share a page.