Glowing Wave

A single glowing wave rolling across the screen

glowing-wave-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

One wave, endless glow

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

One wave, endless glow

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

One wave, endless glow

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

Customize

Speed

1.00

Swell

0.150

Swell Frequency

3.0

Ripple

0.080

Ripple Frequency

6.0

Chop

0.040

Chop Scale

2.0

Waterline

0.00

Edge Softness

0.100

Depth

0.60

Glow

0.60

Glow Width

0.050

Halo

0.35

Halo Width

0.20

Richness

0.35

Color Frequency

2.0

Saturation

0.90

Spread

0.040

Swirl

1.00

Swirl Scale

1.5

Grain

0.050

Grain Size

Opacity

1.00

Color

Hot Color

Background

Cursor Interaction

Cursor Lift

0.12

Cursor Reach

0.25

Paused

Props

Name	Type	Default	Description
`speed`	number	`1`	Travel speed of the wave.
`swell`	number	`0.15`	Height of the primary swell.
`swellFrequency`	number	`3`	Frequency of the primary swell.
`ripple`	number	`0.08`	Height of the secondary ripple.
`rippleFrequency`	number	`6`	Frequency of the secondary ripple.
`chop`	number	`0.04`	Height of the noise riding on the crest.
`chopScale`	number	`2`	Scale of the noise riding on the crest.
`waterline`	number	`0`	Vertical placement of the wave, 0 is centred.
`edgeSoftness`	number	`0.1`	Softness of the fill edge.
`depth`	number	`0.6`	How far the fill gradient reaches below the crest.
`glow`	number	`0.6`	Brightness of the crest line.
`glowWidth`	number	`0.05`	Width of the crest line.
`halo`	number	`0.35`	Brightness of the surrounding halo relative to the crest.
`haloWidth`	number	`0.2`	Width of the surrounding halo.
`richness`	number	`0.35`	How far the iridescence overrides the plain gradient, 0 to 1.
`colorFrequency`	number	`2`	Number of colour bands through the fill.
`saturation`	number	`0.9`	Vividness of the colour bands.
`spread`	number	`0.04`	How far the hue travels away from hotColor, 0 to 0.5.
`swirl`	number	`1`	Strength of the noise that bends the colour bands.
`swirlScale`	number	`1.5`	Scale of the noise that bends the colour bands.
`grain`	number	`0.05`	Film grain strength, 0 to 1.
`grainSize`	number	`2`	Grain cell size in CSS pixels.
`color`	string	`"#0f172a"`	Deep colour under the wave.
`hotColor`	string	`"#c7d2fe"`	Colour of the crest and its glow.
`backgroundColor`	string	`"#0a0a0a"`	Panel backdrop, or "transparent" to show the page through.
`opacity`	number	`1`	Master alpha.
`cursorInteraction`	boolean	`true`	Let the pointer raise the crest.
`cursorLift`	number	`0.12`	How high the pointer lifts the crest.
`cursorReach`	number	`0.25`	How wide the pointer lifts the crest.
`paused`	boolean	`false`	Freeze the animation.
`adaptiveQuality`	boolean	`true`	Scale back resolution when the frame budget slips.
`targetFps`	number	`60`	Frame rate the quality meter aims to hold.
`dpr`	number	`2`	Upper device pixel ratio bound.
`className`	string	`undefined`	Extra classes for the panel.
`children`	ReactNode	`undefined`	Content layered above the panel.

speednumber

Travel speed of the wave.

Default1

swellnumber

Height of the primary swell.

Default0.15

swellFrequencynumber

Frequency of the primary swell.

Default3

ripplenumber

Height of the secondary ripple.

Default0.08

rippleFrequencynumber

Frequency of the secondary ripple.

Default6

chopnumber

Height of the noise riding on the crest.

Default0.04

chopScalenumber

Scale of the noise riding on the crest.

Default2

waterlinenumber

Vertical placement of the wave, 0 is centred.

Default0

edgeSoftnessnumber

Softness of the fill edge.

Default0.1

depthnumber

How far the fill gradient reaches below the crest.

Default0.6

glownumber

Brightness of the crest line.

Default0.6

glowWidthnumber

Width of the crest line.

Default0.05

halonumber

Brightness of the surrounding halo relative to the crest.

Default0.35

haloWidthnumber

Width of the surrounding halo.

Default0.2

richnessnumber

How far the iridescence overrides the plain gradient, 0 to 1.

Default0.35

colorFrequencynumber

Number of colour bands through the fill.

Default2

saturationnumber

Vividness of the colour bands.

Default0.9

spreadnumber

How far the hue travels away from hotColor, 0 to 0.5.

Default0.04

swirlnumber

Strength of the noise that bends the colour bands.

Default1

swirlScalenumber

Scale of the noise that bends the colour bands.

Default1.5

grainnumber

Film grain strength, 0 to 1.

Default0.05

grainSizenumber

Grain cell size in CSS pixels.

Default2

colorstring

Deep colour under the wave.

Default"#0f172a"

hotColorstring

Colour of the crest and its glow.

Default"#c7d2fe"

backgroundColorstring

Panel backdrop, or "transparent" to show the page through.

Default"#0a0a0a"

opacitynumber

Master alpha.

Default1

cursorInteractionboolean

Let the pointer raise the crest.

Defaulttrue

cursorLiftnumber

How high the pointer lifts the crest.

Default0.12

cursorReachnumber

How wide the pointer lifts the crest.

Default0.25

pausedboolean

Freeze the animation.

Defaultfalse

adaptiveQualityboolean

Scale back resolution when the frame budget slips.

Defaulttrue

targetFpsnumber

Frame rate the quality meter aims to hold.

Default60

dprnumber

Upper device pixel ratio bound.

Default2

classNamestring

Extra classes for the panel.

Defaultundefined

childrenReactNode

Content layered above the panel.

Defaultundefined

Name

Type

Default

Description

speed

number

1

Travel speed of the wave.

swell

number

0.15

Height of the primary swell.

swellFrequency

number

3

Frequency of the primary swell.

ripple

number

0.08

Height of the secondary ripple.

rippleFrequency

number

6

Frequency of the secondary ripple.

chop

number

0.04

Height of the noise riding on the crest.

chopScale

number

2

Scale of the noise riding on the crest.

waterline

number

0

Vertical placement of the wave, 0 is centred.

edgeSoftness

number

0.1

Softness of the fill edge.

depth

number

0.6

How far the fill gradient reaches below the crest.

glow

number

0.6

Brightness of the crest line.

glowWidth

number

0.05

Width of the crest line.

halo

number

0.35

Brightness of the surrounding halo relative to the crest.

haloWidth

number

0.2

Width of the surrounding halo.

richness

number

0.35

How far the iridescence overrides the plain gradient, 0 to 1.

colorFrequency

number

2

Number of colour bands through the fill.

saturation

number

0.9

Vividness of the colour bands.

spread

number

0.04

How far the hue travels away from hotColor, 0 to 0.5.

swirl

number

1

Strength of the noise that bends the colour bands.

swirlScale

number

1.5

Scale of the noise that bends the colour bands.

grain

number

0.05

Film grain strength, 0 to 1.

grainSize

number

2

Grain cell size in CSS pixels.

color

string

"#0f172a"

Deep colour under the wave.

hotColor

string

"#c7d2fe"

Colour of the crest and its glow.

backgroundColor

string

"#0a0a0a"

Panel backdrop, or "transparent" to show the page through.

opacity

number

1

Master alpha.

cursorInteraction

boolean

true

Let the pointer raise the crest.

cursorLift

number

0.12

How high the pointer lifts the crest.

cursorReach

number

0.25

How wide the pointer lifts the crest.

paused

boolean

false

Freeze the animation.

adaptiveQuality

boolean

true

Scale back resolution when the frame budget slips.

targetFps

number

60

Frame rate the quality meter aims to hold.

dpr

number

2

Upper device pixel ratio bound.

className

string

undefined

Extra classes for the panel.

children

ReactNode

undefined

Content layered above the panel.