feat: add major new features including 6 color palettes, interactive logo mode, and mobile-first improvements

USAGE.md

@@ -3,8 +3,9 @@
 ## Quick Start
 
 1. Open [index.html](index.html) in your browser
-2. Press `H` or `?` to see keyboard controls
+2. Press `H`, `?`, or `/` to see keyboard controls (or tap the `?` button on mobile)
 3. Use URL parameters to configure the page
+4. On mobile: Tap any kbd button in the help window to trigger that action
 
 ## URL Parameters Reference
 
@@ -19,6 +20,14 @@
 - `radial` - Radial gradient
 - `conic` - Conic gradient
 
+**palette** - Color palette theme
+- `default` - Purple, pink, and blue tones (default)
+- `blue-yellow` - Ocean sunset with deep blues and golden yellows
+- `dark` - Deep space with moody dark tones
+- `light` - Pastel dream with soft colors
+- `fire` - Vibrant warm colors (red, orange, yellow)
+- `nature` - Fresh natural tones (green, teal)
+
 ### Logo Configuration
 
 **logo** - Logo animation state
@@ -30,7 +39,9 @@
 - `shake` - Gentle shaking motion
 - `rotate` - Continuous rotation
 - `tilt` - 3D tilting effect
-- `all` - All animations combined (default)
+- `interactive` - Logo follows cursor (desktop) or device orientation (mobile)
+- `mixed` - Auto tilt animation that becomes interactive on movement (default)
+- `all` - All animations combined
 
 **elementAnim** - Internal SVG element animation
 - `neon` - Neon blinking effect
@@ -88,44 +99,101 @@ index.html?speed=2.5&logoAnim=all&elementAnim=all
 index.html?speed=0.25&bg=animated&gradient=conic&logo=full&logoAnim=all&elementAnim=all
 ```
 
+### Color Palettes
+```
+index.html?palette=blue-yellow
+index.html?palette=dark
+index.html?palette=fire&logoAnim=all
+index.html?palette=nature&gradient=radial
+```
+
+### Interactive Mode
+```
+index.html?logoAnim=interactive
+```
+
+### Mixed Mode (Default)
+```
+index.html?logoAnim=mixed
+```
+
 ## Keyboard Controls
 
 While on the page, you can use these keys to change settings in real-time:
 
 - `B` - Toggle background animation (animated ↔ static)
 - `G` - Cycle gradient types (linear → radial → conic)
+- `P` - Cycle color palettes (default → blue-yellow → dark → light → fire → nature)
 - `L` - Cycle logo states (static → animated → full)
-- `A` - Cycle logo body animations (shake → rotate → tilt → all)
+- `A` - Cycle logo body animations (shake → rotate → tilt → interactive → mixed → all)
 - `E` - Cycle element animations (neon → color → explosion → fly → all)
 - `+` or `=` - Increase animation speed (+0.25x)
 - `-` or `_` - Decrease animation speed (-0.25x)
 - `0` - Reset speed to 1x
 - `R` - Reset all to default configuration
-- `H` or `?` - Show help dialog
+- `H`, `?`, or `/` - Show help dialog
+- `ESC` - Close help dialog
 
-**Note:** A toast notification will appear showing your current configuration when you change settings.
+**Mobile Users:** Tap any kbd button in the help window to trigger that keyboard shortcut.
+
+**Note:** A liquid glass toast notification will appear showing your current configuration when you change settings.
+
+## Mobile Features
+
+### Touch Controls
+- Tap the `?` button at bottom-right to open help window
+- Tap any kbd button in help to trigger that keyboard shortcut
+- Touch-friendly larger buttons on small screens
+
+### Gyroscope Support
+- Interactive and mixed modes use device orientation on mobile
+- Logo tilts based on how you tilt your phone/tablet
+- ±35° tilt range for dramatic movement
+- iOS 13+ requires permission (automatically requested)
+
+### Responsive Design
+- Logo sized at ~60% of screen height for visibility
+- Mobile-first unified viewBox approach
+- Same great experience on all screen sizes
+- Optimized touch targets
 
 ## Performance Tips
 
 1. **Reduced Motion**: The page respects `prefers-reduced-motion` system settings
 2. **Browser Compatibility**: Best viewed in modern browsers (Chrome, Firefox, Safari, Edge)
-3. **Performance**: All animations use CSS transforms and opacity for 60fps performance
+3. **Mobile Browsers**: Fully supported on iOS Safari and Chrome Mobile
+4. **Performance**: All animations use CSS transforms and opacity for 60fps performance
+5. **Hardware Acceleration**: GPU-accelerated animations for smooth playback
 
 ## Customization
 
-### Changing Colors
+### Using Color Palettes
 
-Edit the CSS custom properties in [css/styles.css](css/styles.css:4-7):
+The easiest way to change colors is using the built-in palettes via URL parameter or P key:
+
+```
+?palette=blue-yellow  # Ocean sunset theme
+?palette=fire         # Warm red/orange/yellow
+?palette=nature       # Green/teal natural tones
+?palette=dark         # Deep space dark theme
+?palette=light        # Soft pastel colors
+```
+
+### Creating Custom Palettes
+
+Add a new palette class in [css/styles.css](css/styles.css):
 
 ```css
-:root {
-    --gradient-color-1: #667eea;
-    --gradient-color-2: #764ba2;
-    --gradient-color-3: #f093fb;
-    --gradient-color-4: #4facfe;
+.palette--custom {
+    --gradient-color-1: #your-color-1;
+    --gradient-color-2: #your-color-2;
+    --gradient-color-3: #your-color-3;
+    --gradient-color-4: #your-color-4;
 }
 ```
 
+Then use `?palette=custom` in the URL.
+
 ### Changing Animation Speed
 
 Edit the timing variables in [css/styles.css](css/styles.css:10-16):
@@ -144,15 +212,21 @@ Edit the timing variables in [css/styles.css](css/styles.css:10-16):
 
 ### Changing Logo Size
 
-Edit the logo container width/height in [css/styles.css](css/styles.css:90-91):
+Logo size is controlled via the SVG viewBox for optimal mobile-first responsive design. To adjust, edit the viewBox in [js/app.js](js/app.js):
 
-```css
-.logo-container {
-    width: 40vmin;  /* Adjust this */
-    height: 40vmin; /* Adjust this */
+```javascript
+function setupViewBox() {
+    const logo = elements.logo;
+    // Smaller viewBox = larger logo (510 logo units / 900 viewBox = ~57% screen)
+    logo.setAttribute('viewBox', '-200 -200 900 900');
 }
 ```
 
+For example:
+- `viewBox="-200 -200 900 900"` - Logo at ~57% (current)
+- `viewBox="-300 -300 1100 1100"` - Logo at ~46%
+- `viewBox="-100 -100 700 700"` - Logo at ~73%
+
 ## Troubleshooting
 
 ### Animations not working
@@ -163,15 +237,22 @@ Edit the logo container width/height in [css/styles.css](css/styles.css:90-91):
 
 ### Page looks broken
 - Clear browser cache
-- Ensure all files are in correct directories
-- Check that `images/shadoll.svg` exists
 
 ### Slow performance
 - Try simpler animation combinations
-- Reduce animation speed in CSS
+- Reduce animation speed in CSS or use `?speed=0.5`
 - Use static background: `?bg=static`
+- Use simpler logo animations: `?logoAnim=tilt`
 - Close other browser tabs
+- Disable element animations: `?elementAnim=neon` or `?logo=animated&logoAnim=mixed`
 
-## Development
+### Interactive mode not working on mobile
+- Grant gyroscope permission when prompted (iOS 13+)
+- Try tilting your device more dramatically (±35° range)
+- Check if device has gyroscope sensor
+- Fallback to cursor mode if gyroscope unavailable
 
-See [CLAUDE.md](CLAUDE.md) for development guidelines and [TODO.md](TODO.md) for planned features.
+### Help button not visible
+- Check bottom-right corner of screen
+- Button is always positioned at bottom on all devices
+- Try refreshing the page if it's missing