Grain Wave

Grainy wave texture animation effect

grain-wave-tw

Customize

Speed

0.5

Wave Count

25

Amplitude

0.85

Frequency

4.0

Wave Width

3.5

Speed Variation

0.006

Line Thickness

0.20

Grain Intensity

50

Scale

0.6

Brightness

1.0

Start Color

End Color

Light Mode

Dark Mode

Props

17

Name	Type	Default	Description
`width`	number \| string	`"100%"`	Width of the component in pixels or CSS value
`height`	number \| string	`"100%"`	Height of the component in pixels or CSS value
`speed`	number	`0.5`	Animation speed multiplier
`waveCount`	number	`25`	Number of wave lines
`waveAmplitude`	number	`0.85`	Wave amplitude/height
`waveFrequency`	number	`4`	Horizontal wave frequency
`lineThickness`	number	`0.2`	Line thickness
`grainIntensity`	number	`50`	Grain/dither intensity
`startColor`	string	`"#ff6666"`	Start color (top waves)
`endColor`	string	`"#6666ff"`	End color (bottom waves)
`lightBackground`	string	`"#ffffff"`	Background color for light mode
`darkBackground`	string	`"#000000"`	Background color for dark mode
`brightness`	number	`1`	Overall brightness
`speedVariation`	number	`0.006`	Wave speed variation between lines
`waveWidth`	number	`3.5`	Width of the wave effect (horizontal spread)
`scale`	number	`0.6`	Scale of the entire effect
`className`	string	`""`	Additional CSS classes

widthnumber | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

speednumber

Animation speed multiplier

Default0.5

waveCountnumber

Number of wave lines

Default25

waveAmplitudenumber

Wave amplitude/height

Default0.85

waveFrequencynumber

Horizontal wave frequency

Default4

lineThicknessnumber

Line thickness

Default0.2

grainIntensitynumber

Grain/dither intensity

Default50

startColorstring

Start color (top waves)

Default"#ff6666"

endColorstring

End color (bottom waves)

Default"#6666ff"

lightBackgroundstring

Background color for light mode

Default"#ffffff"

darkBackgroundstring

Background color for dark mode

Default"#000000"

brightnessnumber

Overall brightness

Default1

speedVariationnumber

Wave speed variation between lines

Default0.006

waveWidthnumber

Width of the wave effect (horizontal spread)

Default3.5

scalenumber

Scale of the entire effect

Default0.6

classNamestring

Additional CSS classes

Default""