ParticleField

An animated 3D particle field with optional connection lines between nearby particles. Built with Three.js and @react-three/fiber.

Interactive Demo

Loading particles...

Color

Particles: 150

Connections

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

<ParticleField
  count={200}
  color="#8b5cf6"
  height={400}
  connections
/>

Prop	Type	Default	Description
`count`	`number`	`200`	Number of particles.
`color`	`string`	`"#3b82f6"`	Particle and connection line color.
`particleSize`	`number`	`0.015`	Size of each particle.
`spread`	`number`	`5`	Spread radius of the particle field.
`speed`	`number`	`1`	Animation speed multiplier.
`connections`	`boolean`	`true`	Show connection lines between nearby particles.
`connectionDistance`	`number`	`1.5`	Maximum distance for drawing connections.
`connectionOpacity`	`number`	`0.15`	Opacity of connection lines.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.
`height`	`string \| number`	`"400px"`	Height of the container.

count200

number

Number of particles.

color"#3b82f6"

string

Particle and connection line color.

particleSize0.015

number

Size of each particle.

spread5

number

Spread radius of the particle field.

speed1

number

Animation speed multiplier.

connectionstrue

boolean

Show connection lines between nearby particles.

connectionDistance1.5

number

Maximum distance for drawing connections.

connectionOpacity0.15

number

Opacity of connection lines.

backgroundColor"transparent"

string

Background color of the container.

height"400px"

string | number

Height of the container.