Uilora Logo
Uilora.
Join
Uilora Logo
Uilora.
Join

Zen Haze

Minimal soft blur with subtle gradient creating a zen-like atmosphere.

Main Features of Zen Haze

How to Use Zen Haze in Next.js

Installation Guide for Zen Haze

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#f3f4f6Background color
blobGradientFrom
string#a7f3d0Blob gradient start color
blobGradientTo
string#99f6e4Blob gradient end color
blobSize
string40vwBlob size
blobMinSize
string300pxBlob minimum size
blobBlur
string80pxBlob blur
blobOpacity
number0.8Blob opacity
blobScale
number[][1, 1.2, 1]Blob scale animation
blobDuration
number6Blob animation duration
overlayColor
stringrgba(255, 255, 255, 0.6)Overlay color
overlayBlur
string3xlOverlay blur
gradientFrom
stringrgba(240, 253, 250, 0.5)Gradient start color
gradientTo
stringtransparentGradient end color
noiseOpacity
number0.15Noise overlay opacity
noiseBaseFrequency
string0.8Noise base frequency
noiseOctaves
number3Noise octaves
text
stringZenText label
textColor
stringrgba(255, 255, 255, 0.9)Text color
className
stringAdditional CSS classes
PreviousGlass Bricks
NextReactive Dot Matrix

When to Use

Ideal for wellness apps, minimalist portfolios, and Next.js applications that prioritize focus and calm. Use this React component for a minimal 'haze' effect with slow-moving gradients that feel like a peaceful morning mist.

Best Practices

Follow React best practices by using airy, light-reflective colors. Maintain consistent spacing within your design system by keeping foreground elements sparse and centered. Optimize for performance in large-scale applications by keeping the animation durations long.

Why This Component Matters in Modern UI Development

Minimalism is a staple of high-end design for a reason: it reduces cognitive load. This reusable React component helpsคุณ build an interface that feels calm and focused, improving the overall user experience.

Frequently Asked Questions

QCan I use it for dark backgrounds?

Yes, by adjusting the `overlayColor` and blob gradients, you can create a 'Midnight Haze' version that feels equally premium.

QHow 'hazy' is it?

The level of haze is adjustable via the `overlayBlur` prop, ranging from a subtle soften to a thick, ethereal fog.

QIs the noise necessary?

The noise adds a soft texture that prevents the gradients from looking too sterile, but it can be disabled by setting `noiseOpacity` to 0.

Zen Haze - React Blur & Glassmorphism Effects | Uilora