Flame Paths
Animated flame-like wave effect
flame-paths-tw
Customize
Animation
0.5
1
10
0.6
2.5
1
Power
30
10
1
1
Color
2
0
5
1
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) |