Glowing Wave

A single luminous wave sweeping slowly across the screen

glowing-wave-tw

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