Aurora Blur

Ethereal aurora borealis blur effect

aurora-blur-tw

Customize

Speed

1.5

Brightness

0.8

Saturation

1.0

Opacity

1.00

Noise Scale

3.5

Movement X

-2.0

Movement Y

-3.0

Vertical Fade

0.75

Bloom Intensity

2.0

Color

Speed

0.37

Intensity

0.50

Color

Speed

0.15

Intensity

0.35

Color

Speed

0.20

Intensity

0.10

Color

Blend

0.50

Color

Blend

0.50

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 | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

speednumber

Animation speed multiplier (0.1-5)

Default1.5

layersAuroraLayer[]

Aurora layers - array of { color: string, speed: number, intensity: number }

Default[...]

noiseScalenumber

Noise scale for aurora pattern (0.5-10)

Default3.5

movementXnumber

Horizontal movement speed (-5 to 5)

Default-2

movementYnumber

Vertical movement speed (-5 to 5)

Default-3

verticalFadenumber

Vertical fade intensity (0-2)

Default0.75

bloomIntensitynumber

Bloom/glow intensity (0.5-5)

Default2

skyLayersSkyLayer[]

Sky gradient layers - array of { color: string, blend: number }

Default[...]

brightnessnumber

Overall brightness (0-2)

Default0.8

saturationnumber

Color saturation (0-2)

Default1

opacitynumber

Master opacity (0-1)

Default1

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top of the effect

Defaultundefined