Morphing Modal

Animated modal with backdrop blur and layoutId

Button Triggers

Card Triggers

Animations - Card

Smooth morphing transitions

Customizable

Flexible styling options

Accessible

Built with a11y in mind

Custom Trigger

Image Gallery

Modal Dialog

A beautiful, accessible modal dialog component with smooth animations, backdrop blur effects, and comprehensive interaction handling. Perfect for forms, confirmations, content overlays, and any content that needs to be displayed in a focused context.

Features

Smooth Animations: Fluid enter/exit animations with Framer Motion
Backdrop Blur: Beautiful backdrop blur effect for focus
Keyboard Navigation: Full keyboard support (Escape to close, Tab navigation)
Focus Management: Automatic focus trapping and restoration
Accessible: Proper ARIA labels and screen reader support
Responsive: Works perfectly on all screen sizes
Customizable: Easy to modify styling, animations, and behavior

Installation

npm install motion/react lucide-react

Basic Usage

import {
  MorphingModal,
  ModalButton,
} from "@/components/snippets/morphing-modal/Demo";

function MyComponent() {
  return (
    <MorphingModal
      title="Primary Modal"
      trigger={<ModalButton variant="primary">Open Primary Modal</ModalButton>}
    >
      <div className="space-y-4">
        <p className="text-muted-foreground">
          This is a primary modal with a sleek design. The button morphs
          seamlessly into this modal container using Framer Motion's layoutId.
        </p>
      </div>
    </MorphingModal>
  );
}

Props

Prop	Type	Default	Description
trigger	ReactNode	-	The element that triggers the modal (button, card, etc.)
title	string	-	Modal title for accessibility and header
children	ReactNode	-	Modal content
onClose	function	-	Function called when modal should close
className	string	-	Additional CSS classes for the wrapper
triggerClassName	string	-	Additional classes for the trigger
modalClassName	string	-	Additional classes for the modal container
overlayClassName	string	-	Additional classes for the overlay/backdrop

Examples

Button Trigger

<MorphingModal
  title="Primary Modal"
  trigger={<ModalButton variant="primary">Open Primary Modal</ModalButton>}
>
  <div className="space-y-4">
    <p className="text-muted-foreground">
      This is a primary modal with a sleek design. The button morphs seamlessly
      into this modal container using Framer Motion's layoutId.
    </p>
  </div>
</MorphingModal>

Card Trigger

<MorphingModal
  title="Feature Details"
  trigger={
    <ModalCard
      title="Animations"
      description="Smooth morphing transitions"
      icon={<IconLayout2 />}
    />
  }
>
  <div className="space-y-4">
    <p className="text-muted-foreground">
      Our animation system uses Framer Motion's layoutId to create seamless
      morphing effects between any trigger element and the modal.
    </p>
  </div>
</MorphingModal>

Custom Trigger

<MorphingModal
  title="Image Gallery"
  trigger={
    <div className="group relative h-40 w-64 cursor-pointer overflow-hidden rounded-2xl bg-gradient-to-br from-pink-400 to-purple-600">
      <div className="absolute inset-0 bg-black/20 transition-colors group-hover:bg-black/10"></div>
      <div className="absolute inset-0 flex items-center justify-center text-white">
        <div className="text-center">
          <div className="mb-2 text-3xl">🖼️</div>
          <div className="font-medium">View Gallery</div>
        </div>
      </div>
    </div>
  }
  modalClassName="max-w-2xl"
>
  <div className="space-y-6">
    <div className="grid grid-cols-2 gap-4">
      {[1, 2, 3, 4].map((i) => (
        <div
          key={i}
          className="flex aspect-square items-center justify-center rounded-xl bg-gray-100"
        >
          <span className="text-2xl text-gray-400">🖼️</span>
        </div>
      ))}
    </div>
    <p className="text-center text-muted-foreground">
      Any element can be used as a trigger for the morphing modal animation.
    </p>
  </div>
</MorphingModal>

Best Practices

Clear Purpose: Use modals for focused, important interactions
Escape Key: Always allow closing with Escape key
Focus Management: Ensure proper focus trapping and restoration
Accessibility: Provide proper ARIA labels and screen reader support
Mobile Optimization: Test on mobile devices for optimal experience

Accessibility

ARIA Labels: Proper labels for screen readers
Focus Trapping: Automatic focus management within modal
Keyboard Navigation: Full keyboard support
Screen Reader Announcements: Proper announcements for modal state changes

Performance Tips

Conditional Rendering: Only render modal content when open
Animation Optimization: Use CSS transforms for better performance
Memory Management: Clean up event listeners and timeouts
Lazy Loading: Load heavy modal content only when needed

PreviousAnimated Menu

NextNotifications