Topics

#angular #animation #canvas #fireworks #hacktoberfest #javascript #library #monorepository #npm-package #particles #preact #react #solidjs #svelte #typescript #vue #vue3 #web-components #zero-dependency

Language breakdown

TypeScript 86.0%

CSS 4.0%

HTML 3.5%

Svelte 3.2%

Vue 2.2%

JavaScript 1.1%

▸ Files click to expand

README

A simple fireworks library! | fireworks.js.org

Features

- 🔥 Zero dependencies - ⚙️ Flexible configuration - 📦 Lightweight (~3.0kB gzipped) - 📜 Supports TypeScript type definition

Browsers support

|
Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
Opera |
Yandex | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔

Demo

You can play with fireworks-js at fireworks.js.org or stackblitz.com

Installation

npm install fireworks-js

yarn add fireworks-js

pnpm add fireworks-js

| Package | Status | Description | | ------- | ------ | ----------- | | fireworks-js | | Vanilla JS | | @fireworks-js/react | | React component | | @fireworks-js/preact | | Preact component | | @fireworks-js/solid | | Solid component | | @fireworks-js/vue | | Vue 3 component | | @fireworks-js/svelte | | Svelte component | | @fireworks-js/angular | | Angular component | | @fireworks-js/web | | Web components |

CDN

<!-- jsDelivr  -->
<!-- UNPKG -->
<!-- Usage -->

Usage

`fireworks-js`

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

`@fireworks-js/react`

npm install @fireworks-js/react

`@fireworks-js/preact`

npm install @fireworks-js/preact

`@fireworks-js/solid`

npm install @fireworks-js/solid

`@fireworks-js/vue`

npm install @fireworks-js/vue

`@fireworks-js/svelte`

npm install @fireworks-js/svelte

`@fireworks-js/angular`

npm install @fireworks-js/angular

`@fireworks-js/web`

npm install @fireworks-js/web

Documentation

Options

Note\

The options is optional, as are each of its properties.

| Property | Type | Default | | ------------------ | ------------------- | ----------------------------------------------------------------------------- | | hue | object | hue | | rocketsPoint | object | rocketsPoint | | mouse | object | mouse | | boundaries | object | boundaries | | sound | object | sound | | delay | object | delay | | brightness | object | brightness | | decay | object | decay | | lineWidth | object | lineWidth | | lineStyle | string | round | | explosion | number | 5 | | opacity | number | 0.5 | | acceleration | number | 1.05 | | friction | number | 0.95 | | gravity | number | 1.5 | | particles | number | 50 | | traceLength | number | 3 | | flickering | number | 50 | | intensity | number | 30 | | traceSpeed | number | 10 | | intensity | number | 30 | | autoresize | boolean | true |

The hue, delay, decay, brightness, lineWidth.explosion, lineWidth.trace, sound.volume and rocketsPoint options accept an object:

| Property | Type | | -------- | ------- | | min | number | | max | number |

Note\

The min and max properties are used to randomly select values from the range.

The mouse options accept an object:

| Property | Type | Default | | -------- | ------- | ------- | | click | boolean | false | | move | boolean | false | | max | number | 1 |

Note\

The max property has no effect if click is false.

The sound options accept an object:

| Property | Type | Default | | ---------- | --------- | ------------------- | | enabled | boolean | false | | files | string[] | files | | volume | object | volume |

const fireworks = new Fireworks(container, {
  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
  }
})