@9am/fire-flame NPM

Demo

Package	Description	Installation
@9am/fire-flame	Vanilla JS	`npm install @9am/fire-flame`
@9am/fire-flame-element	Web Component	`npm install @9am/fire-flame-element`
@9am/fire-flame-react	React Component	`npm install @9am/fire-flame-react`

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

const ff = new FireFlame(document.querySelector('#container'), { /* option */ });

import '@9am/fire-flame-element';

// HTML
<fire-flame option='/* JSON.stringify(option) */'></fire-flame>

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

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

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