Fireworks Component in Framer

This is a customizable fireworks component for Framer. Easily trigger dazzling pyrotechnic displays on any frame and adjust the settings to match your design. Perfect for celebrations, special announcements, or any moment that deserves a spectacular visual effect. Remix the project and experiment with it to add a dynamic, eye-catching display to your designs!

Created by

Nandi

and

Isaac

Animated fireworks effect demonstration with glowing multicolor bursts

About the resource

To use this customizable fireworks component, place it on the canvas — it will trigger automatically when visible on page load. Customize your display with these options:

Adjust the color of the explosions
Choose between random, multi, or single color options
Set to loop or trigger once on page load
Fine-tune the delay between bursts (in loop mode)
Control the amount of simultaneous fireworks
Adjust the cover area up to 180°
Select from different distance presets (S/M/L/XL)
Pick explosion size presets (S/M/L/XL)
Toggle bloom effect for a different look

About the resource

To use this customizable fireworks component, place it on the canvas — it will trigger automatically when visible on page load. Customize your display with these options:

Adjust the color of the explosions
Choose between random, multi, or single color options
Set to loop or trigger once on page load
Fine-tune the delay between bursts (in loop mode)
Control the amount of simultaneous fireworks
Adjust the cover area up to 180°
Select from different distance presets (S/M/L/XL)
Pick explosion size presets (S/M/L/XL)
Toggle bloom effect for a different look

About the resource

To use this customizable fireworks component, place it on the canvas — it will trigger automatically when visible on page load. Customize your display with these options:

Adjust the color of the explosions
Choose between random, multi, or single color options
Set to loop or trigger once on page load
Fine-tune the delay between bursts (in loop mode)
Control the amount of simultaneous fireworks
Adjust the cover area up to 180°
Select from different distance presets (S/M/L/XL)
Pick explosion size presets (S/M/L/XL)
Toggle bloom effect for a different look

Framer fireworks component settings panel with customization controls — The Firework component's properties.

Learn how can one go from 0 to $11.5k with Framer in 60 days.

From no followers, no portfolio, no reputation, to making thousands with a profitable Framer business.

Get access now

More resources

View all

Playlist Generation Circular Animation in Framer
Component
Playlist Generation Circular Animation in Framer
Component
3D Letter Testimonials in Framer
Component
3D Letter Testimonials in Framer
Component