GridPlane

A retro-futuristic scrolling grid plane with perspective and fade effects. Built with Three.js and @react-three/fiber.

Interactive Demo

Loading grid plane...

Color

Speed: 1.0

import { GridPlane } from "@mantleui/react/three";

<GridPlane
  color="#3b82f6"
  speed={1}
  height={400}
/>

Prop	Type	Default	Description
`color`	`string`	`"#3b82f6"`	Grid line color.
`speed`	`number`	`1`	Scroll speed multiplier.
`gridSize`	`number`	`20`	Grid size.
`divisions`	`number`	`20`	Number of grid divisions.
`fadeDistance`	`number`	`15`	Distance at which the grid fades.
`height`	`string \| number`	`400`	Height of the container.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.

color"#3b82f6"

string

Grid line color.

speed1

number

Scroll speed multiplier.

gridSize20

number

Grid size.

divisions20

number

Number of grid divisions.

fadeDistance15

number

Distance at which the grid fades.

height400

string | number

Height of the container.

backgroundColor"transparent"

string

Background color of the container.