OneTaskBy Tim King · Updated
Fireworks Effect
Hero Section Fireworks With Glowing Sparks, Click to Launch and Reduced-Motion Support
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Fireworks Effect works
A fireworks effect fills the space behind your heading with rockets that climb, burst into a ring of sparks and fade away. Choose the colours, how often they launch and how many sparks each one throws, click the preview to fire your own, then copy the code.
Fireworks suit short-lived moments such as a new year page, a launch day or a sale countdown reaching zero. Keep the text readable by using a dark background and a light heading.
How the fireworks effect works
A <canvas> sits behind the content. Each rocket starts at the bottom edge with just enough
upward speed to reach its target height, then gravity slows it. When it stops rising it bursts
into sparks spread evenly around a circle at random speeds. The sparks slow down, fall and fade
out. Instead of clearing the canvas each frame, the script erases only part of the last frame,
which leaves the soft trails behind every spark.
Launching fireworks on click
Clicking anywhere on the section sends a rocket to that point. The launch(x, y) function can
also be called from your own code, for example when a countdown finishes.
FAQ
Do I need a fireworks library?
No. The whole fireworks effect is plain JavaScript and one canvas, so there is nothing to install and nothing to load from another site. Libraries add sound and more shell shapes, but this covers the classic ring burst.
What happens for visitors who prefer reduced motion?
The script checks the prefers-reduced-motion setting and, if it is on, never starts the
animation and ignores clicks. Visitors still see the heading on the plain background colour.
Will the fireworks slow the page down?
Each spark is one small circle, and they are removed once faded, so a few hundred at a time is cheap for any modern device. The loop also stops if the section is removed from the page. Lower the launch rate or sparks per burst if you target very old phones.
Why do the sparks look brighter where they overlap?
The sparks are drawn with the lighter blend mode, which adds colours together like real light.
Where two bursts cross, the overlap glows brighter, which is what makes the effect read as light
rather than paint.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Confetti Generator
Fire a burst of confetti from a button, no library.
Starfield Background
Make stars stream past as if flying through space.
Particle Background
Build a drifting network of connected dots, no library.
Cursor Trail
Add a fading dot trail that follows the mouse.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.