Resources

Fireworks Component in Framer

View demo

Copy component

Remix project

Copy component

Remix project

Resources

Fireworks Component in Framer

View demo

Copy component

Remix project

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

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!

image of Nandi Muzsik
image of Isaac Roberts

Created by

Nandi

and

Animated fireworks effect demonstration with glowing multicolor bursts
Animated fireworks effect demonstration with glowing multicolor bursts
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 fireworks component settings panel with customization controls

The Firework component's properties.

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

Nandi portrait's background
Nandi's portrait

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

Nandi portrait's background
Nandi's portrait

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

Nandi portrait's background
Nandi's portrait

More resources

More resources

View all

  • Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component

    Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component

    Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component

  • Text animation displaying the phrase 'Framer is a design tool that makes' with the word 'makes' in blue and a vaporizing particle effect erasing the following word on a dark background

    Vaporize Text Cycle Component for Framer

    Component

    Text animation displaying the phrase 'Framer is a design tool that makes' with the word 'makes' in blue and a vaporizing particle effect erasing the following word on a dark background

    Vaporize Text Cycle Component for Framer

    Component

    Text animation displaying the phrase 'Framer is a design tool that makes' with the word 'makes' in blue and a vaporizing particle effect erasing the following word on a dark background

    Vaporize Text Cycle Component for Framer

    Component