Morphing Dialog

New

A dialog component with smooth morphing animations powered by the native View Transitions API. Supports click-outside and Escape key for closing.

Browser Support

View Transitions API is supported in Chrome 111+, Edge 111+, Safari 18+. Firefox support is in development. The component gracefully degrades to instant transitions in unsupported browsers.

Preview

Click on the card to open the dialog with a morphing animation.

Swiss Alps

Explore the majestic mountains

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/morphing-dialog

Usage

import {
  MorphingDialog,
  MorphingDialogTrigger,
  MorphingDialogContainer,
  MorphingDialogContent,
  MorphingDialogImage,
  MorphingDialogTitle,
  MorphingDialogSubtitle,
  MorphingDialogDescription,
  MorphingDialogClose,
} from "@/components/ui/morphing-dialog"

export default function Example() {
  return (
    <MorphingDialog>
      <MorphingDialogTrigger>
        <MorphingDialogImage src="/image.jpg" alt="..." />
        <MorphingDialogTitle>Title</MorphingDialogTitle>
        <MorphingDialogSubtitle>Subtitle</MorphingDialogSubtitle>
      </MorphingDialogTrigger>

      <MorphingDialogContainer>
        <MorphingDialogContent>
          <MorphingDialogClose />
          <MorphingDialogImage src="/image.jpg" alt="..." />
          <MorphingDialogTitle>Title</MorphingDialogTitle>
          <MorphingDialogSubtitle>Subtitle</MorphingDialogSubtitle>
          <MorphingDialogDescription>
            Full description here...
          </MorphingDialogDescription>
        </MorphingDialogContent>
      </MorphingDialogContainer>
    </MorphingDialog>
  )
}

Examples

Profile Card

Use with profile cards for a smooth expansion effect

John Doe

Software Engineer

Components

Component	Description
MorphingDialog	Root component, manages state
MorphingDialogTrigger	Clickable area that opens the dialog
MorphingDialogContainer	Portal container with backdrop
MorphingDialogContent	Dialog content wrapper
MorphingDialogImage	Image with view transition
MorphingDialogTitle	Title with view transition
MorphingDialogSubtitle	Subtitle with view transition
MorphingDialogDescription	Description content
MorphingDialogClose	Close button (X icon)

Features

Native View Transitions API — no external animation libraries
Click-outside to close — click backdrop to dismiss
Escape key support — keyboard accessible
Focus trap — focus stays within dialog
Body scroll lock — prevents background scrolling
Graceful degradation — works without animations in older browsers
Reduced motion support — respects prefers-reduced-motion