Interactive Fireworks Display 🎆

Inspiration

We wanted to create a digital experience that captures the wonder and excitement of real fireworks shows, making it accessible anytime, anywhere. The goal was to build something that would bring joy and provide a satisfying interactive experience through beautiful visual effects.

What it does

Our Interactive Fireworks Display is a web application that creates stunning firework explosions wherever you click or tap. Each firework launches with realistic physics, travels to its target height, and explodes into vibrant bursts of colorful particles with trailing effects. The application features:

• Realistic Physics: Fireworks launch with proper trajectory, gravity, and air resistance
• Particle Systems: Each explosion generates 25-50 particles with individual physics properties
• Dynamic Color Palettes: Six carefully curated color schemes for visually appealing combinations
• Trail Effects: Both fireworks and particles leave glowing trails as they move
• Mobile Responsive: Full touch support for mobile and tablet devices
• Smooth Animation: 60fps canvas-based rendering for fluid motion

How we built it

The application is built using modern web technologies:

• React with TypeScript for component structure and type safety
• HTML5 Canvas for high-performance rendering and animation
• Tailwind CSS for responsive styling
• Custom Physics Engine implementing gravity, velocity, and particle lifecycle management
• Optimized Animation Loop using requestAnimationFrame for smooth 60fps performance

The core challenge was creating realistic particle physics while maintaining smooth performance across devices. We implemented custom algorithms for:

• Firework trajectory calculation
• Particle explosion patterns with radial distribution
• Trail rendering with fade effects
• Memory-efficient particle lifecycle management

Challenges we ran into

• Performance Optimization: Rendering hundreds of particles simultaneously while maintaining 60fps required careful optimization of the drawing loop and particle cleanup
• Mobile Touch Handling: Ensuring the experience works seamlessly across different devices and input methods
• Visual Polish: Achieving realistic firework effects with proper glow, trails, and color blending using canvas APIs

Accomplishments that we're proud of

• Created a truly satisfying and joyful user experience
• Implemented realistic physics simulation from scratch
• Achieved smooth 60fps performance across devices
• Built beautiful visual effects with multiple particle systems
• Made it fully responsive and touch-friendly
• Zero external dependencies for the core fireworks engine

What we learned

• Advanced HTML5 Canvas techniques for particle systems
• Performance optimization strategies for browser animations
• Creating intuitive touch interfaces for interactive experiences
• Color theory and visual design for appealing effects

What's next

• Add sound effects synchronized with explosions
• Implement different firework types (sparklers, fountains, rockets)
• Create preset shows with choreographed sequences
• Add social sharing features to capture and share displays
• Performance improvements for rendering even more particles

Try it live: Click anywhere on the screen to launch fireworks and experience the magic! ✨

Tech Stack: React, TypeScript, HTML5 Canvas, Tailwind CSS
Platform: Web (Mobile & Desktop)

Built With

• bolt