Grid Rise

A raymarched tile field that lifts and ripples under the cursor

grid-rise-tw

Customize

Color

Accent

Background

Relief

0.00

Accent Strength

0.85

Cell Size

0.060

Gap

0.00

Rounding

0.10

Amplitude

0.050

Lift

0.060

Lift Radius

0.60

Speed

0.6

Zoom

4.0

Orbit

Distance

1.50

Altitude

1.00

Haze

1.00

Samples

DPR

1.00

Max FPS

Drift

0.28

Ease

0.10

InteractivePaused

Props

Name	Type	Default	Description
`color`	string	`"#0a0a0a"`	Base tile colour, darkened automatically on side faces.
`relief`	number	`0`	How much darker the side faces read than the tops.
`accent`	string	`"#de7dfa"`	Colour blended into tiles nearest the cursor.
`background`	string	`"#0a0a0a"`	Backdrop colour the grid fades into.
`accentStrength`	number	`0.85`	How strongly the accent tints lifted tiles.
`cellSize`	number	`0.06`	Width of one grid cell in world units.
`rounding`	number	`0.1`	Rounds the top corners of the tiles, 0 keeps them square.
`gap`	number	`0.08`	Fraction of each cell left empty as a seam.
`amplitude`	number	`0.05`	Height of the idle bobbing near the cursor.
`lift`	number	`0.06`	Steady rise applied to tiles under the cursor.
`liftRadius`	number	`0.6`	Radius of the cursor's influence.
`speed`	number	`0.6`	Multiplier for the bobbing rate.
`zoom`	number	`4`	Lens length; higher flattens the perspective.
`orbit`	number	`45`	Camera angle around the grid in degrees.
`distance`	number	`1.5`	Camera distance from the centre.
`altitude`	number	`1`	Camera height above the grid.
`haze`	number	`1`	How much of the depth fades into the background.
`samples`	number	`2`	Anti-aliasing grid: 1, 2 or 3 rays per axis.
`dpr`	number	`1`	Pixel ratio ceiling.
`maxFps`	number	`60`	Upper bound on rendered frames per second.
`drift`	number	`0.28`	Radius of the idle orbit used before the cursor arrives.
`ease`	number	`0.1`	How quickly the focus catches up to the cursor.
`interactive`	boolean	`true`	Let the pointer steer the raised region.
`paused`	boolean	`false`	Freeze the animation clock.
`className`	string	`""`	Classes applied to the wrapper.
`children`	ReactNode	`undefined`	Overlay content rendered above the grid.

colorstring

Base tile colour, darkened automatically on side faces.

Default"#0a0a0a"

reliefnumber

How much darker the side faces read than the tops.

Default0

accentstring

Colour blended into tiles nearest the cursor.

Default"#de7dfa"

backgroundstring

Backdrop colour the grid fades into.

Default"#0a0a0a"

accentStrengthnumber

How strongly the accent tints lifted tiles.

Default0.85

cellSizenumber

Width of one grid cell in world units.

Default0.06

roundingnumber

Rounds the top corners of the tiles, 0 keeps them square.

Default0.1

gapnumber

Fraction of each cell left empty as a seam.

Default0.08

amplitudenumber

Height of the idle bobbing near the cursor.

Default0.05

liftnumber

Steady rise applied to tiles under the cursor.

Default0.06

liftRadiusnumber

Radius of the cursor's influence.

Default0.6

speednumber

Multiplier for the bobbing rate.

Default0.6

zoomnumber

Lens length; higher flattens the perspective.

Default4

orbitnumber

Camera angle around the grid in degrees.

Default45

distancenumber

Camera distance from the centre.

Default1.5

altitudenumber

Camera height above the grid.

Default1

hazenumber

How much of the depth fades into the background.

Default1

samplesnumber

Anti-aliasing grid: 1, 2 or 3 rays per axis.

Default2

dprnumber

Pixel ratio ceiling.

Default1

maxFpsnumber

Upper bound on rendered frames per second.

Default60

driftnumber

Radius of the idle orbit used before the cursor arrives.

Default0.28

easenumber

How quickly the focus catches up to the cursor.

Default0.1

interactiveboolean

Let the pointer steer the raised region.

Defaulttrue

pausedboolean

Freeze the animation clock.

Defaultfalse

classNamestring

Classes applied to the wrapper.

Default""

childrenReactNode

Overlay content rendered above the grid.

Defaultundefined