Backgrounds & Visuals
Deep Ocean Bokeh
Cinematic dark bokeh effect with floating particles creating an underwater atmosphere.
blurbokehoceancinematicparticles
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 |