Particle Morph
NewPremiumParticle system that smoothly morphs between geometric shapes (sphere, cube, torus, spiral). Direction-aware coloring.
three3dparticlesmorphwebgldirection-aware
Dependencies: @react-three/fiber, three
Installation
Terminalbash
npx motioncraft add particle-morphUsage
particle-morph.tsxtsx
import { ParticleMorph } from "@/components/three/particle-morph";
<ParticleMorph particleCount={8000} speed={1.5} className="h-96" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| shapes | string[] | ["sphere","cube","torus","spiral"] | Shapes to morph between |
| particleCount | number | 5000 | Number of particles |
| speed | number | 1 | Morph speed |
| size | number | 0.03 | Particle size |
| className | string | — | Additional CSS classes |
Related Components
Scroll Progress 3D
New3D scene that rotates and scales based on page scroll progress. Wireframe icosahedron with direction-aware coloring.
Floating Shapes
3D floating geometric shapes with gentle rotation and bounce.
Globe
Interactive 3D globe with connection arcs and glow effects.
Gradient Mesh
NewMulti-point animated mesh gradient that adapts to the active direction. Supports interactive mouse tracking.