Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a scroll-driven frame animation website using Three.js. The website will feature a unique interactive experience where the video plays forward as the user scrolls down and reverses when they scroll up. The design will focus on a minimalist aesthetic with a clean gradient background and a prominent hero headline to draw attention.

## CORE FEATURES
1. **Scroll-Driven Animation**: The animation progresses as users scroll down and reverses with upward scrolling, providing an engaging visual experience.
2. **Hero Headline**: A striking headline at the top of the page that introduces the animation and captures user interest immediately.
3. **Gradient Background**: A visually appealing gradient background that enhances the overall aesthetic without distracting from the main content.
4. **Responsive Design**: The website will be fully responsive, ensuring a seamless experience across various devices and screen sizes.
5. **Minimalist Navigation**: Simple navigation that allows users to easily return to the top or explore more about the animation without clutter.

## 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 full-width hero section at the top, followed by the animated content area, and a simple footer for additional links or contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this project as it focuses primarily on animation and user interaction.

## IMPLEMENTATION STEPS
1. **Set Up React Project**: Create a new React project with TypeScript using Create React App or a similar tool.
2. **Install Dependencies**: Install Three.js for 3D rendering, Tailwind CSS for styling, and any other necessary libraries such as shadcn/ui for UI components.
3. **Create Gradient Background**: Implement a clean gradient background in the main CSS file using Tailwind CSS utilities.
4. **Build Hero Section**: Design the hero section with a headline using the Inter font and ensure it’s styled according to the minimalist design specifications.
5. **Implement Scroll-Driven Animation**: Utilize Three.js to create the animation that responds to scrolling events. Use window scroll events to manipulate the animation frames.
6. **Responsive Adjustments**: Ensure that the layout and elements are responsive by utilizing Tailwind CSS breakpoints and utility classes.
7. **Testing and Optimization**: Test the website on various devices to ensure performance and responsiveness, making necessary adjustments for optimal user experience.

## USER EXPERIENCE
Users will be greeted with a clean and simple interface that emphasizes the scroll-driven animation. As they scroll down, they will see the video play forward, creating an immersive experience. Scrolling back up will reverse the animation, allowing for unique interaction. The minimalist design ensures that users can focus on the animation without distractions, while the responsive layout adapts to different screen sizes for accessibility. The hero headline will serve as an engaging introduction, encouraging users to explore the animation further.