Landscape

A procedurally generated landscape scrolling toward the horizon

landscape-tw

Customize

Speed

1.00

Altitude

5.5

Focal

1.20

Pitch

0.00

Elevation

3.2

Scale

0.150

Detail

1.00

Steps

Samples

Distance

Fog Start

Ramp Distance

Rim Power

4.0

Rim Strength

1.20

Ring Spacing

0.50

Ring Speed

2.5

Ring Width

0.040

Ring Strength

0.40

Gain

1.00

Grain

0.050

Vignette

0.20

Cursor Steer

0.50

Opacity

1.00

Near Color

Mid Color

Far Color

Rim Color

Ring Color

Sky

Cursor InteractionPaused

Props

Name	Type	Default	Description
`speed`	number	`1`	How fast the camera flies forward.
`altitude`	number	`5.5`	Camera height above sea level.
`focal`	number	`1.2`	Field of view, lower is more telephoto.
`pitch`	number	`0`	Downward tilt of the camera, in radians.
`elevation`	number	`3.2`	Height of the terrain.
`scale`	number	`0.15`	Size of the landforms, lower is broader.
`detail`	number	`1`	How much fine detail rides on top of the landforms.
`steps`	number	`80`	Ray marching steps, higher is cleaner and slower.
`samples`	number	`2`	Samples per pixel used to smooth the silhouette, 1 to 4.
`distance`	number	`42`	How far the camera can see.
`fogStart`	number	`22`	Distance at which the terrain starts dissolving into the sky.
`rampDistance`	number	`35`	Distance over which the depth gradient completes.
`color`	string	`"#2e1065"`	Colour of the nearest ground.
`midColor`	string	`"#0a0a0a"`	Colour of the middle distance.
`farColor`	string	`"#d946ef"`	Colour of the far ground.
`rimColor`	string	`"#f0abfc"`	Colour of the light catching the ridges.
`rimPower`	number	`4`	How tightly the rim clings to the crests.
`rimStrength`	number	`1.2`	Brightness of the rim.
`ringColor`	string	`"#a855f7"`	Colour of the scanner rings sweeping outward.
`ringSpacing`	number	`0.5`	How close together the rings are.
`ringSpeed`	number	`2.5`	How fast the rings travel.
`ringWidth`	number	`0.04`	Thickness of each ring.
`ringStrength`	number	`0.4`	Brightness of the rings.
`gain`	number	`1`	Overall brightness before the highlight rolloff.
`grain`	number	`0.05`	Film grain strength, 0 to 1.
`grainRate`	number	`24`	Grain refreshes per second.
`vignette`	number	`0.2`	Corner darkening, 0 to 1.
`backgroundColor`	string	`"#0a0a0a"`	Sky colour, or "transparent" to show the page through.
`opacity`	number	`1`	Master alpha.
`cursorInteraction`	boolean	`true`	Let the pointer steer the camera.
`cursorSteer`	number	`0.5`	How far the pointer swings the heading.
`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	`1.75`	Upper device pixel ratio bound.
`className`	string	`-`	Optional className applied to the root.
`children`	ReactNode	`-`	Content layered above the terrain.

speednumber

How fast the camera flies forward.

Default1

altitudenumber

Camera height above sea level.

Default5.5

focalnumber

Field of view, lower is more telephoto.

Default1.2

pitchnumber

Downward tilt of the camera, in radians.

Default0

elevationnumber

Height of the terrain.

Default3.2

scalenumber

Size of the landforms, lower is broader.

Default0.15

detailnumber

How much fine detail rides on top of the landforms.

Default1

stepsnumber

Ray marching steps, higher is cleaner and slower.

Default80

samplesnumber

Samples per pixel used to smooth the silhouette, 1 to 4.

Default2

distancenumber

How far the camera can see.

Default42

fogStartnumber

Distance at which the terrain starts dissolving into the sky.

Default22

rampDistancenumber

Distance over which the depth gradient completes.

Default35

colorstring

Colour of the nearest ground.

Default"#2e1065"

midColorstring

Colour of the middle distance.

Default"#0a0a0a"

farColorstring

Colour of the far ground.

Default"#d946ef"

rimColorstring

Colour of the light catching the ridges.

Default"#f0abfc"

rimPowernumber

How tightly the rim clings to the crests.

Default4

rimStrengthnumber

Brightness of the rim.

Default1.2

ringColorstring

Colour of the scanner rings sweeping outward.

Default"#a855f7"

ringSpacingnumber

How close together the rings are.

Default0.5

ringSpeednumber

How fast the rings travel.

Default2.5

ringWidthnumber

Thickness of each ring.

Default0.04

ringStrengthnumber

Brightness of the rings.

Default0.4

gainnumber

Overall brightness before the highlight rolloff.

Default1

grainnumber

Film grain strength, 0 to 1.

Default0.05

grainRatenumber

Grain refreshes per second.

Default24

vignettenumber

Corner darkening, 0 to 1.

Default0.2

backgroundColorstring

Sky colour, or "transparent" to show the page through.

Default"#0a0a0a"

opacitynumber

Master alpha.

Default1

cursorInteractionboolean

Let the pointer steer the camera.

Defaulttrue

cursorSteernumber

How far the pointer swings the heading.

Default0.5

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.

Default1.75

classNamestring

Optional className applied to the root.

Default-

childrenReactNode

Content layered above the terrain.

Default-