Aurora Blur
Ethereal aurora borealis blur effect
aurora-blur-tw
Customize
Tweak the props liveBasic
1.5
0.8
1
1
Aurora Appearance
3.5
-2
-3
0.75
2
Layer 1
#00ff4d0.37
0.5
Layer 2
#66b3ff0.15
0.35
Layer 3
#d438ff0.2
0.1
Sky Layer 1
#5f27620.5
Sky Layer 2
#2630310.5
Props
| Name | Type | Default | Description |
|---|---|---|---|
width | number | string | "100%" | Width of the component in pixels or CSS value |
height | number | string | "100%" | Height of the component in pixels or CSS value |
speed | number | 1.5 | Animation speed multiplier (0.1-5) |
layers | AuroraLayer[] | [...] | Aurora layers - array of { color: string, speed: number, intensity: number } |
noiseScale | number | 3.5 | Noise scale for aurora pattern (0.5-10) |
movementX | number | -2 | Horizontal movement speed (-5 to 5) |
movementY | number | -3 | Vertical movement speed (-5 to 5) |
verticalFade | number | 0.75 | Vertical fade intensity (0-2) |
bloomIntensity | number | 2 | Bloom/glow intensity (0.5-5) |
skyLayers | SkyLayer[] | [...] | Sky gradient layers - array of { color: string, blend: number } |
brightness | number | 0.8 | Overall brightness (0-2) |
saturation | number | 1 | Color saturation (0-2) |
opacity | number | 1 | Master opacity (0-1) |
className | string | "" | Additional CSS classes |
children | React.ReactNode | undefined | Content to render on top of the effect |
widthnumber | stringWidth of the component in pixels or CSS value
Default:
"100%"heightnumber | stringHeight of the component in pixels or CSS value
Default:
"100%"speednumberAnimation speed multiplier (0.1-5)
Default:
1.5layersAuroraLayer[]Aurora layers - array of { color: string, speed: number, intensity: number }
Default:
[...]noiseScalenumberNoise scale for aurora pattern (0.5-10)
Default:
3.5movementXnumberHorizontal movement speed (-5 to 5)
Default:
-2movementYnumberVertical movement speed (-5 to 5)
Default:
-3verticalFadenumberVertical fade intensity (0-2)
Default:
0.75bloomIntensitynumberBloom/glow intensity (0.5-5)
Default:
2skyLayersSkyLayer[]Sky gradient layers - array of { color: string, blend: number }
Default:
[...]brightnessnumberOverall brightness (0-2)
Default:
0.8saturationnumberColor saturation (0-2)
Default:
1opacitynumberMaster opacity (0-1)
Default:
1classNamestringAdditional CSS classes
Default:
""childrenReact.ReactNodeContent to render on top of the effect
Default:
undefined