Particles
WebGL particle field with mouse interaction powered by OGL
Preview
Overview
Particles renders a 3D point cloud using OGL with configurable count, spread, color palette, and mouse interaction. Particles animate with sine-based displacement, optional rotation, and support alpha blending for a soft glow effect.
Features
- WebGL powered — hardware-accelerated 3D particle rendering via OGL
- Mouse interaction — particles shift based on cursor position
- Configurable palette — pass any array of hex colors
- Size randomness — particles vary in size based on distance and random seed
- Rotation animation — gentle auto-rotation with disable option
Usage
import Particles from '@/components/particles'
<div className="h-[400px]">
<Particles
particleCount={300}
particleColors={['#ffffff', '#00d2ff', '#7cff67']}
moveParticlesOnHover
alphaParticles
speed={0.1}
/>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
particleCount | number | 200 | Total number of particles |
particleSpread | number | 10 | Spread radius of the particle cloud |
speed | number | 0.1 | Animation speed multiplier |
particleColors | string[] | ['#ffffff', '#ffffff', '#ffffff'] | Array of hex colors randomly assigned to particles |
moveParticlesOnHover | boolean | false | Enable mouse-driven particle displacement |
particleHoverFactor | number | 1 | Multiplier for mouse displacement strength |
alphaParticles | boolean | false | Enable soft alpha-blended particles |
particleBaseSize | number | 100 | Base size of each particle point |
sizeRandomness | number | 1 | Amount of random size variation |
cameraDistance | number | 20 | Camera distance from the particle cloud |
disableRotation | boolean | false | Disable automatic rotation animation |
pixelRatio | number | 1 | Device pixel ratio for rendering |
className | string | — | Additional CSS classes for the container |