# Inspiration Explorer - Current Features

## Core Functionality

### 1. Interactive Graph Visualization
- Uses React Flow to create an interactive, node-based graph of inspirations
- Nodes represent artists/concepts and their inspirations
- Directed edges show influence relationships with "inspires" labels
- Graph nodes can be moved, connected, and interacted with
- Smooth animations for connections and node transitions
- Zoom and pan controls for navigating the inspiration map
- Intelligent node reorganization prevents overlapping even in complex graphs
- Advanced collision detection maintains optimal spacing between nodes

### 2. Inspiration Search
- Users can enter a name (e.g., "Daft Punk") in a retro-styled input box
- Searches trigger API calls to find related inspirations 
- Results are displayed as connected nodes around the search node
- New nodes are positioned in a circular pattern around the source
- Each search creates 3-5 new inspiration nodes automatically connected to the source
- Loading state provides visual feedback during searches
- Duplicate search prevention system avoids creating redundant nodes

### 3. Expandable Network
- Any node can be clicked to enter edit mode
- Users can search from any node to expand the inspiration network
- Creates a tree-like structure of influences and connections
- Unlimited depth of exploration through nested inspiration searching
- Interactive design encourages continuous exploration
- Nodes appear with staggered animation for a streaming effect
- Golden ratio-based positioning for visually balanced layouts

## User Interface

### 1. Retro-UI Integration
- Uses the pixel-retroui library for consistent retro aesthetics
- Custom styled input fields with retro computing feel
  - Placeholder text disappears automatically when the input is focused, and only reappears if the input is blurred and empty (no need for manual deletion)
- Monospace fonts (VT323, Press Start) for authentic retro typography
- Retrowave/synthwave-inspired color palette

### 2. Node Styling
- Nodes feature glowing borders and hover effects
- Color-coded elements (pink headers, blue type labels)
- Semi-transparent backgrounds with retro-futuristic look
- Interactive states (editable, static) with appropriate visual cues
- Consistent pixel-perfect design across all elements
- Animated pop-in effects when new nodes are created
- Scale transformation animations for engaging appearance

### 3. Visual Effects
- Gradient background with retrowave/synthwave aesthetics
- CRT scanline effect overlay for retro monitor feel
- Subtle noise texture mimicking old displays
- Glowing text and borders with light bloom effects
- Animated connection lines between related inspirations
- Staggered appearance of search results for a streaming-data feel
- Smooth scaling transitions for a polished user experience

## Technical Features

### 1. Data Structure
- Typed interfaces for inspirations, nodes, and edges
- Consistent data model with clear relationships
- Reactive state management for real-time graph updates
- Advanced positioning algorithm using golden ratio for optimal layouts

### 2. API Integration
- REST API endpoint for querying inspirations
- OpenAI integration for generating inspiration data
- Fallback to mock data when API key isn't available
- Error handling with user-friendly messages
- Response parsing and data normalization

### 3. Interaction Handling
- Click events for node selection and editing
- Keyboard controls for search submission
- Drag interactions for node repositioning
- Connection handling between nodes
- State management for editing and display modes
- Collision detection to prevent node overlap
- Sophisticated positioning system for complex networks

## User Experience

### 1. Intuitive Onboarding
- Initial node prompts users to "Enter a name..."
- Clear instructions within the interface
- Visual cues guide users through the exploration flow
- Error states with helpful messages
- Loading indicators during search operations

### 2. Responsive Layout
- Full-viewport design maximizes exploration space
- Adaptable layout works across different screen sizes
- Clear focus on the graph as the primary interface
- Unobtrusive controls that don't interfere with the exploration
- Smart node positioning ensures readability even with many connections

### 3. Performance Optimization
- Dynamic loading of node data
- Efficient rendering of complex graph structures
- Smooth animations even with many nodes
- Client-side data management for responsive interactions
- Throttled operations to prevent UI blocking during complex layouts
- Efficient collision detection algorithms for smooth experience