Flame Paths

Animated flame-like wave effect

flame-paths-tw

Customize

Tweak the props live

Animation

Speed0.5

Direction

Center Shift1

Wave Amplitude10

Wave Frequency0.6

Inner Frequency2.5

Horizontal Pull1

Power

Plus Power30

Minus Power10

Opacity1

Cursor Interaction

Cursor Intensity1

Background

#FFFFFF

Color

Red Gain2

Green Gain0

Blue Gain5

Green Power1

Blue Power1.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

Default:undefined

speednumber

Animation speed multiplier (0.1–2.0)

Default:0.5

centerShiftnumber

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

Default:1

waveAmplitudenumber

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

Default:10

waveFrequencynumber

Frequency multiplier for the horizontal wave (0.1–5)

Default:0.6

innerFrequencynumber

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

Default:2.5

horizontalPullnumber

Horizontal offset subtracted via vertical sine (0–3)

Default:1

directionnumber

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

Default:2

plusPowernumber

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

Default:30

minusPowernumber

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

Default:10

redGainnumber

Red channel brightness multiplier (0–10)

Default:2

greenGainnumber

Green channel brightness multiplier (0–10)

Default:0

blueGainnumber

Blue channel brightness multiplier (0–10)

Default:5

greenPowernumber

Green channel extra power curve (0.1–5)

Default:1

bluePowernumber

Blue channel extra power curve (0.1–5)

Default:1.5

backgroundColorstring

Background color in hex format

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to intensify flame amplitude near pointer

Default:false

cursorIntensitynumber

Cursor effect strength multiplier (0–3)

Default:1