www.shadoll/USAGE.md

Usage Guide

Quick Start

1. Open index.html in your browser
2. Press H or ? to see keyboard controls
3. Use URL parameters to configure the page

URL Parameters Reference

Background Configuration

bg - Background animation state

• static - Static gradient (no animation)
• animated - Animated gradient (default)

gradient - Gradient type

• linear - Linear gradient (default)
• radial - Radial gradient
• conic - Conic gradient

Logo Configuration

logo - Logo animation state

• static - No animations
• animated - Element animations only
• full - Full-body + element animations (default)

logoAnim - Full-body logo animation

• shake - Gentle shaking motion
• rotate - Continuous rotation
• tilt - 3D tilting effect
• all - All animations combined (default)

elementAnim - Internal SVG element animation

• neon - Neon blinking effect
• color - Color changing animation
• explosion - Explosion/implosion effect
• fly - Paths fly out and return
• all - All animations combined (default)

Performance Configuration

speed - Animation speed multiplier

• Range: 0.1 (very slow) to 5 (very fast)
• Default: 1 (normal speed)
• Examples: 0.5 (half speed), 2 (double speed), 3 (triple speed)

Example URLs

Minimal Animation

index.html?bg=static&logo=static

Neon Effect Only

index.html?bg=animated&gradient=radial&logo=animated&elementAnim=neon

Full Chaos Mode

index.html?bg=animated&gradient=conic&logo=full&logoAnim=all&elementAnim=all

Gentle Rotation

index.html?bg=animated&gradient=linear&logo=full&logoAnim=rotate&elementAnim=color

Explosion Effect

index.html?bg=static&gradient=radial&logo=animated&elementAnim=explosion

Slow Motion

index.html?speed=0.5

Fast Mode

index.html?speed=2.5&logoAnim=all&elementAnim=all

Ultra Slow Chaos

index.html?speed=0.25&bg=animated&gradient=conic&logo=full&logoAnim=all&elementAnim=all

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)
• L - Cycle logo states (static → animated → full)
• A - Cycle logo body animations (shake → rotate → tilt → 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

Note: A toast notification will appear showing your current configuration when you change settings.

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

Customization

Changing Colors

Edit the CSS custom properties in css/styles.css:

:root {
    --gradient-color-1: #667eea;
    --gradient-color-2: #764ba2;
    --gradient-color-3: #f093fb;
    --gradient-color-4: #4facfe;
}

Changing Animation Speed

Edit the timing variables in css/styles.css:

:root {
    --gradient-duration: 15s;
    --logo-shake-duration: 3s;
    --logo-rotate-duration: 8s;
    --logo-tilt-duration: 4s;
    --neon-duration: 2s;
    --color-change-duration: 5s;
    --explosion-duration: 3s;
}

Changing Logo Size

Edit the logo container width/height in css/styles.css:

.logo-container {
    width: 40vmin;  /* Adjust this */
    height: 40vmin; /* Adjust this */
}

Troubleshooting

Animations not working

• Check browser console for errors
• Verify JavaScript is enabled
• Try a different browser
• Check if reduced motion is enabled in system settings

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
• Use static background: ?bg=static
• Close other browser tabs

Development

See CLAUDE.md for development guidelines and TODO.md for planned features.