Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The "Midnight Space" web application is a modern aesthetic platform designed for users to express their midnight thoughts in a serene environment. Utilizing a calming dark theme with glassmorphism design principles, this app provides a peaceful space for reflection and creativity, featuring soundscapes to enhance the user experience.

## CORE FEATURES
1. **Centered Text Input**: A prominent input area allows users to freely write their thoughts with a placeholder that invites contemplation.
2. **Release Button**: A button that, when clicked, animates the text input into particles, symbolizing the release of thoughts.
3. **Sound Toggle**: An optional toggle button for soft background sounds, such as rain or lofi music, enhancing the calming atmosphere.
4. **Responsive Design**: A mobile-first approach ensures accessibility and usability across various devices, maintaining a clean vertical layout.
5. **Floating Particles**: Subtle animations with floating star particles or soft light dots create a serene background experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: A centered container with a header at the top, large title text “Midnight Space”, small subtitle “A place for your midnight thoughts”, a centered text input area, and the release button directly below, alongside a small sound toggle button in the corner.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but consider using React Context or Zustand for managing sound state and text input.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for UI components.
2. **Create Layout Structure**: Implement a centered container using Tailwind classes for flexbox to center the elements vertically and horizontally.
3. **Add Typography**: Use Inter font for all headings and body text. Set up Tailwind configuration to include custom fonts.
4. **Implement Input Area**: Create a text input component with placeholder text that fits the overall aesthetic and apply the rounded borders.
5. **Add Release Button**: Implement the button with an onClick event that triggers the dissolve animation for the text input.
6. **Sound Toggle Functionality**: Create a toggle component that manages the background sound settings and integrates sound playback.
7. **Add Background Animation**: Use CSS animations or a library for the floating particles effect in the background.
8. **Test Responsiveness**: Ensure the layout adjusts correctly for different screen sizes, focusing on mobile usability.

## USER EXPERIENCE
Users will enter the app and immediately see the calming layout with the title and subtitle. They can type their thoughts into the input area and click the "Release" button, which will trigger the text to dissolve into particles, creating a visual representation of releasing feelings. The sound toggle allows them to customize their auditory experience, enhancing the calming atmosphere. The entire interface should feel smooth with subtle animations, inviting users to return whenever they need a peaceful escape.