FloatingParticles
Animated floating particles with twinkle effects
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| particleColor | color | #ffffff | Color of the particles |
| shape | "dot" | "square" | "glow" | dot | What each particle is drawn as — a crisp dot or square (softness still feathers them), or a soft glow puff |
| count | range | 1200 | Number of particles |
| particleSize | range | 1.2 | Size of the particles (each also varies slightly for depth) |
| softness | range | 0.1 | Edge softness of each particle — 0 is a crisp shape, 1 a soft glow puff |
| speed | range | 0.25 | Speed of the shared drift |
| angle | range | 90 | Drift heading in degrees (0 = left, 90 = up, 180 = right, 270 = down — the classic default floats upward) |
| speedVariance | range | 0.3 | Per-particle speed variance around the shared drift (0 = everything moves in lockstep) |
| angleVariance | range | 30 | Per-particle heading variance in degrees (0 = one shared direction, 180 = every which way) |
| randomness | range | 0.25 | Orbital wander — each particle circles lazily around its drift path instead of gliding straight |
| twinkle | range | 0.5 | Intensity of the twinkle (0 = steady, 1 = full shimmer) |
| cursorStrength | range | 0 | How strongly the cursor stirs the field — 0 (default) leaves the drift undisturbed |
Usage
vue
<Shader>
<FloatingParticles />
</Shader>