mirror of
https://github.com/shadoll/www.shadoll.git
synced 2026-08-28 03:28:32 +00:00
77 lines
2.9 KiB
Markdown
77 lines
2.9 KiB
Markdown
# 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](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](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
|