Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a high-end, immersive landing page for a web design agency, designed to provide a seamless user experience that feels like a journey through 3D space. Utilizing React, Tailwind CSS, and React Three Fiber, the landing page will engage users with interactive 3D elements and smooth scrolling transitions, elevating the presentation of the agency's work.

## CORE FEATURES
1. **Hero Section**: A minimalist landing area featuring a large 3D 'blob' or abstract mesh that reacts to user mouse movements, setting an engaging tone for the experience.
2. **Work Section**: As users scroll down, the 3D object will smoothly morph or reposition itself to reveal floating project cards, showcasing the agency's portfolio.
3. **Contact Section**: The 3D object will dissolve into a particle system or morph into a 'Contact' sphere, providing users with an interactive way to reach out.
4. **Smooth Scrolling**: Integration of @studio-freight/lenis or R3F ScrollControls for a buttery smooth scrolling experience, enhancing the overall fluidity of the page.
5. **Animated Transitions**: Use of framer-motion to synchronize UI text animations with scroll position, ensuring fluid transitions between sections with parallax depth effects.
6. **Dark Theme with Glassmorphism**: Implementation of a dark aesthetic enriched with glassmorphism for UI elements and MeshTransmissionMaterial for 3D objects, creating a modern and sleek look.

## 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 features a vertical scroll that transitions through three distinct sections, each designed to enhance user engagement through 3D interactions and smooth animations.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required for this landing page, but could be added if interactions become complex.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install necessary packages including Tailwind CSS, React Three Fiber, framer-motion, and @studio-freight/lenis.
3. **Configure Tailwind CSS**: Set up Tailwind CSS by creating the configuration files and adding the necessary imports to your CSS.
4. **Create 3D Blob Component**: Implement the 3D blob or abstract mesh using React Three Fiber, ensuring it reacts to mouse movements.
5. **Develop Section Components**: Create separate components for each section (Hero, Work, Contact) and implement the smooth scroll functionality.
6. **Integrate Framer Motion**: Use framer-motion to add animations to text and UI elements as the user scrolls through sections.
7. **Implement Glassmorphism**: Style UI elements with glassmorphism effects, ensuring they blend well with the dark theme.
8. **Test and Optimize**: Test the landing page for performance issues, ensuring smooth interactions and responsive behavior across devices.

## USER EXPERIENCE
Users will experience a unique interaction as they scroll through the landing page. The 3D elements will provide a sense of depth and immersion, making the content feel dynamic. Key user interactions include hovering over the blob to see it react, scrolling to smoothly transition between sections, and observing the animations that guide them through the agency’s portfolio. The final contact section will invite users to engage directly, reinforcing the agency's brand identity through a captivating digital experience.