Ravine

A ray-marched flight down an endless monochrome canyon, its walls shaded by how far each ray had to travel

ravine-tw

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—