Morphing Dialog

A card that expands into a full-screen modal with a shared-layout morphing animation, opening its image and title into an expanded detail view.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Morphing Dialog to your project and fits it to your theme.

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

export default function MorphingDialogDemo() {
  return (
    <div className="flex min-h-[500px] w-full items-center justify-center py-10">
      <MorphingDialog />
    </div>
  );
}