| 1 | [](https://particles.js.org)
|
| 2 |
|
| 3 | # tsParticles Fireworks Bundle
|
| 4 |
|
| 5 | [](https://www.jsdelivr.com/package/npm/tsparticles-fireworks) [](https://www.npmjs.com/package/tsparticles-fireworks) [](https://www.npmjs.com/package/tsparticles-fireworks) [](https://github.com/sponsors/matteobruni)
|
| 6 |
|
| 7 | [tsParticles](https://github.com/matteobruni/tsparticles) fireworks bundle loads all the features necessary to create beautiful fireworks effects with ease.
|
| 8 |
|
| 9 | **Included Packages**
|
| 10 |
|
| 11 | - [tsparticles-engine](https://github.com/matteobruni/tsparticles/tree/main/engine)
|
| 12 | - [tsparticles-move-base](https://github.com/matteobruni/tsparticles/tree/main/move/base)
|
| 13 | - [tsparticles-plugin-emitters](https://github.com/matteobruni/tsparticles/tree/main/plugins/emitters)
|
| 14 | - [tsparticles-plugin-sounds](https://github.com/matteobruni/tsparticles/tree/main/plugins/sounds)
|
| 15 | - [tsparticles-shape-circle](https://github.com/matteobruni/tsparticles/tree/main/shapes/circle)
|
| 16 | - [tsparticles-shape-line](https://github.com/matteobruni/tsparticles/tree/main/shapes/line)
|
| 17 | - [tsparticles-updater-angle](https://github.com/matteobruni/tsparticles/tree/main/updaters/angle)
|
| 18 | - [tsparticles-updater-color](https://github.com/matteobruni/tsparticles/tree/main/updaters/color)
|
| 19 | - [tsparticles-updater-destroy](https://github.com/matteobruni/tsparticles/tree/main/updaters/destroy)
|
| 20 | - [tsparticles-updater-life](https://github.com/matteobruni/tsparticles/tree/main/updaters/life)
|
| 21 | - [tsparticles-updater-opacity](https://github.com/matteobruni/tsparticles/tree/main/updaters/opacity)
|
| 22 | - [tsparticles-updater-out-modes](https://github.com/matteobruni/tsparticles/tree/main/updaters/outModes)
|
| 23 | - [tsparticles-updater-size](https://github.com/matteobruni/tsparticles/tree/main/updaters/size)
|
| 24 | - [tsparticles-updater-stroke-color](https://github.com/matteobruni/tsparticles/tree/main/updaters/strokeColor)
|
| 25 |
|
| 26 | ## How to use it
|
| 27 |
|
| 28 | ### CDN / Vanilla JS / jQuery
|
| 29 |
|
| 30 | The CDN/Vanilla version JS has two different files:
|
| 31 |
|
| 32 | - One is a bundle file with all the scripts included in a single file
|
| 33 | - One is a file including just the `fireworks` function to load the tsParticles fireworks bunddle, all dependencies must be
|
| 34 | included manually
|
| 35 |
|
| 36 | #### Bundle
|
| 37 |
|
| 38 | Including the `tsparticles.fireworks.bundle.min.js` file will out of the box.
|
| 39 |
|
| 40 | This is the easiest usage, since it's a single file with all the features loaded.
|
| 41 |
|
| 42 | You can still add additional packages, loading them like all the other packages.
|
| 43 |
|
| 44 | #### Not Bundle
|
| 45 |
|
| 46 | This installation requires more work since all dependencies must be included in the page. Some lines above are all
|
| 47 | specified in the **Included Packages** section.
|
| 48 |
|
| 49 | ### Usage
|
| 50 |
|
| 51 | Once the scripts are loaded you can set up `tsParticles` like the following examples:
|
| 52 |
|
| 53 | ````javascript
|
| 54 |
|
| 55 | ** Easiest Way **
|
| 56 |
|
| 57 | ```javascript
|
| 58 | fireworks()
|
| 59 | ````
|
| 60 |
|
| 61 | ** Async Way, best practice **
|
| 62 |
|
| 63 | ```javascript
|
| 64 | (async () => {
|
| 65 | await fireworks();
|
| 66 | })();
|
| 67 | ```
|
| 68 |
|
| 69 | ** Fireworks Options **
|
| 70 |
|
| 71 | ```javascript
|
| 72 | fireworks({
|
| 73 | colors: ["#ffffff", "#ff0000"],
|
| 74 | });
|
| 75 | ```
|
| 76 |
|
| 77 | #### Options
|
| 78 |
|
| 79 | The `fireworks` has only a single `options` object parameter, with the following properties:
|
| 80 |
|
| 81 | - `brightness` Number or { min: number; max: number; }: The brightness offset applied to the particles color, from -100 to 100.
|
| 82 | - `colors` String or _Array<String>_: An array of color strings, in the HEX format... you know, like `#bada55`.
|
| 83 | - `gravity` Number or { min: number; max: number; }: The gravity applied to the fireworks particles.
|
| 84 | - `minHeight` Number or { min: number; max: number; }: The minimum height for fireworks explosions (the lesser, the higher).
|
| 85 | - `rate` Number or { min: number; max: number; }: The rate of the fireworks explosions.
|
| 86 | - `saturation` Number or { min: number; max: number; }: The saturation offset applied to the particles color, from -100 to 100.
|
| 87 | - `sounds` Boolean: Whether to play sounds or not.
|
| 88 | - `speed` Number or { min: number; max: number; }: The speed of the fireworks particles.
|
| 89 | - `splitCount` Number or { min: number; max: number; }: The number of particles to split the emitter in.
|