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 | | | @9am/fire-flame-element | | Web Component | npm install @9am/fire-flame-element | | | @9am/fire-flame-react | | React Component | npm install @9am/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