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.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Join waitlist

More resources

View all

Website Hero Animation in Framer
Component
Website Hero Animation in Framer
Component
Website Hero Animation in Framer
Component
Animated Number Counter in Framer
Component
Animated Number Counter in Framer
Component
Animated Number Counter in Framer
Component