Fireworks Component in Framer

Copy component

Fireworks Component in Framer

Copy component

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

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.

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.

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.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • 3D purple crystal app icon on dark background

    Logo Hover Shine Effect in Framer

    Component

    3D purple crystal app icon on dark background

    Logo Hover Shine Effect in Framer

    Component

    3D purple crystal app icon on dark background

    Logo Hover Shine Effect in 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

    Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component