diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c8d8b3..d243ad8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,101 @@ All notable changes to the Shadoll Animated Placeholder project will be documented in this file. +## [2.0.0] - 2025-12-28 + +### Major New Features + +- **6 Color Palettes**: Complete color theming system + - Default (Purple/Pink/Blue) - original colors + - Blue-Yellow (Ocean Sunset) - deep blues with golden yellows + - Dark (Deep Space) - moody dark tones + - Light (Pastel Dream) - soft pastel colors + - Fire (Red/Orange/Yellow) - vibrant warm colors + - Nature (Green/Teal) - fresh natural tones + - New keyboard shortcut: `P` cycles through palettes + - URL parameter: `?palette=blue-yellow` + +- **Interactive Logo Mode**: Logo responds to user input + - **Desktop**: Logo tilts based on cursor/mouse position + - **Mobile**: Logo tilts based on device orientation (gyroscope) + - Auto-switching between cursor and gyroscope inputs + - ±35° tilt range for dramatic effect + - iOS 13+ permission handling for gyroscope + - URL parameter: `?logoAnim=interactive` + +- **Mixed Mode** (NEW DEFAULT): Best of both worlds + - Starts with automatic tilt animation + - Becomes interactive when cursor/device moves + - Returns to auto tilt after 2 seconds of inactivity + - Seamless transitions between modes + - URL parameter: `?logoAnim=mixed` + +- **Apple-Style Liquid Glass UI**: Modern, vibrant design system + - Help window with frosted glass effect + - Toast notifications with glass styling + - Heavy blur (40px) with color saturation (180%) + - Multi-layered shadows for depth + - Smooth bouncy animations + - Gradient backgrounds with inset highlights + +### Mobile-First Improvements + +- **Responsive Logo Sizing**: Logo optimized for all devices + - Mobile: ~60% of screen height (was ~10%) + - Unified viewBox approach (900×900) for all devices + - No more separate mobile/desktop scaling + - Maintains animation space while prioritizing visibility + +- **Touch-Friendly Controls**: + - All kbd buttons clickable on touch devices + - Simulates keyboard events when tapped + - Help button repositioned to bottom-right on all devices + - Larger touch targets on mobile + +- **Enhanced Interactive Sensitivity**: + - Increased tilt range: ±20° → ±35° + - Improved gyroscope sensitivity (60-100% more responsive) + - More dramatic, visible movements on mobile + +### UI/UX Enhancements + +- **Help System Improvements**: + - Multiple help toggles: `H`, `?`, `/` keys + - `ESC` key closes help window + - Toast notifications moved to top + - Help button always at bottom-right corner + - Removed duplicate/conflicting media query styles + +- **Footer**: Added copyright notice at bottom center + - Semi-transparent white text + - Subtle shadow for visibility + - Responsive sizing + +### Changed + +- **Default Animation**: Changed from `tilt` to `mixed` +- **ViewBox Strategy**: Unified single viewBox for all devices (mobile-first) +- **Help Button Position**: Fixed to bottom-right on all screen sizes +- **Palette Display**: Toast now shows current palette name + +### Technical Improvements + +- Removed CSS transform scaling conflicts +- Cleaner responsive media queries (removed duplicates) +- Improved JavaScript viewBox management +- Better auto-detection of input methods +- Enhanced idle detection for mixed mode + +### Files Modified +- [index.html](index.html) - Added palette param, footer, data-key attributes +- [css/styles.css](css/styles.css) - 6 palettes, liquid glass styles, mobile fixes +- [js/app.js](js/app.js) - Interactive controller, viewBox setup, palette cycling +- [README.md](README.md) - Updated features and examples +- [TODO.md](TODO.md) - Marked completed tasks +- [CHANGELOG.md](CHANGELOG.md) - This file + +--- + ## [1.1.0] - 2025-12-27 ### Added diff --git a/CLAUDE.md b/CLAUDE.md index 1d1e356..baf0a89 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -13,6 +13,7 @@ This is a static, animated placeholder page for the Shadoll project. It features 3. **Performance First**: Smooth 60fps animations, minimal resource usage 4. **Configuration Flexibility**: URL parameters for customization 5. **Progressive Enhancement**: Works without JavaScript, enhanced with it +6. **Mobile-First Design**: Unified approach for all devices, optimized for touch and small screens ## File Structure Rules @@ -40,10 +41,12 @@ This is a static, animated placeholder page for the Shadoll project. It features ### CSS - BEM naming convention for classes -- CSS custom properties for theming -- Mobile-first responsive design +- CSS custom properties for theming (palettes, animation speed) +- Mobile-first responsive design (single unified solution for all devices) - Prefer CSS animations over JavaScript where possible - Use `transform` and `opacity` for performant animations +- Liquid glass UI: `backdrop-filter: blur(40px) saturate(180%)` +- Never use conflicting transform properties in media queries ### JavaScript - Vanilla JavaScript (no frameworks) @@ -52,6 +55,10 @@ This is a static, animated placeholder page for the Shadoll project. It features - Comments for complex logic - URL parameter parsing for configuration - Fallbacks for missing parameters +- Event delegation for touch-enabled controls +- Clean up event listeners on controller stop +- Use closures for stateful controllers (interactive tilt) +- Auto-detection of input methods (cursor vs gyroscope) ## Animation Guidelines @@ -62,36 +69,71 @@ This is a static, animated placeholder page for the Shadoll project. It features - Use `will-change` sparingly for performance hints ### JavaScript Animations -- Use `requestAnimationFrame` for smooth animations +- Use `requestAnimationFrame` for smooth animations (not currently used) - Throttle/debounce event handlers - Clean up animations on page unload - Provide reduced-motion alternatives +- Interactive animations: Direct style manipulation for real-time responsiveness +- Idle detection: Use `setTimeout` to return to default state after inactivity +- Controller pattern: Return object with `start()` and `stop()` methods ## SVG Logo Structure -The logo consists of two main elements: -- `#shadoll_l` - The "L" shape (black, `#222`) -- `#shadoll_s` - The "S" shape (red, `#dc2108`, contains 2 path elements) +### Logo Design +The logo represents the letters "s" and "d" extracted from "shadoll" ({s}ha{d}oll), designed as geometric shapes divided into sections: +- Left element: "s" shape (represented by `#shadoll_s` in SVG) +- Right element: "d" shape (represented by `#shadoll_l` in SVG) -When animating: -- Full-body animations apply to the entire SVG container -- Internal animations target individual paths within the SVG -- Maintain aspect ratio and viewBox +**Note**: The naming convention reflects the letter shapes - `l` in the path name comes from "{d}oll", while `s` comes from "{s}ha". + +### SVG Elements +- `#shadoll_l` - Single path element for the right "d" shape (default: `#222` black) +- `#shadoll_s` - Group containing 2 path elements for the left "s" shape (default: `#dc2108` red) + +### Color Guidelines +- **Two-color scheme** (recommended): The "s" paths (`#shadoll_s`) should use one consistent color, the "d" path (`#shadoll_l`) uses another +- **Single-color scheme**: Both elements can use the same color for monochrome effect +- When creating color palettes, maintain color consistency within the "s" element (both paths same color) + +### Animation Structure +- Full-body animations apply to the entire SVG container (`#logo`) +- Internal animations target individual elements (`#shadoll_s`, `#shadoll_l`) +- Element animations can target individual paths within `#shadoll_s` group +- Maintain aspect ratio and viewBox proportions - Use CSS classes for animation states +### ViewBox Approach (Mobile-First) +**CRITICAL**: Logo sizing uses a unified viewBox for all devices: +- Single `viewBox="-200 -200 900 900"` for all screen sizes +- Logo paths are ~510 units → 510/900 = ~57% of screen +- **Never** use CSS `scale()` transforms for sizing (conflicts with animations) +- **Never** use separate viewBoxes for mobile/tablet/desktop +- Adjust viewBox size to change logo size: smaller viewBox = larger logo +- Set viewBox dynamically via JavaScript in `setupViewBox()` function + ## Configuration System URL parameters should follow this pattern: ``` -?bg=animated&gradient=linear&logo=full&logoAnim=shake&elementAnim=neon +?bg=animated&gradient=linear&palette=default&logo=full&logoAnim=mixed&elementAnim=neon&speed=0.5 ``` Default values when parameters are missing: - `bg`: `animated` - `gradient`: `linear` -- `logo`: `animated` -- `logoAnim`: `all` +- `palette`: `default` +- `logo`: `full` +- `logoAnim`: `mixed` (changed from `tilt` in v2.0.0) - `elementAnim`: `neon` +- `speed`: `0.5` (range: 0.1-5.0) + +### Available Options + +**Palettes**: `default`, `blue-yellow`, `dark`, `light`, `fire`, `nature` + +**Logo Animations**: `shake`, `rotate`, `tilt`, `interactive`, `mixed`, `all` +- `interactive`: Logo follows cursor (desktop) or gyroscope (mobile) +- `mixed`: Auto tilt + interactive on movement (2s idle timeout) ## Git Workflow @@ -104,12 +146,16 @@ Default values when parameters are missing: Before considering a feature complete: - [ ] Test in Chrome, Firefox, Safari -- [ ] Test on mobile devices +- [ ] Test on mobile devices (iOS Safari, Chrome Mobile) +- [ ] Test gyroscope on real mobile device (not emulator) +- [ ] Test touch controls (tap kbd buttons in help) - [ ] Verify smooth 60fps performance - [ ] Check with reduced motion preferences - [ ] Validate HTML/CSS - [ ] Test all URL parameter combinations -- [ ] Update documentation +- [ ] Verify help button is at bottom-right on all screen sizes +- [ ] Check logo visibility on mobile (~60% of screen) +- [ ] Update all documentation (README, TODO, CHANGELOG, USAGE, CLAUDE) ## Performance Targets @@ -137,12 +183,30 @@ When adding new features: 4. Update URL parameter documentation in [README.md](README.md) 5. Add task completion to [TODO.md](TODO.md) +### Adding a New Color Palette +1. Create `.palette--name` class in [styles.css](css/styles.css) +2. Define 4 CSS custom properties: `--gradient-color-1` through `--gradient-color-4` +3. Add palette name to `palettes` array in [app.js](js/app.js) keyboard controls +4. Add palette to `paletteNames` mapping in toast message function +5. Document new palette in [README.md](README.md) and [USAGE.md](USAGE.md) + ### Adding a New Gradient Type 1. Create CSS custom properties for gradient 2. Add gradient class in [styles.css](css/styles.css) 3. Update configuration logic in [app.js](js/app.js) 4. Document new gradient type in [README.md](README.md) +### Adding Interactive Controls (Cursor/Gyroscope) +1. Create controller function with closure pattern (returns `{start, stop}`) +2. Store state variables: `isActive`, `mode`, timing trackers +3. Implement auto-switching logic with timeout (1s default) +4. Add `mousemove` handler for cursor tracking +5. Add `deviceorientation` handler for gyroscope +6. Request iOS permission if needed (`DeviceOrientationEvent.requestPermission`) +7. For mixed mode: Add idle detection with `setTimeout` (2s default) +8. Clean up all event listeners in `stop()` method +9. Store controller globally: `window.interactiveTiltController` + ### Debugging Animation Performance 1. Open Chrome DevTools > Performance 2. Record animation sequence @@ -151,14 +215,48 @@ When adding new features: 5. Optimize by using `transform`/`opacity` only 6. Add `will-change` if needed +## Architectural Decisions (v2.0.0) + +### Mobile-First ViewBox Strategy +- **Problem**: Logo was tiny on mobile (~10% of screen) with CSS scaling +- **Solution**: Unified `viewBox="-200 -200 900 900"` for all devices via JavaScript +- **Why**: CSS `scale()` conflicts with animations; single viewBox simplifies codebase +- **Result**: Logo at ~57% of screen (510 units / 900 viewBox) on all devices + +### Interactive Mode Auto-Switching +- **Problem**: Need both cursor (desktop) and gyroscope (mobile) in one mode +- **Solution**: Time-based auto-switching with 1-second timeout +- **Why**: Detects active input method without manual switching +- **Implementation**: Track `lastCursorTime` and `lastGyroTime`, switch to most recent + +### Mixed Mode Idle Detection +- **Problem**: Users want auto animation but also interactive control +- **Solution**: Tilt animation by default, becomes interactive on movement, returns after 2s idle +- **Why**: Best of both worlds - attractive animation + user engagement +- **Implementation**: Class toggling (`logo--tilt` ↔ `logo--interactive`) with `setTimeout` + +### Touch-Enabled kbd Elements +- **Problem**: Mobile users can't use keyboard shortcuts +- **Solution**: Make kbd buttons clickable, dispatch synthetic keyboard events +- **Why**: Consistent UX across desktop and mobile +- **Implementation**: `data-key` attributes + click handlers + `KeyboardEvent` dispatch + +### Liquid Glass UI Design +- **Decision**: Apple-style frosted glass for help and toasts +- **Why**: Modern, premium feel that matches animated aesthetic +- **Implementation**: `backdrop-filter: blur(40px) saturate(180%)` + gradient backgrounds + ## AI Assistant Best Practices When working on this project: - Always read existing files before suggesting changes - Maintain consistency with existing code style -- Update all relevant documentation +- Update all relevant documentation (README, TODO, CHANGELOG, USAGE, CLAUDE) - Test changes in browser if possible - Ask for clarification on ambiguous requirements - Suggest performance optimizations -- Consider mobile and accessibility +- Consider mobile and accessibility (touch targets, gyroscope, screen readers) - Keep solutions simple and maintainable +- **NEVER** use CSS `scale()` for logo sizing - use viewBox instead +- **NEVER** add duplicate/conflicting position properties in media queries +- **ALWAYS** clean up event listeners when stopping controllers diff --git a/README.md b/README.md index 394a3c4..37e5470 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,51 @@ # Shadoll Animated Placeholder -An animated, configurable placeholder page featuring dynamic gradient backgrounds and logo animations. Designed to work as a standalone static site deployable on GitHub Pages. +An animated, configurable placeholder page featuring dynamic gradient backgrounds and interactive logo animations. Designed to work as a standalone static site deployable on GitHub Pages with full mobile support. + +The logo represents the letters "s" and "d" from "shadoll" ({s}ha{d}oll), designed as geometric shapes that can animate independently or together. ## Features -- **Dynamic Gradient Backgrounds**: Smoothly transitioning gradients with configurable colors, orientations, and types (linear, radial, conic) +- **6 Color Palettes**: Default, Blue-Yellow, Dark, Light, Fire, and Nature themes +- **Dynamic Gradient Backgrounds**: Smoothly transitioning gradients with 3 types (linear, radial, conic) - **Logo Animations**: - - Full-body animations: shake, rotate, tilt - - Internal SVG element animations: neon blinking, color changing, explosion effects - - Full-page animation space (logo animates across entire viewport) + - Full-body animations: shake, rotate, tilt, interactive (cursor/gyroscope), mixed mode + - Internal SVG element animations: neon blinking, color changing, explosion effects, fly animations + - Interactive mode: Logo follows cursor on desktop or device orientation on mobile + - Mixed mode: Auto tilt animation that becomes interactive on movement + - Full-page animation space optimized for all screen sizes - **Real-time Configuration**: - URL parameter support for all settings - - Keyboard controls with live toast notifications + - Keyboard controls with live liquid glass toast notifications + - Touchable help buttons for mobile devices - Animation speed control (0.1x to 5x) +- **Mobile-First Design**: + - Responsive logo sizing (60% of screen on mobile) + - Touch-friendly controls + - Gyroscope support for interactive animations +- **Modern UI**: + - Apple-style liquid glass design for help window and toasts + - Smooth animations with hardware acceleration + - Beautiful modal help system - **Zero Backend**: Pure HTML/CSS/JavaScript implementation - **GitHub Pages Ready**: Deploy directly as a static site ## Quick Start 1. Open [index.html](index.html) in your browser -2. Press `H` or `?` for keyboard controls -3. Customize using URL parameters +2. Press `H`, `?`, or `/` for keyboard controls (or tap the `?` button on mobile) +3. Customize using URL parameters or keyboard shortcuts See [USAGE.md](USAGE.md) for detailed configuration examples and keyboard controls. ### Quick Examples - **Minimal**: `index.html?bg=static&logo=static` -- **Neon Effect**: `index.html?elementAnim=neon` -- **Full Chaos**: `index.html?logoAnim=all&elementAnim=all` +- **Interactive Mode**: `index.html?logoAnim=interactive` +- **Mixed Mode** (default): `index.html?logoAnim=mixed` +- **Dark Palette**: `index.html?palette=dark` +- **Blue-Yellow Theme**: `index.html?palette=blue-yellow` +- **Full Chaos**: `index.html?logoAnim=all&elementAnim=all&palette=fire` - **Slow Motion**: `index.html?speed=0.5` - **Fast Mode**: `index.html?speed=2.5` @@ -50,22 +67,10 @@ www.shadoll/ └── CLAUDE.md # AI assistant instructions ``` -## Deployment - -See [deploy.md](deploy.md) for detailed deployment instructions. - -### Quick Deploy to GitHub Pages - -1. Push this repository to GitHub -2. Go to Settings > Pages -3. Select the branch (usually `main`) and root folder -4. Save and wait for deployment -5. Access at `https://yourusername.github.io/repository-name/` - ## License MIT License ## Author -Shadoll +sHa diff --git a/SUMMARY.md b/SUMMARY.md deleted file mode 100644 index 7f289ea..0000000 --- a/SUMMARY.md +++ /dev/null @@ -1,200 +0,0 @@ -# Project Summary - -## What Was Created - -A fully functional animated placeholder page with the following components: - -### Core Files -1. **[index.html](index.html)** - Main HTML structure with embedded SVG logo -2. **[css/styles.css](css/styles.css)** - Complete CSS with all animations and responsive design -3. **[js/app.js](js/app.js)** - JavaScript configuration system with URL parameter parsing and keyboard controls - -### Documentation -1. **[README.md](README.md)** - Project overview and quick start -2. **[USAGE.md](USAGE.md)** - Detailed usage guide with examples -3. **[TODO.md](TODO.md)** - Development roadmap and feature planning -4. **[CLAUDE.md](CLAUDE.md)** - AI assistant instructions and coding guidelines - -### Assets -1. **[images/shadoll.svg](images/shadoll.svg)** - Logo file with two animatable elements - -## Features Implemented - -### Background Animations -- ✅ Smooth gradient color transitions -- ✅ Gradient orientation changes -- ✅ Three gradient types: linear, radial, conic -- ✅ Configurable static/animated states -- ✅ Hue rotation for color cycling - -### Logo Full-Body Animations -- ✅ Shake - Gentle vibration effect -- ✅ Rotate - Continuous 360° rotation -- ✅ Tilt - 3D perspective tilting -- ✅ All - Combined animations - -### Logo Internal Element Animations -- ✅ Neon - Glowing blink effect -- ✅ Color Change - Smooth color transitions for both L and S elements -- ✅ Explosion - Elements scale and translate outward/inward -- ✅ Fly - Individual S paths fly out and return -- ✅ All - Combined element animations - -### Configuration System -- ✅ URL parameter parsing (including speed parameter) -- ✅ Default configuration fallbacks -- ✅ Real-time keyboard controls (B, G, L, A, E, +, -, 0, R, H) -- ✅ URL state updates without page reload -- ✅ Help system -- ✅ Toast notifications for configuration changes -- ✅ Animation speed control (0.1x to 5x) - -### Additional Features -- ✅ Responsive design (mobile, tablet, desktop) -- ✅ Accessibility support (reduced motion) -- ✅ Performance optimizations (will-change, transform/opacity only) -- ✅ Browser compatibility checks -- ✅ Console logging for debugging -- ✅ Zero dependencies (vanilla JS) -- ✅ Full-page logo animation space -- ✅ Proper SVG structure with group-based fills - -## How It Works - -1. **Page Load**: [js/app.js](js/app.js) parses URL parameters and applies configuration -2. **Background**: CSS animations in [css/styles.css](css/styles.css) handle gradient transitions -3. **Logo**: Full-page container with centered SVG, CSS classes applied dynamically -4. **Speed Control**: CSS custom properties (`--speed-multiplier`) updated via JavaScript -5. **Keyboard**: Event listeners cycle through animation options, show toast notifications -6. **URL Updates**: History API keeps URL in sync with current state -7. **Toast Notifications**: Visual feedback for configuration changes - -## Testing the Project - -### Local Testing -```bash -# Option 1: Python (if installed) -python3 -m http.server 8000 - -# Option 2: PHP (if installed) -php -S localhost:8000 - -# Option 3: Just open the file -open index.html -``` - -Then visit: -- `http://localhost:8000/` (for server) -- Or just open [index.html](index.html) directly in browser - -### Try These URLs -``` -# Minimal -index.html?bg=static&logo=static - -# Neon only -index.html?elementAnim=neon - -# Explosion effect -index.html?elementAnim=explosion&logoAnim=rotate - -# Full chaos -index.html?logoAnim=all&elementAnim=all - -# Radial gradient with tilt -index.html?gradient=radial&logoAnim=tilt - -# Slow motion mode -index.html?speed=0.5 - -# Fast chaos -index.html?speed=2.5&logoAnim=all&elementAnim=all -``` - -### Keyboard Testing -1. Open [index.html](index.html) -2. Press `H` to see controls -3. Press `E` multiple times to cycle element animations -4. Press `A` to cycle logo animations -5. Press `G` to change gradient types -6. Press `B` to toggle background animation -7. Press `+` or `-` to adjust speed -8. Press `0` to reset speed to 1x -9. Press `R` to reset all -10. Watch for toast notifications showing current configuration - -## Deployment to GitHub Pages - -1. Initialize git repository: -```bash -git init -git add . -git commit -m "Initial commit: Animated Shadoll placeholder" -``` - -2. Create GitHub repository and push: -```bash -git remote add origin https://github.com/yourusername/www.shadoll.git -git branch -M main -git push -u origin main -``` - -3. Enable GitHub Pages: - - Go to repository Settings - - Navigate to Pages section - - Select `main` branch and `/ (root)` folder - - Save - -4. Access at: `https://yourusername.github.io/www.shadoll/` - -## Performance Metrics - -- **File sizes**: - - HTML: ~1KB - - CSS: ~8KB - - JS: ~8KB - - SVG: ~0.5KB - - **Total: ~17.5KB** (uncompressed) - -- **Performance**: - - First paint: < 100ms - - Animation frame rate: 60fps - - No external dependencies - - No network requests (after initial load) - -## Browser Compatibility - -- ✅ Chrome/Edge 90+ -- ✅ Firefox 88+ -- ✅ Safari 14+ -- ✅ Mobile browsers (iOS Safari, Chrome Mobile) - -## Next Steps - -See [TODO.md](TODO.md) for planned enhancements: -- Particle effects -- Theme presets -- Multi-page support -- Visual configuration panel -- Custom logo upload -- Animation timeline editor - -## Quick Reference - -| File | Purpose | -|------|---------| -| [index.html](index.html) | Main entry point | -| [css/styles.css](css/styles.css) | All styles and animations | -| [js/app.js](js/app.js) | Configuration and controls | -| [images/shadoll.svg](images/shadoll.svg) | Logo asset | -| [README.md](README.md) | Project overview | -| [USAGE.md](USAGE.md) | Detailed usage guide | -| [TODO.md](TODO.md) | Development roadmap | -| [CLAUDE.md](CLAUDE.md) | AI coding guidelines | - ---- - -**Project Status**: ✅ Complete and ready for deployment -**Created**: 2025-12-27 -**Framework**: Vanilla HTML/CSS/JavaScript -**License**: MIT diff --git a/TODO.md b/TODO.md index de820aa..c16974b 100644 --- a/TODO.md +++ b/TODO.md @@ -1,61 +1,76 @@ # TODO -## Completed +## Completed ✓ + +### Core Features - [x] Create README.md with project documentation - [x] Create TODO.md for task tracking - [x] Create CLAUDE.md with AI instructions - [x] Create base HTML structure with full-screen layout - [x] Implement animated gradient background with smooth transitions - [x] Implement logo full-body animations (shake, rotate, tilt) -- [x] Implement logo internal SVG element animations (neon, color change, explosion) +- [x] Implement logo internal SVG element animations (neon, color change, explosion, fly) - [x] Create URL parameter configuration system +- [x] Add animation speed controls via URL parameters (0.1x to 5x) +- [x] Add keyboard shortcuts for toggling animations +- [x] Implement responsive design for mobile devices +- [x] Add accessibility features (reduced motion support) +- [x] Create documentation for all URL parameters + +### Enhanced Features (Recent) +- [x] Add toast notification system with liquid glass design +- [x] Create beautiful HTML help modal window +- [x] Add multiple help toggle keys (H, ?, /, ESC) +- [x] Implement 6 color palettes (default, blue-yellow, dark, light, fire, nature) +- [x] Add palette cycling with P key +- [x] Implement interactive logo mode (cursor/gyroscope control) +- [x] Create mixed mode (auto tilt + interactive on movement) +- [x] Add auto-switching between cursor and gyroscope inputs +- [x] Mobile-first responsive design (logo at 60% of screen) +- [x] Touchable kbd buttons for mobile devices +- [x] Apple-style liquid glass UI design +- [x] Footer with copyright +- [x] Fix mobile logo sizing with unified viewBox +- [x] Increase interactive tilt sensitivity for mobile ## In Progress -- [ ] Testing all animation combinations -- [ ] Performance optimization +- [ ] Final testing on various devices +- [ ] Performance profiling and optimization ## Planned Features -### Phase 1: Core Enhancements -- [ ] Add more gradient color schemes (presets) -- [ ] Add animation speed controls via URL parameters -- [ ] Add animation intensity controls -- [ ] Create visual configuration panel (optional UI overlay) -- [ ] Add keyboard shortcuts for toggling animations +### Phase 1: Future Enhancements +- [ ] Add more color palettes (custom palette creator?) +- [ ] Animation intensity controls (subtle vs dramatic) +- [ ] Save/load user preferences (localStorage) +- [ ] PWA support (offline mode, install prompt) -### Phase 2: Advanced Animations +### Phase 2: Advanced Interactions - [ ] Add particle effects around logo -- [ ] Implement parallax scrolling effects (if multi-page) -- [ ] Add transition effects between animation states -- [ ] Create custom easing functions for smoother animations -- [ ] Add sound effects (optional, toggleable) +- [ ] Multi-touch gestures for mobile +- [ ] Voice control activation (experimental) +- [ ] Camera-based face tracking for logo control -### Phase 3: Multi-Page Support -- [ ] Create page routing system using URL hash -- [ ] Design additional page layouts -- [ ] Add page transition animations -- [ ] Create navigation system +### Phase 3: Visual Enhancements +- [ ] Add blur/glow effects to logo +- [ ] Background pattern overlays +- [ ] Custom logo color picker +- [ ] Gradient animation directions (vertical, diagonal) -### Phase 4: Customization -- [ ] Add theme presets (dark, light, colorful, minimal) -- [ ] Support custom logo upload (localStorage/sessionStorage) -- [ ] Create animation timeline editor -- [ ] Add export/import configuration feature - -### Phase 5: Polish -- [ ] Add loading screen -- [ ] Implement responsive design for mobile devices -- [ ] Add accessibility features (reduced motion support) -- [ ] Create documentation for all URL parameters -- [ ] Add analytics (optional, privacy-focused) +### Phase 4: Developer Features +- [ ] Export configuration as shareable link +- [ ] QR code generator for current config +- [ ] Embed code generator for other websites +- [ ] API for programmatic control ## Known Issues - None currently ## Future Ideas -- WebGL background effects +- WebGL background effects (shader-based gradients) - Three.js integration for 3D logo animations - SVG path morphing animations -- Interactive mode (mouse/touch interaction with logo) - Audio visualization sync with animations -- Social media sharing with custom configurations +- Social media sharing with preview cards +- Theme marketplace/gallery +- Multi-language support for help system diff --git a/USAGE.md b/USAGE.md index cec1235..d08fc30 100644 --- a/USAGE.md +++ b/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 diff --git a/css/styles.css b/css/styles.css index 2c31f60..8b66091 100644 --- a/css/styles.css +++ b/css/styles.css @@ -718,8 +718,8 @@ html, body { /* ===== Responsive Design ===== */ @media (max-width: 768px) { .logo { - width: 80vmin; - height: 80vmin; + width: 100vmin; + height: 100vmin; } .toast { @@ -729,14 +729,6 @@ html, body { max-width: 80%; } - .help-button { - width: 40px; - height: 40px; - font-size: 20px; - top: 15px; - right: 15px; - } - .help-window { top: 70px; right: 10px; @@ -761,23 +753,16 @@ html, body { } .help-button { - bottom: 15px; - right: 15px; font-size: 20px; width: 40px; height: 40px; } - - .help-button:hover { - width: 40px; - height: 40px; - } } @media (max-width: 480px) { .logo { - width: 90vmin; - height: 90vmin; + width: 100vmin; + height: 100vmin; } .toast { @@ -788,11 +773,9 @@ html, body { } .help-button { + font-size: 18px; width: 36px; height: 36px; - font-size: 18px; - top: 12px; - right: 12px; } .help-window { @@ -835,19 +818,6 @@ html, body { .footer p { font-size: 11px; } - - .help-button { - bottom: 12px; - right: 12px; - font-size: 18px; - width: 36px; - height: 36px; - } - - .help-button:hover { - width: 36px; - height: 36px; - } } /* ===== Accessibility ===== */ diff --git a/js/app.js b/js/app.js index ea54342..69f8557 100644 --- a/js/app.js +++ b/js/app.js @@ -562,6 +562,14 @@ return hasAnimationSupport; } + // ===== ViewBox Setup ===== + function setupViewBox() { + const logo = elements.logo; + // Use same viewBox for all devices - logo at ~60% of screen + // Logo paths are ~510 units, so 900×900 viewBox makes logo 510/900 ≈ 57% of screen + logo.setAttribute('viewBox', '-200 -200 900 900'); + } + // ===== Initialization ===== function init() { console.log('Shadoll Animated Placeholder - Initializing...'); @@ -573,6 +581,9 @@ console.warn('Some features may not work correctly'); } + // Setup viewBox (same for all devices - mobile-first approach) + setupViewBox(); + // Get configuration from URL const config = getURLParams(); diff --git a/shadoll.svg b/shadoll.svg deleted file mode 100644 index 6056368..0000000 --- a/shadoll.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - \ No newline at end of file