Magnetic Particle Field
Background particles dynamically attract toward cursor and components in a verlet physics R3F instance field.
Component Showcase
Magnetic Particle Field
Background particles dynamically attract toward cursor and components in a verlet physics R3F instance field.
Three.jsR3FPhysicsInstancedMesh
Interactive Playground
Adjust sliders and values to preview changes in real-time
particleCount
Number of active physics particles.
particleColor
Hex color of the physical particles.
particleSize
Geometric scale radius of octahedrons.
glowIntensity
Emissive physical light intensity.
bg
Backdrop space canvas color.
titleText
Optional alert box title.
eyebrowText
Optional subtitle text.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| particleCount | number | 500 | Number of active physics particles. |
| particleColor | string | "#7fff5e" | Hex color of the physical particles. |
| particleSize | number | 0.08 | Geometric scale radius of octahedrons. |
| glowIntensity | number | 1.5 | Emissive physical light intensity. |
| bg | string | "#050505" | Backdrop space canvas color. |
| titleText | string | "" | Optional alert box title. |
| eyebrowText | string | "" | Optional subtitle text. |