Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to create interactive animations featuring a key and a vial, transforming user interactions into visually engaging experiences. The application will allow users to witness the key unlocking a portal and the vial pouring a flower, enhancing user engagement through animations and clicks.

## CORE FEATURES
1. **Animated Key Interaction**: When the key is clicked, it will animate upwards, revealing a keyhole. The key will then appear to fit into the keyhole, creating a visual of unlocking a portal.
2. **Portal Animation**: Upon unlocking, a portal animation will open, providing a dynamic transition that captivates the user's attention.
3. **Vial Pouring Animation**: The vial will pour a pink liquid from its tip, centered on the screen. This liquid will transform into a flower, enhancing the visual experience.
4. **Flower Growth and Interaction**: Each petal of the flower will triple in size and surround a central white dot. Each petal will be a separate, clickable item, allowing for user interaction.
5. **Responsive Design**: The entire application will be designed to function seamlessly across various devices, ensuring a consistent user experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist, emphasizing clean and simple design with ample white space to focus on the animations and interactions.
- **Color Mode**: Light theme with dark text on light backgrounds to maintain readability and simplicity.
- **Layout**: The layout will feature a centered focal point for the key and vial animations, with a clear visual hierarchy guiding users through the experience. The key will be prominently placed, with the vial and flower animations below it.
- **Typography**: Use a sans-serif font such as "Roboto" or "Open Sans" to ensure clarity and readability. Headings will be bold and larger, while body text will be regular weight for ease of reading.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building the interactive components and managing state.
- **Styling**: Tailwind CSS for rapid styling and responsiveness.
- **UI Components**: Utilize shadcn/ui for pre-built components that align with the minimalist design principles.
- **State Management**: Use React's Context API for managing state across animations and interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Key Component**: Develop the animated key component, implementing click events to trigger the upward animation and keyhole reveal.
3. **Develop Portal Animation**: Create a portal component that animates open upon the key's interaction, detailing the transition effects.
4. **Build Vial Component**: Construct the vial component to pour the pink liquid, ensuring it is centrally positioned and animates into a flower.
5. **Flower Component**: Design the flower with separate clickable petals, using state management to handle clicks and interactions.
6. **Responsive Design**: Implement responsive design techniques to ensure all animations and components function smoothly on various screen sizes.

## USER EXPERIENCE
Users will interact with the application by clicking on the key, initiating a series of animations that visually narrate the unlocking of a portal and the transformation of a vial into a flower. Each petal will provide an interactive element, allowing users to engage further with the content. The minimalist design ensures that these interactions are the focal point, creating a captivating experience that is both intuitive and enjoyable.