Animated Modal Component

This code implements a visually appealing and interactive modal component using Framer Motion for animations and React for state management. It addresses the need for a user-friendly way to present additional information or confirmations to the user without disrupting the main workflow. The modal is triggered by a button and features a smooth animation on appearance and disappearance. Here's a step-by-step breakdown: 1. **State Management:** The `useState` hook manages the modal's visibility (`isOpen`). The `ExampleWrapper` component contains a button that toggles this state. 2. **Modal Structure:** The `SpringModal` component renders the modal itself. `AnimatePresence` ensures that Framer Motion animations only run when the modal's visibility changes, improving performance. 3. **Animations:** `motion.div` from Framer Motion is used to animate the modal's entry and exit. The `initial`, `animate`, and `exit` properties define the animation states (opacity and scaling). The modal also features a rotating icon animation. 4. **Styling:** The code uses inline styles with Tailwind CSS for styling the modal and its elements. The modal includes a background overlay with backdrop blur and a gradient background. 5. **Interaction:** Clicking anywhere on the overlay closes the modal. Clicking within the modal's content area does not trigger closure, ensuring focus remains on the content. The modal contains two buttons to allow the user to acknowledge the message. 6. **Icons:** React Icons are used to include an alert icon for visual appeal. This component can be applied in various scenarios, such as displaying alerts, confirmations, additional information, or settings panels. It enhances the user experience by providing smooth, visually engaging interactions.

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

import ExampleWrapper from "@/components/ui/animated-modal-component";

export default function DemoOne() {
  return <ExampleWrapper />;
}