Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to evoke the emotional experience of a cinematic music video. It presents a heartfelt apology letter through synchronized lyric-style text animations over a looping background video, creating a deeply immersive and moving atmosphere.

## CORE FEATURES
1. **Full-Screen Background Video**: A looping cinematic video that plays in the background, creating an emotional visual experience.
2. **Lyric Animation**: Each sentence of the apology letter appears sequentially with soft fade-ins and fade-outs, mimicking the style of synchronized song lyrics.
3. **Music Playback**: A background music feature that plays softly, with controls for mute/unmute and volume adjustments.
4. **Interactive Elements**: A prompt to click to begin the experience if autoplay is blocked, enhancing user engagement.
5. **Elegant Visual Effects**: Floating dust particles, slow-moving light rays, gentle vignette, and subtle parallax movement to maintain a cinematic feel.
6. **Final Message Display**: After the last lyric, a poignant message about stories living in hearts appears, encouraging reflection.

## 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 centers around the full-screen background video with text overlay that appears and disappears in the center, maintaining a vertical and horizontal alignment for optimal readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specifically required but can be implemented using React Context or Zustand if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and Tailwind CSS configuration.
2. **Background Video**: Integrate the full-screen background video component with controls for playback.
3. **Text Animation**: Develop a text component that synchronizes the display of each sentence with specified fade-in and fade-out timings.
4. **Music Controls**: Implement music playback functionality with a volume slider and mute/unmute button.
5. **Visual Effects**: Add floating dust particles, light rays, and other described visual effects to enhance the cinematic experience.
6. **Final Message**: Create a transition effect for the final message after the last sentence of the apology letter.

## USER EXPERIENCE
Users will experience the landing page as a fluid musical journey. Upon loading, the background video captivates the viewer, while the apology text is presented in a lyrical format that encourages reflection and emotional engagement. Users can control the music and interact with the page by clicking to start if autoplay is blocked. The overall experience is designed to be slow-paced, ensuring that each word is absorbed, culminating in a thoughtful final message that resonates with the audience.

This prompt encapsulates your vision for a cinematic lyric-style apology website, focusing on emotional impact and user engagement through minimalist design and thoughtful interaction.