Uilora Moire Interference
A sophisticated mathematical interference pattern with chromatic aberration and liquid mouse distortion.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| lineColor | string | #ffffff | Color of the interference rings |
| density | number | 40.0 | Frequency of the rings |
| strength | number | 0.2 | Distortion intensity |
| opacity | number | 0.5 | Overall transparency |
When to Use
Ideal for creative headers, abstract technical backgrounds, and landing pages that aim for a futuristic, 'Prism' or physics-inspired aesthetic.
Best Practices
Use low `opacity` (0.1 - 0.3) if placing text directly on top. The chromatic aberration (RGB split) is most visible on dark backgrounds.
Why This Component Matters
Moire patterns create an emergent complexity that looks complex but is mathematically lightweight, providing high visual impact for low performance cost.
FAQ
QWhat is the RGB split?
The shader samples the pattern with tiny spatial offsets for red, green, and blue, mimicking the way light refracts through a lens.
QDoes it support custom rotation?
The pattern rotates automatically based on the `uTime` uniform, ensuring it never feels static.
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.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.