Interactive Creeper Head Visualization

This project creates an interactive visualization of a Minecraft Creeper head with day/night cycle transitions.

Features

• Smooth gradient transitions between day and night
• Interactive buttons to navigate through different times of day
• Responsive design that works on various screen sizes
• Animated UI elements with hover effects
• Keyboard navigation support (arrow keys)
• Object-oriented JavaScript implementation for better maintainability
• Enhanced animations for both characters
• Improved visual design with better gradients and effects

How to Use

1. Open index.html in a web browser
2. Click the "PREV" or "NEXT" buttons to cycle through different sky/sun states
3. Use the left and right arrow keys for keyboard navigation
4. Observe the smooth transitions between each state

States

• DAYTIME: Bright blue sky with shining sun
• SUNSET-1 to SUNSET-6: Progressive sunset colors from yellow to dark purple
• NIGHTIME: Dark night sky

Technical Details

• Uses CSS variables for dynamic styling
• JavaScript controls state transitions with a class-based approach
• Pure CSS drawing with gradients and clip-path
• Responsive positioning with calc()
• Enhanced animations for more natural movement

Customization

You can modify the gradients in index.js to create your own sky/sun color combinations. Edit the animation keyframes in styles.css to change the creeper's behavior. Adjust timing and easing functions to fine-tune animations.