🎯 Interactive Avatar

Move your mouse around to see the avatar's eyes follow you!

👁️ Watch the eyes: Eyes follow your cursor and change color! Stay close for white eyes, move far away to see them turn red!

Mouse Following: Eyes smoothly track cursor movement
Color Change: White when near, red when far (distance-based)
Blinking: Natural blinking animation every 3-7 seconds
Floating Animation: Subtle 3D floating effect
Touch Support: Works on mobile devices
Responsive: Adapts to all screen sizes
Accessible: Respects reduced motion preferences
Pure Vanilla JS: No dependencies required

🎮 Controls

📦 Quick Integration

Add these 3 simple steps to any website:

<!-- Step 1: Include CSS -->
<link rel="stylesheet" href="avatar.css">

<!-- Step 2: Include JavaScript -->
<script src="avatar.js"></script>

<!-- Step 3: Initialize (after DOM loads) -->
<script>
  // Wait for DOM to be ready
  document.addEventListener('DOMContentLoaded', function() {
    const avatar = new Avatar();
    
    // Optional: Enable debug mode
    // avatar.enableDebugMode();
    
    // Optional: Change position
    // avatar.setPosition('bottom-right');
  });
</script>

🔧 Available Methods

// Toggle visibility
avatar.toggle();          // Toggle on/off
avatar.toggle(true);      // Show
avatar.toggle(false);     // Hide

// Change position
avatar.setPosition('bottom-right');
avatar.setPosition('bottom-left');
avatar.setPosition('top-right');
avatar.setPosition('top-left');

// Debug mode
avatar.enableDebugMode(); // Show tracking info

// Cleanup
avatar.destroy();         // Remove avatar

💡 Tip: Move cursor close to the avatar for white eyes, far away for red eyes. Scroll to see fade effect!