Site

Grain Wave

Grainy wave texture animation effect

grain-wave-tw

Customize

Tweak the props live

Animation

Speed0.5

Wave Count25

Wave Settings

Amplitude0.85

Frequency4

Wave Width3.5

Speed Variation0.006

Line Appearance

Line Thickness0.2

Grain Intensity50

Scale0.6

Brightness1

Gradient Colors

Start Color

#ff6666

End Color

#6666ff

Background

Light Mode

#ffffff

Dark Mode

#333333

Props

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

Default:0.5

waveCountnumber

Number of wave lines

Default:25

waveAmplitudenumber

Wave amplitude/height

Default:0.85

waveFrequencynumber

Horizontal wave frequency

Default:4

lineThicknessnumber

Line thickness

Default:0.2

grainIntensitynumber

Grain/dither intensity

Default:50

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

Default:1

speedVariationnumber

Wave speed variation between lines

Default:0.006

waveWidthnumber

Width of the wave effect (horizontal spread)

Default:3.5

scalenumber

Scale of the entire effect

Default:0.6

classNamestring

Additional CSS classes

Default:""