Do not redesign or recreate the website.
Generated Prompt
## APPLICATION OVERVIEW The goal of this project is to enhance an existing website by integrating an immersive cinematic robot guide system without altering the current layout, branding, or UI structure. This upgrade focuses on creating a more engaging user experience through advanced animations, interactions, and visual effects while maintaining the website's performance and responsiveness. ## CORE FEATURES 1. **3D Robot Assistant**: A premium 3D robot integrates into the hero section, floating smoothly and reacting to user interactions such as mouse movement. 2. **Scroll-Triggered Interactions**: As users scroll through sections (Work, Services, About, Clients, Contact), the robot changes poses and holographic UI elements appear dynamically. 3. **Holographic Dialogue Panels**: Interactive dialogue panels appear beside the robot with smooth animations, providing information or prompts to users. 4. **Cinematic Visual Enhancements**: Incorporate visual depth through cinematic shadows, soft glows, layered lighting, and atmospheric effects to elevate the overall aesthetic. 5. **Mouse-Based Parallax Effects**: Implement subtle parallax interactions across the existing UI elements to create a sense of depth and responsiveness. 6. **Improved Animation Smoothness**: Refine current animations to feel more premium while preserving the minimalistic approach of the design. ## 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**: Maintain the existing layout structure with defined sections for Work, Services, About, Clients, and Contact, ensuring a cohesive integration of new features. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Consider using Zustand or React Context for state management if necessary for interactions. ## IMPLEMENTATION STEPS 1. **Analyze Current Codebase**: Review all existing files to understand the current structure and UI elements before making any modifications. 2. **Integrate 3D Robot Model**: Implement the 3D robot model in the hero section, ensuring it has the desired floating and cursor-tracking behavior. 3. **Implement Scroll-Triggered Interactions**: Code the robot's pose changes and holographic UI display as users scroll through each section. 4. **Create Holographic Dialogue Panels**: Design and integrate dialogue panels beside the robot that animate smoothly when triggered by user interaction. 5. **Enhance Visual Depth**: Add cinematic shadows, soft glows, and atmospheric effects to the site, ensuring they align with the existing design. 6. **Add Parallax Effects**: Introduce subtle mouse-based parallax interactions throughout the UI to enhance user engagement. 7. **Refine Existing Animations**: Review and enhance existing animations to ensure they align with the new cinematic theme while keeping the overall design minimal. 8. **Testing and Optimization**: Ensure that all new features are performant and responsive across various devices and screen sizes. ## USER EXPERIENCE Users will interact with an engaging robot assistant that guides them through the website. As they scroll, the robot adjusts its position and engages with holographic elements that provide additional context. The smooth animations and immersive visual effects will create a captivating experience, inviting users to explore the website's offerings while maintaining a clean and minimal aesthetic. The enhancements will be seamless, ensuring the core brand message remains clear and impactful.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
