Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/crashmax-dev/fireworks-js
🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.
https://github.com/crashmax-dev/fireworks-js
angular animation canvas fireworks hacktoberfest javascript library monorepository npm-package particles preact react solidjs svelte typescript vue vue3 web-components zero-dependency
Last synced: about 1 month ago
JSON representation
🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.
- Host: GitHub
- URL: https://github.com/crashmax-dev/fireworks-js
- Owner: crashmax-dev
- License: mit
- Created: 2021-01-18T14:05:03.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-16T05:50:27.000Z (about 2 months ago)
- Last Synced: 2024-07-23T08:42:29.197Z (about 2 months ago)
- Topics: angular, animation, canvas, fireworks, hacktoberfest, javascript, library, monorepository, npm-package, particles, preact, react, solidjs, svelte, typescript, vue, vue3, web-components, zero-dependency
- Language: TypeScript
- Homepage: https://fireworks.js.org
- Size: 4.16 MB
- Stars: 1,051
- Watchers: 7
- Forks: 79
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://fireworks.js.org)
A simple fireworks library! | fireworks.js.org
---
## Table of Contents
> **Warning**\
> This readme refers to upcoming v2 version, [read here](https://github.com/crashmax-dev/fireworks-js/tree/v1) for v1 documentation.
- [Features](#features)
- [Browsers support](#browsers-support)
- [Demo](#demo)
- [Installation](#installation)
- [CDN](#cdn)
- [Usage](#usage)
- [fireworks-js](#fireworks-js)
- [@fireworks-js/react](#fireworks-jsreact)
- [@fireworks-js/preact](#fireworks-jspreact)
- [@fireworks-js/solid](#fireworks-jssolid)
- [@fireworks-js/vue](#fireworks-jsvue)
- [@fireworks-js/svelte](#fireworks-jssvelte)
- [@fireworks-js/angular](#fireworks-jsangular)
- [@fireworks-js/web](#fireworks-jsweb)
- [Documentation](#documentation)
- [Options](#options)
- [API](#api)
- [Community](#community)
## Features
- 🔥 Zero [dependencies](https://www.npmjs.com/package/fireworks-js?activeTab=dependencies)
- ⚙️ Flexible [configuration](#options)
- 📦 Lightweight ([~3.0kB gzipped](https://bundlephobia.com/package/fireworks-js))
- 📜 Supports [TypeScript](https://www.typescriptlang.org) type definition
## Browsers support
| [
](http://godban.github.io/browsers-support-badges/)
Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
iOS Safari | [
](http://godban.github.io/browsers-support-badges/)
Opera | [
](http://godban.github.io/browsers-support-badges/)
Yandex |
| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔
## Demo
You can play with `fireworks-js` at [fireworks.js.org](https://fireworks.js.org) or [stackblitz.com](https://stackblitz.com/edit/fireworks-js-react?file=src%2FApp.tsx)
## Installation
```sh
npm install fireworks-js
```
```sh
yarn add fireworks-js
```
```sh
pnpm add fireworks-js
```
| Package | Status | Description |
| ------- | ------ | ----------- |
| [fireworks-js](#fireworks-js) | [](https://npm.im/fireworks-js) | Vanilla JS |
| [@fireworks-js/react](#fireworks-jsreact) | [](https://npm.im/@fireworks-js/react) | React component |
| [@fireworks-js/preact](#fireworks-jspreact) | [](https://npm.im/@fireworks-js/preact) | Preact component |
| [@fireworks-js/solid](#fireworks-jssolid) | [](https://npm.im/@fireworks-js/solid) | Solid component |
| [@fireworks-js/vue](#fireworks-jsvue) | [](https://npm.im/@fireworks-js/vue) | Vue 3 component |
| [@fireworks-js/svelte](#fireworks-jssvelte) | [](https://npm.im/@fireworks-js/svelte) | Svelte component |
| [@fireworks-js/angular](#fireworks-jsangular) | [](https://npm.im/@fireworks-js/angular) | Angular component |
| [@fireworks-js/web](#fireworks-jsweb) | [](https://npm.im/@fireworks-js/web) | Web components |
# CDN
```html
const container = document.querySelector('.fireworks')
const fireworks = new Fireworks.default(container)
fireworks.start()
```
## Usage
#### [`fireworks-js`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/basic)
```js
import { Fireworks } from 'fireworks-js'
const container = document.querySelector('.container')
const fireworks = new Fireworks(container, { /* options */ })
fireworks.start()
```
#### [`@fireworks-js/react`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-react)
```sh
npm install @fireworks-js/react
```
#### [`@fireworks-js/preact`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-preact)
```sh
npm install @fireworks-js/preact
```
#### [`@fireworks-js/solid`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-solid)
```sh
npm install @fireworks-js/solid
```
#### [`@fireworks-js/vue`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-vue)
```sh
npm install @fireworks-js/vue
```
#### [`@fireworks-js/svelte`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-svelte)
```sh
npm install @fireworks-js/svelte
```
#### [`@fireworks-js/angular`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-angular)
```sh
npm install @fireworks-js/angular
```
#### [`@fireworks-js/web`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-web-components)
```sh
npm install @fireworks-js/web
```
## Documentation
### Options
> **Note**\
> The options is optional, as are each of its properties.
| Property | Type | Default |
| ------------------ | ------------------- | ----------------------------------------------------------------------------- |
| `hue` | object | [hue](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L49-L52) |
| `rocketsPoint` | object | [rocketsPoint](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L54-L57) |
| `mouse` | object | [mouse](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L70-L74) |
| `boundaries` | object | [boundaries](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L104-L110) |
| `sound` | object | [sound](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L91-L102) |
| `delay` | object | [delay](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L76-L79) |
| `brightness` | object | [brightness](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L81-L84) |
| `decay` | object | [decay](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L86-L89) |
| `lineWidth` | object | [lineWidth](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L59-L68) |
| `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](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L93-L97) |
| `volume` | object | [volume](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L98-L101) |
```js
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
}
})
```
### API
#### `.start()`
Start fireworks.
#### `.launch(count)`
Launching a specified number of fireworks.\
Type: `number`\
Default `1`
#### `.stop(dispose)`
Stop fireworks.\
Type: `boolean`\
Default: `false`
#### `.waitStop(dispose)`
Asynchronous stopping of the fireworks.\
Type: `boolean`\
Default: `false`
#### `.pause()`
Start/stop fireworks.
#### `.clear()`
Cleaning the canvas from fireworks.
#### `.currentOptions`
Getting current fireworks options.
#### `.updateOptions(options)`
Force update fireworks options.\
Type: [`options`](https://github.com/crashmax-dev/fireworks-js/blob/6819ec8456ecb97140a8e1f41959ca2da5c17ddf/packages/fireworks-js/src/types.ts#L3-L25)
#### `.updateSize(sizes)`
Force update canvas size.\
Type: [`sizes`](https://github.com/crashmax-dev/fireworks-js/blob/6819ec8456ecb97140a8e1f41959ca2da5c17ddf/packages/fireworks-js/src/types.ts#L58-L61)
#### `.updateBoundaries(boundaries)`
Force update canvas boundaries.\
Type: [`boundaries`](https://github.com/crashmax-dev/fireworks-js/blob/6819ec8456ecb97140a8e1f41959ca2da5c17ddf/packages/fireworks-js/src/types.ts#L35-L40)
## Community
### Star History
[](https://star-history.com/#crashmax-dev/fireworks-js&Date)
### Author
- [crashmax](https://github.com/crashmax-dev)
### License
- [MIT](https://github.com/crashmax-dev/fireworks-js/blob/master/LICENSE)