update README

README.md

@@ -37,11 +37,13 @@ hear-on-out uses your geolocation to fetch current weather and air quality data,
 
 ### Audio Visualization
 
-- Real-time particle system using p5.js (40 particles for optimal performance)
+- Real-time particle system using p5.js
+  - **Desktop**: 40 particles at 30fps with connection lines
+  - **Mobile**: 15 particles at 20fps, no connections (performance optimized)
 - FFT analysis for bass, mid, and treble frequency detection
 - Particles react to audio levels with dynamic size and movement
-- Connected particle network with proximity-based relationships
+- Adaptive sizing: 400x400px (desktop) or 280x280px (mobile)
-- Performance optimizations: 30fps rendering, reduced connection checks, pauses when tab not focused
+- Automatic pause during scrolling to prevent audio interference on mobile
 
 ## Technologies
 
@@ -55,11 +57,25 @@ hear-on-out uses your geolocation to fetch current weather and air quality data,
 
 The application includes several optimizations for smooth performance:
 
-- **Reduced particle count**: 40 particles (down from 60) with 30fps rendering
+**Desktop Optimizations:**
-- **Selective updates**: Audio-reactive displacement updates every 3rd frame
+- 40 particles with 30fps rendering
-- **Optimized connections**: Particle connections drawn every other frame with limited neighbor checking
+- Audio-reactive displacement updates every 3rd frame
-- **Tab visibility**: Visualization pauses when tab is not focused to save resources
+- Particle connections drawn every other frame with limited neighbor checking
-- **Efficient audio routing**: Arpeggios bypass filter for cleaner CPU usage
+- Tab visibility detection: Visualization pauses when tab is not focused
+- Efficient audio routing: Arpeggios bypass filter for cleaner CPU usage
+
+**Mobile-Specific Optimizations:**
+- **Reduced particle count**: 15 particles (vs 40 on desktop)
+- **Lower framerate**: 20fps (vs 30fps on desktop)
+- **Disabled connection lines**: Removes expensive O(n²) calculations
+- **Smaller canvas**: 280x280px visualizations (vs 400x400px on desktop)
+- **Scroll handling**: Visualization pauses during scrolling to prevent audio stuttering
+- **Less frequent updates**: Displacement updates every 5th frame (vs 3rd on desktop)
+- **Screen sleep recovery**: Audio context automatically resumes after device wakes up
+- **Visibility API**: Properly handles audio context suspension/resumption
+
+**Mobile Performance Note:**
+Running both generators simultaneously on mobile devices may cause performance issues. For optimal experience on mobile, consider running one generator at a time.
 
 ## Setup
 
@@ -104,6 +120,25 @@ The app supports two methods for location input:
 - Must be served over HTTPS for geolocation to work
 - Development server uses `@vitejs/plugin-basic-ssl` for local HTTPS
 
+## Mobile Experience
+
+The application is optimized for mobile devices with several performance enhancements:
+
+**Audio Playback:**
+- Automatic audio context recovery after screen sleep/wake
+- Handles browser audio suspension gracefully
+- Transport automatically restarts when app becomes visible
+
+**Visual Performance:**
+- Adaptive particle count and framerate based on device
+- Visualization pauses during scrolling to prevent stuttering
+- Smaller canvas size for reduced GPU load
+
+**Known Limitations:**
+- Running both generators simultaneously may impact performance on lower-end devices
+- Some mobile browsers may require user interaction to start audio playback
+- Audio may briefly pause during heavy scrolling or multitasking
+
 ## Project Structure
 
 ```