MorphingSphere

A continuously morphing 3D sphere with vertex displacement. Built with Three.js and @react-three/fiber.

Interactive Demo

Loading morphing sphere...

Color

Distortion: 0.3

Wireframe

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

<MorphingSphere
  color="#3b82f6"
  distortion={0.3}
  wireframe={false}
  height={400}
/>

Prop	Type	Default	Description
`color`	`string`	`"#3b82f6"`	Sphere color.
`speed`	`number`	`1`	Animation speed multiplier.
`distortion`	`number`	`0.3`	Vertex displacement intensity.
`detail`	`number`	`64`	Sphere geometry detail (segments).
`wireframe`	`boolean`	`false`	Render as wireframe.
`height`	`string \| number`	`400`	Height of the container.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.

color"#3b82f6"

string

Sphere color.

speed1

number

Animation speed multiplier.

distortion0.3

number

Vertex displacement intensity.

detail64

number

Sphere geometry detail (segments).

wireframefalse

boolean

Render as wireframe.

height400

string | number

Height of the container.

backgroundColor"transparent"

string

Background color of the container.