Landscape

An endless landscape rolling toward the horizon

landscape-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

Explore new horizons

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

Get startedBrowse library

9:41

Explore new horizons

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

Get startedBrowse library

Explore new horizons

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

Get startedLearn more

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-

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.