Midnight Borealis
Aurora borealis effect with animated streaks creating a midnight sky gradient.
Main Features of Midnight Borealis
How to Use Midnight Borealis in Next.js
Installation Guide for Midnight Borealis
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 |
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.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QCan I adjust the aurora colors?
Yes, you can set the primary and secondary wave colors (e.g., green and purple) to match specific boreal sightings.
QHow many waves are there?
You can control the intensity of the aurora by adjusting the `waveCount` prop, adding more layers for a richer, more active sky.
QIs the movement smooth?
Yes, it uses Framer Motion gradients and transforms to ensure the 'light' flows across the screen with natural, wave-like motion.