Working with Gemini 2.5 Pro, I iterated through several approaches to create pure CSS explosion animations. The AI helped me explore different techniques, from simple box-shadow animations to more complex canvas-based effects.
Animation Showcase
Here are the different explosion variants we created, each with a different approach:
NOTE: these look wonky because I wasn’t originally intended to show them here. This means they aren’t centered correctly in the iframe, and the first few will only play on the first load lol. They could be fixed, but I think you get the picture.
1. Basic Pixel Explosion
2. Random Particle Spread
3. Box-Shadow Expansion
4. Repeating Spark Burst
5. Frame-by-Frame Sprite
6. JS-Controlled CSS Frames
7. Canvas Pixel Animation
8. Enhanced Canvas Animation
9. Procedural Canvas Explosion
10. Single Burst Explosion
11. Improved Single Burst
12. Color Cooldown Effect
Development Process
Gemini 2.5 Pro was instrumental in:
- Suggesting different animation techniques
- Optimizing performance for each approach
- Debugging cross-browser issues
- Iterating on visual effects
The key takeaways:
- CSS-only animations work well for simple effects but have limitations
- Canvas provides more control for complex particle systems
- Hybrid approaches (CSS+JS) offer a good balance
- Performance varies significantly between techniques
Try clicking each animation to see it in action! The later versions incorporate more advanced effects like screen shake, glow, and color transitions.