Backgrounds & Visuals
Midnight Borealis
Aurora borealis effect with animated streaks creating a midnight sky gradient.
gradientborealisauroramidnightstreaks
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #0f172a | Background color |
conicGradientColors | string | #1e293b 0deg, #0f172a 120deg, #334155 240deg, #1e293b 360deg | Conic gradient colors |
conicOpacity | number | 0.6 | Conic gradient opacity |
waveCount | number | 4 | Number of waves |
waveColor1 | string | #4ade80 | First wave color |
waveColor2 | string | #818cf8 | Second wave color |
waveWidth | string | 200% | Wave width |
waveHeight | string | 400px | Wave height |
waveBlur | string | 60px | Wave blur |
waveBaseTop | number | 20 | Base wave top position percentage |
waveTopIncrement | number | 15 | Wave top increment |
waveRotation | number | -10 | Wave rotation angle |
waveTranslateX | string[] | ['-20%', '0%', '-20%'] | Wave X translation |
waveScaleY | number[] | [1, 1.5, 1] | Wave Y scale animation |
waveBaseDuration | number | 10 | Base wave animation duration |
radialGradientFrom | string | transparent | Radial gradient start color |
radialGradientTo | string | #020617 | Radial gradient end color |
grainOpacity | number | 0.2 | Grain overlay opacity |
grainBaseFrequency | string | 0.65 | Grain base frequency |
grainOctaves | number | 3 | Grain octaves |
title | string | Borealis | Title text |
className | string | Additional CSS classes |