Vortex

A swirling 3D particle vortex with configurable density and speed. Built with Three.js and @react-three/fiber.

Interactive Demo

Loading vortex...

Color

Particles: 500

Speed: 1.0

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

<Vortex
  color="#8b5cf6"
  count={500}
  speed={1}
  height={400}
/>

Prop	Type	Default	Description
`count`	`number`	`500`	Number of particles.
`color`	`string`	`"#8b5cf6"`	Particle color.
`speed`	`number`	`1`	Animation speed multiplier.
`radius`	`number`	`2`	Spiral radius.
`length`	`number`	`6`	Spiral length along the Y axis.
`particleSize`	`number`	`0.02`	Individual particle size.
`height`	`string \| number`	`400`	Container height.
`backgroundColor`	`string`	`"transparent"`	Background color of the container.

count500

number

Number of particles.

color"#8b5cf6"

string

Particle color.

speed1

number

Animation speed multiplier.

radius2

number

Spiral radius.

length6

number

Spiral length along the Y axis.

particleSize0.02

number

Individual particle size.

height400

string | number

Container height.

backgroundColor"transparent"

string

Background color of the container.