WaveField

An animated 3D wave plane with configurable color, amplitude, and speed. Built with Three.js and @react-three/fiber.

Interactive Demo

Loading wave field...

Color

Speed: 1.0

Amplitude: 0.3

Wireframe

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

<WaveField
  color="#3b82f6"
  wireframe
  speed={1}
  amplitude={0.3}
  height={400}
/>

Prop	Type	Default	Description
`color`	`string`	`"#3b82f6"`	Wave color.
`wireframe`	`boolean`	`true`	Render as wireframe.
`speed`	`number`	`1`	Animation speed multiplier.
`amplitude`	`number`	`0.3`	Wave amplitude.
`frequency`	`number`	`0.5`	Wave frequency.
`segments`	`number`	`50`	Number of plane segments.
`height`	`string \| number`	`400`	Container height.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.

color"#3b82f6"

string

Wave color.

wireframetrue

boolean

Render as wireframe.

speed1

number

Animation speed multiplier.

amplitude0.3

number

Wave amplitude.

frequency0.5

number

Wave frequency.

segments50

number

Number of plane segments.

height400

string | number

Container height.

backgroundColor"transparent"

string

Background color of the container.