Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application that creates an engaging interactive experience by animating a character performing a celebratory gesture in response to a match. The main purpose is to provide a unique and captivating visual representation, enhancing user engagement through animation while maintaining a minimalist design.

## CORE FEATURES
1. **Animated Character**: A central feature where the character (girl or boy) performs an animated gesture when they notice the camera, creating an interactive experience.
2. **Interactive Video Playback**: The application will support video playback that integrates seamlessly with the character's animation, allowing users to watch the match while interacting with the character.
3. **User Controls**: Simple controls for users to play, pause, and replay the video, ensuring a smooth viewing experience.
4. **Responsive Design**: The application will be fully responsive, ensuring optimal viewing on various devices and screen sizes.
5. **Minimalist UI**: A clean and simple user interface focusing on the animation and video, with minimal distractions.

## 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 feature a centered video player with the animated character overlaying the video. Below the video, there will be user control buttons (play, pause, replay) arranged horizontally.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React's built-in state management for handling video playback and animation states.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Create a new React application using Create React App with TypeScript.
2. **Install dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create the video player component**: Implement a video player that supports playback controls.
4. **Design the animated character component**: Use CSS animations or a library like Framer Motion to create the celebratory gesture animation.
5. **Integrate components**: Overlay the animated character on the video player and ensure they interact seamlessly.
6. **Implement user controls**: Add buttons for play, pause, and replay functionalities.
7. **Test responsiveness**: Ensure the application is responsive across various devices and screen sizes.
8. **Deploy the application**: Use a platform like Vercel or Netlify for deployment.

## USER EXPERIENCE
Users will be greeted by a minimalist interface featuring a video player at the center of the screen. As the video plays, the character will perform the celebratory gesture when they notice the camera. Users can easily control the video playback with buttons located beneath the video, and the overall experience is designed to be smooth and engaging, drawing attention to the animation and video content. The clean design ensures that users remain focused on the interaction without unnecessary distractions.