github-personal/www.shadoll
1
0
Fork 0
mirror of https://github.com/shadoll/www.shadoll.git synced 2026-08-28 11:33:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sha
2025-12-28 05:27:52 +02:00
parent 9580d4a49e
commit 6ced857f0f
9 changed files with 408 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+95
View File
@@ -2,6 +2,101 @@
All notable changes to the Shadoll Animated Placeholder project will be documented in this file. 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 ## [1.1.0] - 2025-12-27
### Added ### Added
CLAUDE.md
+115 -17
View File
@@ -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 3. **Performance First**: Smooth 60fps animations, minimal resource usage
4. **Configuration Flexibility**: URL parameters for customization 4. **Configuration Flexibility**: URL parameters for customization
5. **Progressive Enhancement**: Works without JavaScript, enhanced with it 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 ## File Structure Rules
@@ -40,10 +41,12 @@ This is a static, animated placeholder page for the Shadoll project. It features
### CSS ### CSS
- BEM naming convention for classes - BEM naming convention for classes
- CSS custom properties for theming - CSS custom properties for theming (palettes, animation speed)
- Mobile-first responsive design - Mobile-first responsive design (single unified solution for all devices)
- Prefer CSS animations over JavaScript where possible - Prefer CSS animations over JavaScript where possible
- Use `transform` and `opacity` for performant animations - 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 ### JavaScript
- Vanilla JavaScript (no frameworks) - 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 - Comments for complex logic
- URL parameter parsing for configuration - URL parameter parsing for configuration
- Fallbacks for missing parameters - 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 ## 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 - Use `will-change` sparingly for performance hints
### JavaScript Animations ### JavaScript Animations
- Use `requestAnimationFrame` for smooth animations - Use `requestAnimationFrame` for smooth animations (not currently used)
- Throttle/debounce event handlers - Throttle/debounce event handlers
- Clean up animations on page unload - Clean up animations on page unload
- Provide reduced-motion alternatives - 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 ## SVG Logo Structure
The logo consists of two main elements: ### Logo Design
- `#shadoll_l` - The "L" shape (black, `#222`) The logo represents the letters "s" and "d" extracted from "shadoll" ({s}ha{d}oll), designed as geometric shapes divided into sections:
- `#shadoll_s` - The "S" shape (red, `#dc2108`, contains 2 path elements) - Left element: "s" shape (represented by `#shadoll_s` in SVG)
- Right element: "d" shape (represented by `#shadoll_l` in SVG)
When animating: **Note**: The naming convention reflects the letter shapes - `l` in the path name comes from "{d}oll", while `s` comes from "{s}ha".
- Full-body animations apply to the entire SVG container
- Internal animations target individual paths within the SVG ### SVG Elements
- Maintain aspect ratio and viewBox - `#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 - 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 ## Configuration System
URL parameters should follow this pattern: 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: Default values when parameters are missing:
- `bg`: `animated` - `bg`: `animated`
- `gradient`: `linear` - `gradient`: `linear`
- `logo`: `animated` - `palette`: `default`
- `logoAnim`: `all` - `logo`: `full`
- `logoAnim`: `mixed` (changed from `tilt` in v2.0.0)
- `elementAnim`: `neon` - `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 ## Git Workflow
@@ -104,12 +146,16 @@ Default values when parameters are missing:
Before considering a feature complete: Before considering a feature complete:
- [ ] Test in Chrome, Firefox, Safari - [ ] 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 - [ ] Verify smooth 60fps performance
- [ ] Check with reduced motion preferences - [ ] Check with reduced motion preferences
- [ ] Validate HTML/CSS - [ ] Validate HTML/CSS
- [ ] Test all URL parameter combinations - [ ] 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 ## Performance Targets
@@ -137,12 +183,30 @@ When adding new features:
4. Update URL parameter documentation in [README.md](README.md) 4. Update URL parameter documentation in [README.md](README.md)
5. Add task completion to [TODO.md](TODO.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 ### Adding a New Gradient Type
1. Create CSS custom properties for gradient 1. Create CSS custom properties for gradient
2. Add gradient class in [styles.css](css/styles.css) 2. Add gradient class in [styles.css](css/styles.css)
3. Update configuration logic in [app.js](js/app.js) 3. Update configuration logic in [app.js](js/app.js)
4. Document new gradient type in [README.md](README.md) 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 ### Debugging Animation Performance
1. Open Chrome DevTools > Performance 1. Open Chrome DevTools > Performance
2. Record animation sequence 2. Record animation sequence
@@ -151,14 +215,48 @@ When adding new features:
5. Optimize by using `transform`/`opacity` only 5. Optimize by using `transform`/`opacity` only
6. Add `will-change` if needed 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 ## AI Assistant Best Practices
When working on this project: When working on this project:
- Always read existing files before suggesting changes - Always read existing files before suggesting changes
- Maintain consistency with existing code style - 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 - Test changes in browser if possible
- Ask for clarification on ambiguous requirements - Ask for clarification on ambiguous requirements
- Suggest performance optimizations - Suggest performance optimizations
- Consider mobile and accessibility - Consider mobile and accessibility (touch targets, gyroscope, screen readers)
- Keep solutions simple and maintainable - 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
README.md
+28 -23
View File
@@ -1,34 +1,51 @@
# Shadoll Animated Placeholder # 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 ## 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**: - **Logo Animations**:
- Full-body animations: shake, rotate, tilt - Full-body animations: shake, rotate, tilt, interactive (cursor/gyroscope), mixed mode
- Internal SVG element animations: neon blinking, color changing, explosion effects - Internal SVG element animations: neon blinking, color changing, explosion effects, fly animations
- Full-page animation space (logo animates across entire viewport) - 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**: - **Real-time Configuration**:
- URL parameter support for all settings - 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) - 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 - **Zero Backend**: Pure HTML/CSS/JavaScript implementation
- **GitHub Pages Ready**: Deploy directly as a static site - **GitHub Pages Ready**: Deploy directly as a static site
## Quick Start ## Quick Start
1. Open [index.html](index.html) in your browser 1. Open [index.html](index.html) in your browser
2. Press `H` or `?` for keyboard controls 2. Press `H`, `?`, or `/` for keyboard controls (or tap the `?` button on mobile)
3. Customize using URL parameters 3. Customize using URL parameters or keyboard shortcuts
See [USAGE.md](USAGE.md) for detailed configuration examples and keyboard controls. See [USAGE.md](USAGE.md) for detailed configuration examples and keyboard controls.
### Quick Examples ### Quick Examples
- **Minimal**: `index.html?bg=static&logo=static` - **Minimal**: `index.html?bg=static&logo=static`
- **Neon Effect**: `index.html?elementAnim=neon` - **Interactive Mode**: `index.html?logoAnim=interactive`
- **Full Chaos**: `index.html?logoAnim=all&elementAnim=all` - **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` - **Slow Motion**: `index.html?speed=0.5`
- **Fast Mode**: `index.html?speed=2.5` - **Fast Mode**: `index.html?speed=2.5`
@@ -50,22 +67,10 @@ www.shadoll/
└── CLAUDE.md # AI assistant instructions └── 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 ## License
MIT License MIT License
## Author ## Author
Shadoll sHa
SUMMARY.md
-200
View File
@@ -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
TODO.md
+50 -35
View File
@@ -1,61 +1,76 @@
# TODO # TODO
## Completed ## Completed ✓
### Core Features
- [x] Create README.md with project documentation - [x] Create README.md with project documentation
- [x] Create TODO.md for task tracking - [x] Create TODO.md for task tracking
- [x] Create CLAUDE.md with AI instructions - [x] Create CLAUDE.md with AI instructions
- [x] Create base HTML structure with full-screen layout - [x] Create base HTML structure with full-screen layout
- [x] Implement animated gradient background with smooth transitions - [x] Implement animated gradient background with smooth transitions
- [x] Implement logo full-body animations (shake, rotate, tilt) - [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] 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 ## In Progress
- [ ] Testing all animation combinations - [ ] Final testing on various devices
- [ ] Performance optimization - [ ] Performance profiling and optimization
## Planned Features ## Planned Features
### Phase 1: Core Enhancements ### Phase 1: Future Enhancements
- [ ] Add more gradient color schemes (presets) - [ ] Add more color palettes (custom palette creator?)
- [ ] Add animation speed controls via URL parameters - [ ] Animation intensity controls (subtle vs dramatic)
- [ ] Add animation intensity controls - [ ] Save/load user preferences (localStorage)
- [ ] Create visual configuration panel (optional UI overlay) - [ ] PWA support (offline mode, install prompt)
- [ ] Add keyboard shortcuts for toggling animations
### Phase 2: Advanced Animations ### Phase 2: Advanced Interactions
- [ ] Add particle effects around logo - [ ] Add particle effects around logo
- [ ] Implement parallax scrolling effects (if multi-page) - [ ] Multi-touch gestures for mobile
- [ ] Add transition effects between animation states - [ ] Voice control activation (experimental)
- [ ] Create custom easing functions for smoother animations - [ ] Camera-based face tracking for logo control
- [ ] Add sound effects (optional, toggleable)
### Phase 3: Multi-Page Support ### Phase 3: Visual Enhancements
- [ ] Create page routing system using URL hash - [ ] Add blur/glow effects to logo
- [ ] Design additional page layouts - [ ] Background pattern overlays
- [ ] Add page transition animations - [ ] Custom logo color picker
- [ ] Create navigation system - [ ] Gradient animation directions (vertical, diagonal)
### Phase 4: Customization ### Phase 4: Developer Features
- [ ] Add theme presets (dark, light, colorful, minimal) - [ ] Export configuration as shareable link
- [ ] Support custom logo upload (localStorage/sessionStorage) - [ ] QR code generator for current config
- [ ] Create animation timeline editor - [ ] Embed code generator for other websites
- [ ] Add export/import configuration feature - [ ] API for programmatic control
### 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)
## Known Issues ## Known Issues
- None currently - None currently
## Future Ideas ## Future Ideas
- WebGL background effects - WebGL background effects (shader-based gradients)
- Three.js integration for 3D logo animations - Three.js integration for 3D logo animations
- SVG path morphing animations - SVG path morphing animations
- Interactive mode (mouse/touch interaction with logo)
- Audio visualization sync with animations - 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
USAGE.md
+104 -23
View File
@@ -3,8 +3,9 @@
## Quick Start ## Quick Start
1. Open [index.html](index.html) in your browser 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 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 ## URL Parameters Reference
@@ -19,6 +20,14 @@
- `radial` - Radial gradient - `radial` - Radial gradient
- `conic` - Conic 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 Configuration
**logo** - Logo animation state **logo** - Logo animation state
@@ -30,7 +39,9 @@
- `shake` - Gentle shaking motion - `shake` - Gentle shaking motion
- `rotate` - Continuous rotation - `rotate` - Continuous rotation
- `tilt` - 3D tilting effect - `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 **elementAnim** - Internal SVG element animation
- `neon` - Neon blinking effect - `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 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 ## Keyboard Controls
While on the page, you can use these keys to change settings in real-time: While on the page, you can use these keys to change settings in real-time:
- `B` - Toggle background animation (animated ↔ static) - `B` - Toggle background animation (animated ↔ static)
- `G` - Cycle gradient types (linear → radial → conic) - `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) - `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) - `E` - Cycle element animations (neon → color → explosion → fly → all)
- `+` or `=` - Increase animation speed (+0.25x) - `+` or `=` - Increase animation speed (+0.25x)
- `-` or `_` - Decrease animation speed (-0.25x) - `-` or `_` - Decrease animation speed (-0.25x)
- `0` - Reset speed to 1x - `0` - Reset speed to 1x
- `R` - Reset all to default configuration - `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 ## Performance Tips
1. **Reduced Motion**: The page respects `prefers-reduced-motion` system settings 1. **Reduced Motion**: The page respects `prefers-reduced-motion` system settings
2. **Browser Compatibility**: Best viewed in modern browsers (Chrome, Firefox, Safari, Edge) 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 ## 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 ```css
:root { .palette--custom {
--gradient-color-1: #667eea; --gradient-color-1: #your-color-1;
--gradient-color-2: #764ba2; --gradient-color-2: #your-color-2;
--gradient-color-3: #f093fb; --gradient-color-3: #your-color-3;
--gradient-color-4: #4facfe; --gradient-color-4: #your-color-4;
} }
``` ```
Then use `?palette=custom` in the URL.
### Changing Animation Speed ### Changing Animation Speed
Edit the timing variables in [css/styles.css](css/styles.css:10-16): 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 ### 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 ```javascript
.logo-container { function setupViewBox() {
width: 40vmin; /* Adjust this */ const logo = elements.logo;
height: 40vmin; /* Adjust this */ // 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 ## Troubleshooting
### Animations not working ### 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 ### Page looks broken
- Clear browser cache - Clear browser cache
- Ensure all files are in correct directories
- Check that `images/shadoll.svg` exists
### Slow performance ### Slow performance
- Try simpler animation combinations - 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 static background: `?bg=static`
- Use simpler logo animations: `?logoAnim=tilt`
- Close other browser tabs - 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
css/styles.css
+5 -35
View File
@@ -718,8 +718,8 @@ html, body {
/* ===== Responsive Design ===== */ /* ===== Responsive Design ===== */
@media (max-width: 768px) { @media (max-width: 768px) {
.logo { .logo {
width: 80vmin; width: 100vmin;
height: 80vmin; height: 100vmin;
} }
.toast { .toast {
@@ -729,14 +729,6 @@ html, body {
max-width: 80%; max-width: 80%;
} }
.help-button {
width: 40px;
height: 40px;
font-size: 20px;
top: 15px;
right: 15px;
}
.help-window { .help-window {
top: 70px; top: 70px;
right: 10px; right: 10px;
@@ -761,23 +753,16 @@ html, body {
} }
.help-button { .help-button {
bottom: 15px;
right: 15px;
font-size: 20px; font-size: 20px;
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
.help-button:hover {
width: 40px;
height: 40px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.logo { .logo {
width: 90vmin; width: 100vmin;
height: 90vmin; height: 100vmin;
} }
.toast { .toast {
@@ -788,11 +773,9 @@ html, body {
} }
.help-button { .help-button {
font-size: 18px;
width: 36px; width: 36px;
height: 36px; height: 36px;
font-size: 18px;
top: 12px;
right: 12px;
} }
.help-window { .help-window {
@@ -835,19 +818,6 @@ html, body {
.footer p { .footer p {
font-size: 11px; font-size: 11px;
} }
.help-button {
bottom: 12px;
right: 12px;
font-size: 18px;
width: 36px;
height: 36px;
}
.help-button:hover {
width: 36px;
height: 36px;
}
} }
/* ===== Accessibility ===== */ /* ===== Accessibility ===== */
js/app.js
+11
View File
@@ -562,6 +562,14 @@
return hasAnimationSupport; 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 ===== // ===== Initialization =====
function init() { function init() {
console.log('Shadoll Animated Placeholder - Initializing...'); console.log('Shadoll Animated Placeholder - Initializing...');
@@ -573,6 +581,9 @@
console.warn('Some features may not work correctly'); console.warn('Some features may not work correctly');
} }
// Setup viewBox (same for all devices - mobile-first approach)
setupViewBox();
// Get configuration from URL // Get configuration from URL
const config = getURLParams(); const config = getURLParams();
shadoll.svg
-8
View File
@@ -1,8 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 510 510">
<path id="shadoll_l" d="m286.7 401.2 61.9 60.2v-389.4l-62.4-60.6z" stroke="none" stroke-width="2"
stroke-miterlimit="10" fill="#222"/>
<g id="shadoll_s" stroke="none" stroke-width="2" stroke-miterlimit="10" fill="#dc2108">
<path d="m161.2 500 106.1-100.8-39-37.2-66.9 63.6z" />
<path d="m275 174.3-113.8 108.9 113.8 108.9v-73.6l-37-35.3 37-36.3z" />
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 470 B