Flame Paths

Glowing flame tongues that gust and flare up

flame-paths-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Light a fire under your launch

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

Light a fire under your launch

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

Light a fire under your launch

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

Customize

Left Color

Right Color

Background

Speed

0.40

Length

1.00

Brightness

1.00

Glow

1.00

Core

1.00

Flicker

0.50

Wave Amplitude

10.0

Wave Frequency

0.60

Inner Frequency

2.5

Center Shift

1.00

Horizontal Pull

1.00

Plus Power

Minus Power

Gust

1.00

Flare

1.00

Opacity

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`["#6600FF", "#FF0000"]`	Flame colours from the left of the row to the right, blended in OKLCh.
`backgroundColor`	string	`"#000000"`	Canvas background. Light colours switch to ink flames. Use transparent to sit on the page; light pages are detected automatically.
`origin`	"top" \| "bottom"	`"top"`	Where the flames are rooted: hanging from the top edge or rising from the bottom.
`speed`	number	`0.4`	Speed of the flame motion.
`length`	number	`1`	How far the flames reach from their root.
`brightness`	number	`1`	Overall light output.
`glow`	number	`1`	Soft bloom around the brightest parts of the flames.
`core`	number	`1`	Strength of the white-hot core at the hottest point of each flame.
`flicker`	number	`0.5`	How much each tongue breathes and sways on its own.
`centerShift`	number	`1`	Moves the calm centre of the row. Other values sweep the flames into arcs.
`waveAmplitude`	number	`10`	Density of the tongues. Higher values give more, thinner flames.
`waveFrequency`	number	`0.6`	Waviness along each flame. High values give S-shaped tongues.
`innerFrequency`	number	`2.5`	Frequency of the inner wave that splits the row into tongues.
`horizontalPull`	number	`1`	Pulls the middle of the row out of step with the edges.
`plusPower`	number	`30`	Sharpness of the flames along their length.
`minusPower`	number	`10`	Sharpness of the flames across their width.
`interactive`	boolean	`true`	Moving the pointer fans the flames like a gust. Clicking makes them flare up; flare-ups stack.
`gustStrength`	number	`1`	How strongly pointer movement fans the flames.
`flareStrength`	number	`1`	Strength of each click flare-up.
`opacity`	number	`1`	Opacity of the whole canvas.
`intro`	boolean	`true`	Grows the flames in from their root when the component appears.
`paused`	boolean	`false`	Stops the motion. Reduced-motion users always get a still frame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`width`	string \| number	`"100%"`	Width of the component.
`height`	string \| number	`"100%"`	Height of the component.
`children`	ReactNode	`-`	Content rendered above the flames.
`ref`	{ flare, replay }	`-`	flare(strength?, x?) fires a flare-up from code. replay() restarts the intro.
`className`	string	`-`	Classes for the root element.
`style`	CSSProperties	`-`	Inline styles for the root.

colors[string, string]

Flame colours from the left of the row to the right, blended in OKLCh.

Default["#6600FF", "#FF0000"]

backgroundColorstring

Canvas background. Light colours switch to ink flames. Use transparent to sit on the page; light pages are detected automatically.

Default"#000000"

origin"top" | "bottom"

Where the flames are rooted: hanging from the top edge or rising from the bottom.

Default"top"

speednumber

Speed of the flame motion.

Default0.4

lengthnumber

How far the flames reach from their root.

Default1

brightnessnumber

Overall light output.

Default1

glownumber

Soft bloom around the brightest parts of the flames.

Default1

corenumber

Strength of the white-hot core at the hottest point of each flame.

Default1

flickernumber

How much each tongue breathes and sways on its own.

Default0.5

centerShiftnumber

Moves the calm centre of the row. Other values sweep the flames into arcs.

Default1

waveAmplitudenumber

Density of the tongues. Higher values give more, thinner flames.

Default10

waveFrequencynumber

Waviness along each flame. High values give S-shaped tongues.

Default0.6

innerFrequencynumber

Frequency of the inner wave that splits the row into tongues.

Default2.5

horizontalPullnumber

Pulls the middle of the row out of step with the edges.

Default1

plusPowernumber

Sharpness of the flames along their length.

Default30

minusPowernumber

Sharpness of the flames across their width.

Default10

interactiveboolean

Moving the pointer fans the flames like a gust. Clicking makes them flare up; flare-ups stack.

Defaulttrue

gustStrengthnumber

How strongly pointer movement fans the flames.

Default1

flareStrengthnumber

Strength of each click flare-up.

Default1

opacitynumber

Opacity of the whole canvas.

Default1

introboolean

Grows the flames in from their root when the component appears.

Defaulttrue

pausedboolean

Stops the motion. Reduced-motion users always get a still frame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

widthstring | number

Width of the component.

Default"100%"

heightstring | number

Height of the component.

Default"100%"

childrenReactNode

Content rendered above the flames.

Default-

ref{ flare, replay }

flare(strength?, x?) fires a flare-up from code. replay() restarts the intro.

Default-

classNamestring

Classes for the root element.

Default-

styleCSSProperties

Inline styles for the root.

Default-

Name

Type

Default

Description

colors

[string, string]

["#6600FF", "#FF0000"]

Flame colours from the left of the row to the right, blended in OKLCh.

backgroundColor

string

"#000000"

Canvas background. Light colours switch to ink flames. Use transparent to sit on the page; light pages are detected automatically.

origin

"top" | "bottom"

"top"

Where the flames are rooted: hanging from the top edge or rising from the bottom.

speed

number

0.4

Speed of the flame motion.

length

number

1

How far the flames reach from their root.

brightness

number

1

Overall light output.

glow

number

1

Soft bloom around the brightest parts of the flames.

core

number

1

Strength of the white-hot core at the hottest point of each flame.

flicker

number

0.5

How much each tongue breathes and sways on its own.

centerShift

number

1

Moves the calm centre of the row. Other values sweep the flames into arcs.

waveAmplitude

number

10

Density of the tongues. Higher values give more, thinner flames.

waveFrequency

number

0.6

Waviness along each flame. High values give S-shaped tongues.

innerFrequency

number

2.5

Frequency of the inner wave that splits the row into tongues.

horizontalPull

number

1

Pulls the middle of the row out of step with the edges.

plusPower

number

30

Sharpness of the flames along their length.

minusPower

number

10

Sharpness of the flames across their width.

interactive

boolean

true

Moving the pointer fans the flames like a gust. Clicking makes them flare up; flare-ups stack.

gustStrength

number

1

How strongly pointer movement fans the flames.

flareStrength

number

1

Strength of each click flare-up.

opacity

number

1

Opacity of the whole canvas.

intro

boolean

true

Grows the flames in from their root when the component appears.

paused

boolean

false

Stops the motion. Reduced-motion users always get a still frame.

dpr

number

2

Maximum device pixel ratio for the canvas.

width

string | number

"100%"

Width of the component.

height

string | number

"100%"

Height of the component.

children

ReactNode

-

Content rendered above the flames.

ref

{ flare, replay }

-

flare(strength?, x?) fires a flare-up from code. replay() restarts the intro.

className

string

-

Classes for the root element.

style

CSSProperties

-

Inline styles for the root.