Add Fireworks to your celebratory banners or announcement banners.

Happy Diwali everyone! What better time to burst crackers than in diwali. So let me tell you how to add firewors to your websites.

fireworks-js is designed to bring a touch of celebration to your websites. With just a few lines of code, you can easily integrate captivating fireworks displays into various elements, making your content more engaging and festive. Whether you want to celebrate special occasions, make announcements, or simply add a dynamic element to your website, fireworks-js is the perfect tool.

Here's an example of including fireworks-js using a CDN:

<!-- jsDelivr  -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
 
<!-- UNPKG -->
<script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script>

<!-- jsDelivr  -->
<script src="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script>
 
<!-- UNPKG -->
<script src="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script>

index.js

import { Fireworks } from "fireworks-js";
 
const container = document.querySelector(".container");
const fireworks = new Fireworks(container, {
  /* options */
});
fireworks.start();

index.js

import { Fireworks } from "fireworks-js";
 
const container = document.querySelector(".container");
const fireworks = new Fireworks(container, {
  /* options */
});
fireworks.start();

Here's an example of including fireworks-js using ReactJs:

Installation

#with npm
npm install @fireworks-js/react
 
#with yarn
yarn add @fireworks-js/react
 
#with pnpm
pnpm add @fireworks-js/react

#with npm
npm install @fireworks-js/react
 
#with yarn
yarn add @fireworks-js/react
 
#with pnpm
pnpm add @fireworks-js/react

Usage

App.tsx

import { useRef } from "react";
import { Fireworks } from "@fireworks-js/react";
import type { FireworksHandlers } from "@fireworks-js/react";
 
export function App() {
  const ref = useRef<FireworksHandlers>(null);
 
  const toggle = () => {
    if (!ref.current) return;
    if (ref.current.isRunning) {
      ref.current.stop();
    } else {
      ref.current.start();
    }
  };
  return (
    <>
      <div>
        <button onClick={() => toggle()}>Toggle</button>
        <button onClick={() => ref.current!.clear()}>Clear</button>
      </div>
      <Fireworks
        ref={ref}
        options={{ ... }} //add options for more customizations
        style={{
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          position: "fixed",
        }}
      />
    </>
  );
}

App.tsx

import { useRef } from "react";
import { Fireworks } from "@fireworks-js/react";
import type { FireworksHandlers } from "@fireworks-js/react";
 
export function App() {
  const ref = useRef<FireworksHandlers>(null);
 
  const toggle = () => {
    if (!ref.current) return;
    if (ref.current.isRunning) {
      ref.current.stop();
    } else {
      ref.current.start();
    }
  };
  return (
    <>
      <div>
        <button onClick={() => toggle()}>Toggle</button>
        <button onClick={() => ref.current!.clear()}>Clear</button>
      </div>
      <Fireworks
        ref={ref}
        options={{ ... }} //add options for more customizations
        style={{
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          position: "fixed",
        }}
      />
    </>
  );
}

For a detailed implementation with preview

Options

ℹ️

The options are optional, as well as each of its properties

Default values of options

{
  autoresize: true,
  opacity: 0.5,
  acceleration: 1.05,
  friction: 0.97,
  gravity: 1.5,
  particles: 50,
  traceLength: 3,
  traceSpeed: 10,
  explosion: 5,
  intensity: 30,
  flickering: 50,
  lineStyle: 'round',
  hue: {
    min: 0,
    max: 360
  },
  delay: {
    min: 30,
    max: 60
  },
  rocketsPoint: {
    min: 50,
    max: 50
  },
  lineWidth: {
    explosion: {
      min: 1,
      max: 3
    },
    trace: {
      min: 1,
      max: 2
    }
  },
  brightness: {
    min: 50,
    max: 80
  },
  decay: {
    min: 0.015,
    max: 0.03
  },
  mouse: {
    click: false,
    move: false,
    max: 1
  }
}

{
  autoresize: true,
  opacity: 0.5,
  acceleration: 1.05,
  friction: 0.97,
  gravity: 1.5,
  particles: 50,
  traceLength: 3,
  traceSpeed: 10,
  explosion: 5,
  intensity: 30,
  flickering: 50,
  lineStyle: 'round',
  hue: {
    min: 0,
    max: 360
  },
  delay: {
    min: 30,
    max: 60
  },
  rocketsPoint: {
    min: 50,
    max: 50
  },
  lineWidth: {
    explosion: {
      min: 1,
      max: 3
    },
    trace: {
      min: 1,
      max: 2
    }
  },
  brightness: {
    min: 50,
    max: 80
  },
  decay: {
    min: 0.015,
    max: 0.03
  },
  mouse: {
    click: false,
    move: false,
    max: 1
  }
}

Feel free to experiment with different settings to achieve the perfect fireworks display for your website.

Conclusion

In conclusion, elevate your website's festive atmosphere effortlessly with fireworks-js. With minimal code, celebrate special moments, make announcements, or add dynamic elements to your content. Whether in vanilla JavaScript or integrated into a ReactJS app, this library provides easy integration and customization. Bring a visually stunning touch to your online celebrations with fireworks-js. Happy coding and festive celebrations! 🎉🎆