Tutorial

1. Picking an effect

Open the generator and look at the left sidebar. Effects are grouped by category - Particles, Code, Network, Atmosphere, Gradients, Space. Click any effect to switch. The canvas re-mounts at the current preview size; controls in the right sidebar swap to that effect's parameters.

The currently active effect is highlighted in blue. Click another at any time - your tweaks for the previous effect are not retained between switches (use Reset to return to defaults at any time).

2. Tweaking the controls

The right sidebar lists every control for the active effect, grouped into categories - Colors, Animation, Layout, Effects, etc. There are four control types:

• Sliders - drag for continuous values (size, count, speed, opacity).
• Color pickers - click the swatch and choose a colour.
• Toggles - on/off switches (multi-colour mode, mouse interaction, glow, etc).
• Dropdowns - discrete options (pattern type, character set, etc).

Every change updates the canvas instantly. There's no apply button.

3. The preview viewport

Top of the screen, between the brand and the Reset button: the Preview dropdown. By default the canvas fills the entire stage area, which is great for fine-tuning. But if you're designing for a specific destination - a hero banner, a mobile screen, a square social card - preview at that aspect ratio first.

Choices: Fill window (default), Hero 1920×600, Widescreen 16:9, Square 1:1, Mobile 9:16, Card 400×300.

Picking a non-Fill option constrains the canvas to that ratio with letterboxing around it. The export still has zero baked-in size - only the preview is constrained. So a Fireworks effect tweaked at Hero still pastes into any container at any size and adapts.

4. Canvas background colour

Some effects (snow, light particles, dim trails) read better against a white or light background. Use the Canvas dropdown to switch between Dark (default), Light or White. The choice flows through to all exports - pick white in the editor, the exported HTML / JS / React / iframe will use white too.

Effects that fill the entire canvas (like Noise Gradient Flow) hide the background by design - for those the setting is decorative-only.

5. Editor light / dark theme

The Light / Dark button toggles the editor chrome (sidebars, topbar, controls). It's independent of the canvas background - design dark effects on a white canvas while you work in dark UI mode, or any combination. Theme persists across reloads.

6. Exporting

Click Export ▾ in the top-right. Choose a format. The first four open a modal showing the generated source - copy or download it. PNG snapshot triggers a direct download.

• Standalone HTML - single self-contained .html file
• Plain JS file - drop-in .js with a create<Effect>(canvas) helper
• React component - single .jsx file with all params overridable as props
• Embed snippet - one <iframe> tag with everything inlined
• PNG snapshot - single high-res still of the current frame

Each export captures the source code at click time with your current parameters baked in. There's no template engine, no static drift - what's running in the editor is exactly what gets exported.

7. Using the HTML export

The simplest export. Save as fireworks.html (or whatever effect you exported), double-click - it runs.

To use as a hero background on an existing page: open the file in a text editor, copy everything between the <script> tags into your own page, and add <canvas id="stage"></canvas> wherever you want the effect.

8. Using the plain JS export

Save the file as fireworks-effect.js, include with a script tag, then call the helper:

<canvas id="myEffect" style="width:100%;height:400px;"></canvas>
<script src="fireworks-effect.js"></script>
<script>
  const handle = createFireworks(document.getElementById("myEffect"));
  // override any param at runtime:
  // const handle = createFireworks(canvas, { primaryColor: "#ff0000", launchQuantity: 6 });

  // call handle.stop() to cleanup
</script>

9. Using the React export

Save the file as FireworksEffect.jsx. Import and use:

import FireworksEffect from "./FireworksEffect.jsx";

export default function HeroSection() {
  return (
    <div style={{ width: "100%", height: 400 }}>
      <FireworksEffect primaryColor="#ff5722" launchQuantity={6} />
    </div>
  );
}

Any parameter from the editor can be passed as a prop to override the baked-in default. The component is responsive - fills its parent container.

10. Using the embed snippet

The simplest format for non-developers. The snippet is a single <iframe> with the entire effect base64-encoded inline. Paste into:

• Webflow - Embed component, paste the iframe
• Wordpress - Custom HTML block
• Notion - /embed → paste
• Substack / Ghost / blog CMSs - HTML block
• Any page that allows iframes

Adjust the height in the iframe's style to taste. Width is responsive (100%).

11. PNG snapshot

One-click download of the current canvas frame as a high-resolution PNG. DPR-aware - sharp on retina screens. Use for thumbnails, social media share images, design mockups, README screenshots.

Note: PNG is a static still. For animation, use one of the code formats and let it run live in the destination.

12. Tips & performance notes

• Glow is expensive. Each star/particle with glow triggers a Canvas shadow operation. If you crank Glow Intensity high with hundreds of particles, framerate drops. Cap glow or reduce particle count.
• Trails compound. Long trails × high particle count × many connections (Particle Network) is the recipe for a slow page. Keep trails modest unless you specifically want the lag-art look.
• Animation Speed 0 = pause. Useful for capturing the perfect frame before exporting a PNG.
• The Reset button only resets the active effect. Switching effects automatically resets to defaults too.
• The exports are MIT licensed. Use the code in client work, agency projects, your own apps - no attribution required (though appreciated). Read more on the About page.