Backgrounds & Visuals
Deep Sea Bioluminescence
Interactive mouse-following gradient with bioluminescent particles.
gradientseabioluminescenceinteractiveparticles
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #020617 | Background color |
radialGradientFrom | string | #0f172a | Radial gradient start color |
radialGradientTo | string | #000000 | Radial gradient end color |
focusGlowColor | string | rgba(56, 189, 248, 0.15) | Focus glow color |
focusGlowSize | string | 24rem | Focus glow size |
focusGlowOffset | number | 192 | Focus glow offset |
particleCount | number | 20 | Number of particles |
particleColor | string | rgba(16, 185, 129, 0.2) | Particle color |
particleWidth | string | 0.5rem | Particle width |
particleHeight | string | 6rem | Particle height |
particleBlur | string | md | Particle blur |
particleMinDuration | number | 2 | Minimum particle animation duration |
particleMaxDuration | number | 5 | Maximum particle animation duration |
particleMaxDelay | number | 5 | Maximum particle delay |
particleTranslateY | number[] | [-100, -120, -100] | Particle Y translation |
particleOpacity | number[] | [0, 0.5, 0] | Particle opacity animation |
particleHeightRange | string[] | ['0px', '100px', '0px'] | Particle height range |
gradientFrom | string | #020617 | Gradient start color |
gradientVia | string | transparent | Gradient middle color |
gradientTo | string | #020617 | Gradient end color |
title | string | Abyss | Title text |
className | string | Additional CSS classes |