Monolith Aurora

A vertical 'curtain' aurora effect with liquid folding logic and premium specular shine, creating a mercury or silk-like appearance.

Main Features of Monolith Aurora

How to Use Monolith Aurora in Next.js

Installation Guide for Monolith Aurora

Props

Customize the component with these props

PropertyTypeDefaultDescription
baseColor
string#0a0a0aDeepest background (Black/Dark Gray)
waveColor
string#d1d1d1The moving liquid (Silver/White)
speed
number0.6Flow speed
intensity
number0.8How bright the shine is

When to Use

Ideal for 'Apple-style' dark mode landers where you need a sense of premium texture, silver waves, or a monochromatic 'monolith' feel.

Best Practices

Use with light mode text and thin, elegant typography. The silver highlights create a sense of metallic depth that works beautifully with minimal UI.

Why This Component Matters in Modern UI Development

Standard aurora effects often look like blurry green blobs. This 'Monolith' version uses domain warping and specular mapping to create sharp 'folding' logic, making it feel more like real liquid mercury or silk than just colored gas.

Frequently Asked Questions

QCan I make it colorful?

Yes, pass any vibrant color to `waveColor` (like Emerald or Cyan) to turn the silver waves into a traditional aurora effect.

QWhat is 'folding' logic?

It refers to the way the shader warps space-time coordinate systems to simulate physical creases and folds in a surface.

QIs it responsive?

Yes, it uses an internal aspect-ratio correction to ensure the vertical curtain look remains consistent on all screen resolutions.

Monolith Aurora - Mesh Gradients & CSS Backgrounds | Uilora