Ravine

An endless flight down a dark canyon

ravine-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Dive into the unknown

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

Get startedBrowse library

9:41

Dive into the unknown

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

Get startedBrowse library

Dive into the unknown

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

Get startedLearn more

Customize

Speed

1.00

Steps

128

Step Scale

0.50

Scale

0.25

Height

1.00

Spread

Wall Curve

2.50

Fade

Camera Height

6.0

Tilt

0.050

Roll

0.075

FOV

1.00

Near Color

Far Color

Brightness

0.80

Contrast

1.00

Grain

0.005

Paused

Props

Name	Type	Default	Description
`speed`	number	`1`	Travel speed along the canyon floor.
`steps`	number	`128`	Ray-march steps per pixel, 32 to 256. More steps resolve farther detail at GPU cost.
`stepScale`	number	`0.5`	Fraction of the safe distance each step advances; lower is finer and darker.
`scale`	number	`0.25`	Frequency of the terrain noise.
`height`	number	`1`	Height multiplier of the terrain ridges.
`spread`	number	`34`	How quickly the walls rise away from the centre line.
`wallCurve`	number	`2.5`	Curve of the wall rise; higher keeps the floor flatter for longer.
`fade`	number	`35`	Distance at which the canyon fades into the near colour. 0 disables.
`cameraHeight`	number	`6`	Camera height above the floor.
`tilt`	number	`0.05`	Camera pitch in radians; positive looks down.
`roll`	number	`0.075`	Camera roll in radians.
`fov`	number	`1`	Field of view multiplier.
`nearColor`	string	`"#000000"`	Colour of near surfaces.
`farColor`	string	`"#ffffff"`	Colour the tone ramps towards at grazing angles and far walls.
`brightness`	number	`0.8`	Tone brightness multiplier.
`contrast`	number	`1`	Tone contrast around the mid grey.
`grain`	number	`0.005`	Micro-jitter on the march; adds a fine grain.
`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.

speednumber

Travel speed along the canyon floor.

Default1

stepsnumber

Ray-march steps per pixel, 32 to 256. More steps resolve farther detail at GPU cost.

Default128

stepScalenumber

Fraction of the safe distance each step advances; lower is finer and darker.

Default0.5

scalenumber

Frequency of the terrain noise.

Default0.25

heightnumber

Height multiplier of the terrain ridges.

Default1

spreadnumber

How quickly the walls rise away from the centre line.

Default34

wallCurvenumber

Curve of the wall rise; higher keeps the floor flatter for longer.

Default2.5

fadenumber

Distance at which the canyon fades into the near colour. 0 disables.

Default35

cameraHeightnumber

Camera height above the floor.

Default6

tiltnumber

Camera pitch in radians; positive looks down.

Default0.05

rollnumber

Camera roll in radians.

Default0.075

fovnumber

Field of view multiplier.

Default1

nearColorstring

Colour of near surfaces.

Default"#000000"

farColorstring

Colour the tone ramps towards at grazing angles and far walls.

Default"#ffffff"

brightnessnumber

Tone brightness multiplier.

Default0.8

contrastnumber

Tone contrast around the mid grey.

Default1

grainnumber

Micro-jitter on the march; adds a fine grain.

Default0.005

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

speed

number

1

Travel speed along the canyon floor.

steps

number

128

Ray-march steps per pixel, 32 to 256. More steps resolve farther detail at GPU cost.

stepScale

number

0.5

Fraction of the safe distance each step advances; lower is finer and darker.

scale

number

0.25

Frequency of the terrain noise.

height

number

1

Height multiplier of the terrain ridges.

spread

number

34

How quickly the walls rise away from the centre line.

wallCurve

number

2.5

Curve of the wall rise; higher keeps the floor flatter for longer.

fade

number

35

Distance at which the canyon fades into the near colour. 0 disables.

cameraHeight

number

6

Camera height above the floor.

tilt

number

0.05

Camera pitch in radians; positive looks down.

roll

number

0.075

Camera roll in radians.

fov

number

1

Field of view multiplier.

nearColor

string

"#000000"

Colour of near surfaces.

farColor

string

"#ffffff"

Colour the tone ramps towards at grazing angles and far walls.

brightness

number

0.8

Tone brightness multiplier.

contrast

number

1

Tone contrast around the mid grey.

grain

number

0.005

Micro-jitter on the march; adds a fine grain.

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.