Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project focuses on enhancing the visual presentation of a 3D tree structure for a rivalry engine, aiming to create an immersive and dynamic experience that reflects a live rivalry universe. The application will present a sophisticated 3D representation while maintaining the existing logic and data flow.

## CORE FEATURES
1. **3D Tree Visualization**: A detailed 3D tree structure that serves as the main visual element, showcasing events and nodes organically connected through branches, with realistic textures and cinematic lighting.
2. **Dynamic Node Representation**: Nodes represented as premium 3D objects, displaying high-resolution images and specific event information without cluttering the visual space.
3. **Organic Branch Connections**: Realistically styled branches that connect nodes without appearing as simple lines, featuring variable thickness and organic shapes.
4. **Cinematic Lighting Effects**: Advanced lighting techniques to create depth and atmosphere, enhancing the visual impact of the tree structure.
5. **Responsive Design**: A mobile-friendly adaptation that ensures the tree visualization is optimized for smaller screens while maintaining usability and clarity.
6. **Timeline Synchronization**: A timeline at the bottom allowing users to navigate through events, synchronizing with the 3D tree's visual representation.

## 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 central 3D tree visualization with a responsive sidebar for detailed information and a timeline at the bottom for event navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: [Specify if needed]

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using TypeScript and Tailwind CSS.
2. **Implement 3D Visualization**: Utilize Three.js to create the 3D tree structure, ensuring organic shapes for branches and detailed nodes.
3. **Design Node Components**: Create reusable components for nodes with premium designs, incorporating high-resolution images and appropriate effects.
4. **Add Cinematic Lighting**: Integrate dynamic lighting effects to enhance depth and visibility of the tree structure.
5. **Responsive Design Adaptations**: Ensure the application is mobile-friendly by adjusting the layout and elements for smaller screens.
6. **Sync Timeline and Tree**: Develop the functionality to synchronize the timeline with the 3D visualization, allowing seamless navigation.

## USER EXPERIENCE
Users will interact with the 3D tree by clicking on nodes to view detailed information in the sidebar. The timeline will allow for easy navigation through events, with the camera smoothly transitioning to the corresponding node in the 3D tree. The overall experience will be immersive, making users feel engaged with the live rivalry universe.

This prompt provides a comprehensive structure for the project, ensuring that all critical aspects are addressed while adhering to the user's vision and maintaining the existing logic and functionality.