Deep Sea Bioluminescence
Interactive mouse-following gradient with bioluminescent particles.
Main Features of Deep Sea Bioluminescence
How to Use Deep Sea Bioluminescence in Next.js
Installation Guide for Deep Sea Bioluminescence
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 |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QAre the particles interactive?
Yes, they react to mouse proximity by glowing brighter and following a slight attraction field, simulating natural aquatic behavior.
QCan I change the glow color?
Yes, you can fully customize the bioluminescent palette to include greens, blues, or even deep purples.
QHow realistic is the movement?
The component uses procedural noise fields to ensure the particles drift and pulse in a natural, organic pattern.