@9am/fire-flame-react

A fire flame library 🔥 Light a 'Fire' with Canvas and Particles

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