Flame Paths

Animated flame-like wave effect

flame-paths-tw

Customize

Speed

0.5

Center Shift

1.0

Wave Amplitude

10.0

Wave Frequency

0.6

Inner Frequency

2.5

Horizontal Pull

1.0

Plus Power

Minus Power

Opacity

1.00

Cursor Interaction

Cursor Intensity

1.0

Background

Red Gain

2.0

Green Gain

0.0

Blue Gain

5.0

Green Power

1.0

Blue Power

1.5

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`0.5`	Animation speed multiplier (0.1–2.0)
`centerShift`	number	`1`	Vertical center offset of the wave field (-2–5)
`waveAmplitude`	number	`10`	Amplitude of the sine wave driving vertical distortion (0–30)
`waveFrequency`	number	`0.6`	Frequency multiplier for the horizontal wave (0.1–5)
`innerFrequency`	number	`2.5`	Frequency of the inner sine warp layer (0.1–10)
`horizontalPull`	number	`1`	Horizontal offset subtracted via vertical sine (0–3)
`direction`	number	`2`	Animation direction: 0=right, 1=left, 2=up, 3=down
`plusPower`	number	`30`	Exponent applied to the plus-channel cosine (1–60)
`minusPower`	number	`10`	Exponent applied to the minus-channel cosine (1–60)
`redGain`	number	`2`	Red channel brightness multiplier (0–10)
`greenGain`	number	`0`	Green channel brightness multiplier (0–10)
`blueGain`	number	`5`	Blue channel brightness multiplier (0–10)
`greenPower`	number	`1`	Green channel extra power curve (0.1–5)
`bluePower`	number	`1.5`	Blue channel extra power curve (0.1–5)
`backgroundColor`	string	`"#000000"`	Background color in hex format
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to intensify flame amplitude near pointer
`cursorIntensity`	number	`1`	Cursor effect strength multiplier (0–3)

widthstring | number

Container width

Default"100%"

heightstring | number

Container height

Default"100%"

classNamestring

Additional CSS classes for styling

Default""

childrenReactNode

Content rendered above the effect

Defaultundefined

speednumber

Animation speed multiplier (0.1–2.0)

Default0.5

centerShiftnumber

Vertical center offset of the wave field (-2–5)

Default1

waveAmplitudenumber

Amplitude of the sine wave driving vertical distortion (0–30)

Default10

waveFrequencynumber

Frequency multiplier for the horizontal wave (0.1–5)

Default0.6

innerFrequencynumber

Frequency of the inner sine warp layer (0.1–10)

Default2.5

horizontalPullnumber

Horizontal offset subtracted via vertical sine (0–3)

Default1

directionnumber

Animation direction: 0=right, 1=left, 2=up, 3=down

Default2

plusPowernumber

Exponent applied to the plus-channel cosine (1–60)

Default30

minusPowernumber

Exponent applied to the minus-channel cosine (1–60)

Default10

redGainnumber

Red channel brightness multiplier (0–10)

Default2

greenGainnumber

Green channel brightness multiplier (0–10)

Default0

blueGainnumber

Blue channel brightness multiplier (0–10)

Default5

greenPowernumber

Green channel extra power curve (0.1–5)

Default1

bluePowernumber

Blue channel extra power curve (0.1–5)

Default1.5

backgroundColorstring

Background color in hex format

Default"#000000"

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to intensify flame amplitude near pointer

Defaultfalse

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default1