Fireworks Show
3D fireworks animation with Three.js. Customizable particle explosions, realistic physics, auto-launching rockets, optional star field background, and adjustable gravity/timing.
Make it with Workshop
Build your own component with AI
3D fireworks animation with Three.js. Customizable particle explosions, realistic physics, auto-launching rockets, optional star field background, and adjustable gravity/timing.
Make it with Workshop
Build your own component with AI
3D Fireworks Background Component for Framer
A stunning, fully interactive 3D fireworks animation built with Three.js that brings realistic particle effects to your Framer projects. Perfect for celebration pages, New Year's sites, event announcements, or adding dynamic visual interest to any design.
Key Features:
Realistic Physics Simulation: Fireworks launch as rockets that explode into thousands of particles with authentic motion, including customizable gravity that makes particles arc and fall naturally
Multi-Color Explosions: Each firework randomly generates either single-color, dual-color, or tri-color bursts using HSL color theory for vibrant, varied displays
Auto-Launch System: Set fireworks to launch automatically at customizable intervals with randomized timing for a natural feel
Atmospheric Star field: Optional background star field creates depth and a night sky ambiance (can be toggled on/off)
Performance Optimized: Uses efficient particle systems and GPU-accelerated rendering for smooth animations even with tens of thousands of particles
Customizable Controls:
Background Color: Choose any color for the sky background
Show Starfield: Toggle the atmospheric star background on/off
Particle Count: Control explosion size from 1,000 to 30,000 particles per firework
Particle Size: Adjust individual spark size from 0.1 to 2.0
Explosion Force: Set the burst velocity from gentle spreads to powerful explosions
Gravity: Fine-tune how quickly particles fall (0.0 to 0.02)
Auto Launch: Enable/disable automatic firework launching
Launch Interval: Set timing between automatic launches (500ms to 10 seconds)
Technical Details:
Built with React and Three.js, the component features a two-phase animation system: rockets that launch upward with deceleration physics, then explode into spherical particle clouds. Particles hover briefly before gravity takes effect, creating a realistic bloom-and-fall pattern. Each explosion uses additive blending for authentic light effects and includes alpha fade-out as particles expire.
