Viewing a saved revision (read-only)
1ad360882b424313a166753f38e19b54
Fork of Creeper Head Project Test
This interactive visualization uses pure CSS and JavaScript to draw a Minecraft Creeper head alongside a girl character, with a gradient sky that transitions through eight day and sunset states. Users cycle through states via "PREV" and "NEXT" buttons or arrow-key navigation, while JavaScript’s class-based state management updates CSS variables for sky, sun, and neck gradients. The code leverages CSS transitions, `clip-path` for the mouth, radial gradients for the sun, and `mask-image` for lighting effects, with animated blinks, jumps, and shimmering highlights applied through keyframes.
AI-generated descriptionInteractive 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
How to Use
- Open
index.htmlin a web browser - Click the "DAYTIME" or "NIGHTIME" buttons to cycle through different sky/sun states
- 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
- Pure CSS drawing with gradients and clip-path
- Responsive positioning with calc()
Customization
You can modify the gradients in index.js to create your own sky/sun color combinations.