Glowing Ridges

Iridescent ridges of colour rolling across a dark surface like light raking across folded silk

glowing-ridges-tw

Customize

Layers

Detail

Turbulence

0.60

Zoom

1.10

Shift X

0.45

Shift Y

0.50

Ridge Frequency

1.00

Ridge Phase

2.00

Density

11.0

Flow Speed

0.10

Churn Speed

1.00

Swirl

16.0

Exposure

0.25

Gain

2.00

Color Cycle

0.40

Rotation

0°

Grain

0.25

Opacity

0.75

Color A

Color B

Color C

Background

Paused

Props

Name	Type	Default	Description
`layers`	number	`12`	Number of colour layers stacked into the film, 1 to 15.
`detail`	number	`5`	Noise octaves per layer, 1 to 10. Fewer is smoother.
`turbulence`	number	`0.6`	Strength of the flow distortion inside each layer.
`zoom`	number	`1.1`	Zoom of the whole field. Larger shows fewer, wider ridges.
`shiftX`	number	`0.45`	Horizontal shift of the viewpoint.
`shiftY`	number	`0.5`	Vertical shift of the viewpoint.
`ridgeFrequency`	number	`1`	How many ridges appear across the frame.
`ridgePhase`	number	`2`	Phase offset of the ridges.
`density`	number	`11`	Scale of the flow pattern inside the ridges.
`flowSpeed`	number	`0.1`	Speed the colours drift along the ridges.
`churnSpeed`	number	`1`	Speed the fine detail churns.
`swirl`	number	`16`	Amount of swirl the drift adds.
`exposure`	number	`0.25`	Exposure before tone compression.
`gain`	number	`2`	Output gain after tone compression.
`colorCycle`	number	`0.4`	How fast the palette cycles across layers.
`rotation`	number	`0`	Rotation of the whole pattern in degrees.
`grain`	number	`0.25`	Film grain strength riding on the glow, 0 for none.
`opacity`	number	`0.75`	Strength of the effect over the background, 0 to 1.
`colorA`	string	`"#ff6a2a"`	First palette colour.
`colorB`	string	`"#22d3ee"`	Second palette colour.
`colorC`	string	`"#c026d3"`	Third palette colour.
`backgroundColor`	string	`"#000000"`	Colour behind the film.
`blend`	"add" \| "ink"	`"add"`	"add" lights the background, "ink" darkens it for light themes.
`paused`	boolean	`false`	Freeze the animation.
`dpr`	number	`1`	Upper device pixel ratio bound.
`className`	string	`—`	Extra classes for the root element.
`children`	ReactNode	`—`	Content layered above the effect.

layersnumber

Number of colour layers stacked into the film, 1 to 15.

Default12

detailnumber

Noise octaves per layer, 1 to 10. Fewer is smoother.

Default5

turbulencenumber

Strength of the flow distortion inside each layer.

Default0.6

zoomnumber

Zoom of the whole field. Larger shows fewer, wider ridges.

Default1.1

shiftXnumber

Horizontal shift of the viewpoint.

Default0.45

shiftYnumber

Vertical shift of the viewpoint.

Default0.5

ridgeFrequencynumber

How many ridges appear across the frame.

Default1

ridgePhasenumber

Phase offset of the ridges.

Default2

densitynumber

Scale of the flow pattern inside the ridges.

Default11

flowSpeednumber

Speed the colours drift along the ridges.

Default0.1

churnSpeednumber

Speed the fine detail churns.

Default1

swirlnumber

Amount of swirl the drift adds.

Default16

exposurenumber

Exposure before tone compression.

Default0.25

gainnumber

Output gain after tone compression.

Default2

colorCyclenumber

How fast the palette cycles across layers.

Default0.4

rotationnumber

Rotation of the whole pattern in degrees.

Default0

grainnumber

Film grain strength riding on the glow, 0 for none.

Default0.25

opacitynumber

Strength of the effect over the background, 0 to 1.

Default0.75

colorAstring

First palette colour.

Default"#ff6a2a"

colorBstring

Second palette colour.

Default"#22d3ee"

colorCstring

Third palette colour.

Default"#c026d3"

backgroundColorstring

Colour behind the film.

Default"#000000"

blend"add" | "ink"

"add" lights the background, "ink" darkens it for light themes.

Default"add"

pausedboolean

Freeze the animation.

Defaultfalse

dprnumber

Upper device pixel ratio bound.

Default1

classNamestring

Extra classes for the root element.

Default—

childrenReactNode

Content layered above the effect.

Default—