ParticleSea
A sea of glowing particles
Preview
Example code
export default function Page()
{
return(
<GradientBackground
color1={{rgb: {r: 255, g: 255, b: 255}}}
color2={{rgb: {r: 255, g: 255, b: 255}}}
color3={{rgb: {r: 255, g: 255, b: 255}}}
color4={{rgb: {r: 255, g: 255, b: 255}}}
/>
)
}
Props
| Name | Type | Description | Default |
|---|---|---|---|
| brightness | number | Brightness of the glow effect | 0.5 |
| spawnWidth | number | Width of the area in which the particles spawn | 5 |
| spawnHeight | number | Height of the area where the particles spawn | 0 |
| lifeTime | 0-1 | Life time of a particle | 0.999 |
| gravity | number | The force that pulls the particles up/down | 0.4 |
| noiseFrequency | number | The frequency of noise. | 3 |
| noiseAmplitude | number | The amplitude of noise. | 1 |
| noiseEvolve | number | The evolution speed of noise | 10 |
| particleSrc | string | Particle's image source | null |
| particleSize | number | The size of a particle | 3 |
| amount | number | Amount of the particles to the power of 2 | 50 |
| startColor | Color | The start color of particles | { rgb: { r: 255, g: 255, b: 255 }} |
| endColor | Color | The end color of particles. | { rgb: { r: 255, g: 255, b: 255 }} |
| mouseForce | number | The force by which the pointer sways particles | 0.05 |
| mouseRadius | number | The radius by which pointer's swaying force takes effect | 0.1 |
| velocityFalloff | number | How fast particles lose velocity | 0.01 |
Change log
05.07.2024
- Added mouse interactivity (mouseForce, mouseRadius, velocityFalloff)
30.06.2024
- Added