crashmax-dev/fireworks-jsPublic

NotificationsYou must be signed in to change notification settings
Fork89
Star1.3k

🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.

License

MIT license

1.3k stars 89 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 446 Commits
.changeset		.changeset
.github		.github
.vscode		.vscode
examples		examples
packages		packages
website		website
.editorconfig		.editorconfig
.gitattributes		.gitattributes
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc.cjs		.prettierrc.cjs
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
turbo.json		turbo.json

Repository files navigation

A simple fireworks library! |fireworks.js.org

Warning
This readme refers to upcoming v2 version,read here for v1 documentation.

Features

🔥 Zerodependencies
⚙️ Flexibleconfiguration
📦 Lightweight (~3.0kB gzipped)
📜 SupportsTypeScript type definition

Browsers support

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

Demo

You can play withfireworks-js atfireworks.js.org orstackblitz.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  --><scriptsrc="https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js"></script><!-- UNPKG --><scriptsrc="https://unpkg.com/fireworks-js@2.x/dist/index.umd.js"></script><!-- Usage --><script>constcontainer=document.querySelector('.fireworks')constfireworks=newFireworks.default(container)fireworks.start()</script>

Usage

`fireworks-js`

import{Fireworks}from'fireworks-js'constcontainer=document.querySelector('.container')constfireworks=newFireworks(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

Thehue,delay,decay,brightness,lineWidth.explosion,lineWidth.trace,sound.volume androcketsPoint options accept an object:

Property	Type
`min`	number
`max`	number

Note
Themin andmax properties are used to randomly select values from the range.

Themouse options accept an object:

Property	Type	Default
`click`	boolean	false
`move`	boolean	false
`max`	number	1

Note
Themax property has no effect ifclick is false.

Thesound options accept an object:

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

constfireworks=newFireworks(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}})