www.shadoll/README.md

Shadoll Animated Placeholder

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

• 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, 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 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 in your browser
2. Press H, ?, or / for keyboard controls (or tap the ? button on mobile)
3. Customize using URL parameters or keyboard shortcuts

See USAGE.md for detailed configuration examples and keyboard controls.

Quick Examples

• Minimal: index.html?bg=static&logo=static
• 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

Project Structure

www.shadoll/
├── index.html          # Main page
├── css/
│   └── styles.css      # Styles and animations
├── js/
│   └── app.js          # Configuration and animation logic
├── images/
│   └── shadoll.svg     # Logo file
├── README.md           # This file
├── USAGE.md            # Detailed usage guide
├── TODO.md             # Development tasks
├── CHANGELOG.md        # Version history
└── CLAUDE.md           # AI assistant instructions

License

MIT License

Author

sHa