Lovable Prompt Creator - AI Prompt Generator

## # ## ## `code`## APPLICATION OVERVIEW
The Hand Gesture Particles Control App is a minimalist web application designed to allow users to control particle effects using hand gestures via their laptop's camera. This innovative application focuses on providing an intuitive and engaging user experience while showcasing the unique interaction capabilities of hand gestures in a clean and simple interface.

## CORE FEATURES
1. **Gesture Recognition**: Utilize real-time hand gesture detection to control particle effects, enabling users to manipulate particles seamlessly.
2. **Customizable Particle Effects**: Allow users to choose from various particle styles, colors, and behaviors, enhancing the visual experience.
3. **Live Preview**: Provide a live preview of the particle effects as users perform gestures, offering immediate feedback on their actions.
4. **User Settings**: Include a settings panel where users can adjust sensitivity, toggle effects, and calibrate gesture recognition for optimal performance.
5. **Tutorial Mode**: Offer an interactive tutorial that guides users through the gesture controls and particle customization features.
6. **Responsive Design**: Ensure the application is fully responsive, providing a consistent experience across different laptop sizes and resolutions.

## 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**: The main layout will consist of a central interactive area for gesture recognition, flanked by a settings panel on one side and a tutorial panel on the other. The header will contain the application title and navigation links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Zustand or Context API for managing application state

## IMPLEMENTATION STEPS
1. **Set up the React environment**: Initialize a new React app using Create React App with TypeScript.
2. **Install dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create main components**:
   - Implement the Gesture Recognition component that utilizes a library for hand tracking.
   - Create the Particle Effects component that visualizes the particles based on gesture inputs.
   - Develop the Settings and Tutorial components.
4. **Integrate state management**: Use Zustand or Context API to manage the application state, including user settings and particle configurations.
5. **Style the application**: Apply Tailwind CSS classes to achieve the minimalist design, focusing on white space and typography.
6. **Test gestures**: Implement gesture recognition logic and ensure it reacts correctly to user inputs for particle control.
7. **Optimize for performance**: Ensure that the app runs smoothly and adjusts to varying laptop specifications.
8. **Conduct user testing**: Gather feedback from users to refine features and enhance usability before launch.

## USER EXPERIENCE
Users will interact with the application by performing gestures in front of their laptop camera. As they move their hands, the application will recognize their gestures and manipulate the particle effects in real-time. The settings panel allows users to adjust parameters like sensitivity and effect types while the tutorial mode provides guidance. The clean and straightforward layout ensures users can focus on their gestures and the resulting visual effects without distractions. Responsive design guarantees that users have an optimal experience across various devices.