Deep Ocean Bokeh
Cinematic dark bokeh effect with floating particles creating an underwater atmosphere.
Main Features of Deep Ocean Bokeh
How to Use Deep Ocean Bokeh in Next.js
Installation Guide for Deep Ocean Bokeh
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #020617 | Background color of the component |
bokehCount | number | 15 | Number of bokeh particles |
color1 | string | #0ea5e9 | Primary bokeh color |
color2 | string | #10b981 | Secondary bokeh color |
minSize | number | 50 | Minimum size of bokeh particles |
maxSize | number | 150 | Maximum size of bokeh particles |
minBlur | number | 10 | Minimum blur amount |
maxBlur | number | 30 | Maximum blur amount |
minOpacity | number | 0.1 | Minimum opacity of particles |
maxOpacity | number | 0.4 | Maximum opacity of particles |
minDuration | number | 15 | Minimum animation duration |
maxDuration | number | 25 | Maximum animation duration |
maxDelay | number | 10 | Maximum delay for particle animations |
gradientFrom | string | #020617 | Gradient start color |
gradientVia | string | transparent | Gradient middle color |
gradientTo | string | rgba(2, 6, 23, 0.8) | Gradient end color |
noiseOpacity | number | 0.15 | Opacity of noise overlay |
noiseBaseFrequency | string | 0.8 | Base frequency for noise filter |
noiseOctaves | number | 3 | Number of octaves for noise |
text | string | Submerge | Text label to display |
textColor | string | rgba(255, 255, 255, 0.9) | Color of the text label |
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
QIs the bokeh interactive?
The particles move on a predefined orbital path for a cinematic feel, but they can be easily adapted to react to mouse movement.
QCan I use different colors?
Yes, you can fully customize the bokeh palette using `color1` and `color2` props to match your brand's theme.
QDoes it support noise overlay?
Yes, it includes an integrated SVG noise filter to add a film-grain texture and prevent color banding.