Backgrounds & Visuals
Moire Waves
Interference pattern created with rotating radial gradients.
patternmoirewavesinterferenceradial
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #171717 | Background color |
waveCount | number | 3 | Number of waves |
borderColor | string | rgba(255, 255, 255, 0.2) | Border color |
borderWidth | string | 1px | Border width |
borderRadius | string | 40% | Border radius |
gradientFrom | string | transparent | Gradient start color |
gradientTo | string | rgba(255,255,255,0.05) | Gradient end color |
gradientSpacing | string | 10px | Gradient spacing |
baseDuration | number | 30 | Base animation duration |
durationIncrement | number | 5 | Duration increment per wave |
scaleRange | number[] | [1, 1.1, 1] | Scale animation range |
className | string | Additional CSS classes |