Uilora Logo
Uilora.
Join
Uilora Logo
Uilora.
Join

Moire Waves

Interference pattern created with rotating radial gradients.

Main Features of Moire Waves

How to Use Moire Waves in Next.js

Installation Guide for Moire Waves

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#171717Background color
waveCount
number3Number of waves
borderColor
stringrgba(255, 255, 255, 0.2)Border color
borderWidth
string1pxBorder width
borderRadius
string40%Border radius
gradientFrom
stringtransparentGradient start color
gradientTo
stringrgba(255,255,255,0.05)Gradient end color
gradientSpacing
string10pxGradient spacing
baseDuration
number30Base animation duration
durationIncrement
number5Duration increment per wave
scaleRange
number[][1, 1.1, 1]Scale animation range
className
stringAdditional CSS classes
PreviousReactive Dot Matrix
NextHand-Drawn Scribbles

When to Use

Excellent for artistic hero sections, music-themed portfolios, and Next.js sites that want a hypnotic, evolving visual signature. Use this React component for a Moire interference effect created by rotating and scaling multiple radial gradient layers.

Best Practices

Follow React best practices by using low-contrast colors for the gradients (`gradientTo` at 0.05 opacity) to ensure readability of foreground content. Maintain scalable component architecture by adjusting `waveCount` for different thematic intensities. Optimize for performance by using hardware-accelerated CSS transforms for the rotation.

Why This Component Matters in Modern UI Development

Moire patterns create a unique sense of motion and optical depth. This production-ready UI component helpsคุณ build an interface that feels high-art and sophisticated, adding a unique geometric signature to your project.

Frequently Asked Questions

QWhat is a Moire pattern?

It is an interference pattern that appears when two or more repetitive patterns (like these radial gradients) are overlaid and moved slightly relative to each other.

QIs the movement too distracting?

The animation is designed to be slow and hypnotic (`baseDuration` of 30 seconds). You can further slow it down to make it a very subtle background 'breathing' effect.

QCan I use it on mobile?

Yes, it uses lightweight CSS animations that are very battery-efficient on mobile devices while maintaining the high-fidelity interference pattern.

Moire Waves - React SVG Background Patterns | Uilora