Glowing Ridges

Iridescent ridges of light rolling like folded silk

glowing-ridges-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Iridescent by design

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

Get startedBrowse library

9:41

Iridescent by design

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

Get startedBrowse library

Iridescent by design

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

Get startedLearn more

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—

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.