A field of tiles that rises and ripples under the cursor
| 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. |
colorstringBase tile colour, darkened automatically on side faces.
"#0a0a0a"reliefnumberHow much darker the side faces read than the tops.
0accentstringColour blended into tiles nearest the cursor.
"#de7dfa"backgroundstringBackdrop colour the grid fades into.
"#0a0a0a"accentStrengthnumberHow strongly the accent tints lifted tiles.
0.85cellSizenumberWidth of one grid cell in world units.
0.06roundingnumberRounds the top corners of the tiles, 0 keeps them square.
0.1gapnumberFraction of each cell left empty as a seam.
0.08amplitudenumberHeight of the idle bobbing near the cursor.
0.05liftnumberSteady rise applied to tiles under the cursor.
0.06liftRadiusnumberRadius of the cursor's influence.
0.6speednumberMultiplier for the bobbing rate.
0.6zoomnumberLens length; higher flattens the perspective.
4orbitnumberCamera angle around the grid in degrees.
45distancenumberCamera distance from the centre.
1.5altitudenumberCamera height above the grid.
1hazenumberHow much of the depth fades into the background.
1samplesnumberAnti-aliasing grid: 1, 2 or 3 rays per axis.
2dprnumberPixel ratio ceiling.
1maxFpsnumberUpper bound on rendered frames per second.
60driftnumberRadius of the idle orbit used before the cursor arrives.
0.28easenumberHow quickly the focus catches up to the cursor.
0.1interactivebooleanLet the pointer steer the raised region.
truepausedbooleanFreeze the animation clock.
falseclassNamestringClasses applied to the wrapper.
""childrenReactNodeOverlay content rendered above the grid.
undefined