Backgrounds & Visuals
Zen Haze
Minimal soft blur with subtle gradient creating a zen-like atmosphere.
blurzenhazeminimalsoft
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #f3f4f6 | Background color |
blobGradientFrom | string | #a7f3d0 | Blob gradient start color |
blobGradientTo | string | #99f6e4 | Blob gradient end color |
blobSize | string | 40vw | Blob size |
blobMinSize | string | 300px | Blob minimum size |
blobBlur | string | 80px | Blob blur |
blobOpacity | number | 0.8 | Blob opacity |
blobScale | number[] | [1, 1.2, 1] | Blob scale animation |
blobDuration | number | 6 | Blob animation duration |
overlayColor | string | rgba(255, 255, 255, 0.6) | Overlay color |
overlayBlur | string | 3xl | Overlay blur |
gradientFrom | string | rgba(240, 253, 250, 0.5) | Gradient start color |
gradientTo | string | transparent | Gradient end color |
noiseOpacity | number | 0.15 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Zen | Text label |
textColor | string | rgba(255, 255, 255, 0.9) | Text color |
className | string | Additional CSS classes |