npm.io
0.3.2 • Published 4 years ago

@9am/fire-flame

Licence
MIT
Version
0.3.2
Deps
0
Size
34 kB
Vulns
0
Weekly
0

Demo

https://user-images.githubusercontent.com/1435457/181478598-803a9822-247f-44e2-8643-3de775900153.mov

Packages

Package Status Description Installation Live Demo
@9am/fire-flame Vanilla JS npm install @9am/fire-flame Edit fire-flame
@9am/fire-flame-element Web Component npm install @9am/fire-flame-element Edit fire-flame-element
@9am/fire-flame-react React Component npm install @9am/fire-flame-react Edit fire-flame-react

Usage

@9am/fire-flame
import { FireFlame } from '@9am/fire-flame';

const ff = new FireFlame(document.querySelector('#container'), { /* option */ });
@9am/fire-flame-element
import '@9am/fire-flame-element';

// HTML
<fire-flame option='/* JSON.stringify(option) */'></fire-flame>
@9am/fire-flame-react
import { FireFlame } from '@9am/fire-flame-react';

// JSX
<FireFlame option={/* option */}></FireFlame>

Documentation

Option
Name Type Default Description
painter 'canvas' | 'svg' 'canvas' the renderer for fire flame
w number 400 width
h number 400 height
x number 0 position x
y number 0 position y
mousemove boolean true enable mousemove
fps number 60 render fps
wind Vector new Vector({ x: 0, y: -0.8 }) the Vector force applied to particles
friction number 0.98 the friction applied to particles
particleNum number 15 the number of particle to draw the flame
particleDistance number 10 the distance between particles
particleFPS number 10 particle spawn fps
sizeCurveFn function
() => x > 0.7 
? Math.sqrt(1 - x) * 50
: Math.pow(x - 1, 2) * -30 + 30
define the size of the flame
innerColor string 'blue' flame color inner
outerColor string 'blueviolet' flame color outer
API
.start()

Start fire flame.

.stop()

Stop fire flame.

.setOption(option)

Update fire flame options.

.destroy()

Destroy fire flame.

License

MIT

Keywords