Aurora Blur
Ethereal aurora borealis blur effect
aurora-blur-tw
Customize
Basic
1.5
0.8
1
1
Aurora Appearance
3.5
-2
-3
0.75
2
Layer 1
0.37
0.5
Layer 2
0.15
0.35
Layer 3
0.2
0.1
Sky Layer 1
0.5
Sky Layer 2
0.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 |