Aurora Beam

A sweeping aurora beam built from layered sheets of light

aurora-beam-tw

Customize

Speed

1.00

Sheets

Amplitude

0.12

Frequency

3.2

Thickness

0.050

Tail

0.22

Position

0.00

Slant

0.10

Spread

0.16

Rays

0.45

Ray Scale

Ray Drift

0.8

Reactivity

0.70

Gain

1.50

Exposure

2.4

Contrast

1.00

Hue Drift

1.00

Grain

0.05

Cursor Sway

0.50

Opacity

1.00

Color

Mid Color

Deep Color

Background

Cursor InteractionPaused

Props

Name	Type	Default	Description
`speed`	number	`1`	How fast the curtains travel.
`sheets`	number	`5`	Number of stacked light sheets. The main cost knob.
`amplitude`	number	`0.12`	Height of the travelling wave that shapes each sheet.
`frequency`	number	`3.2`	Spatial frequency of that wave.
`thickness`	number	`0.05`	Half height of a sheet at full brightness.
`tail`	number	`0.22`	Vertical softness of the upward streak.
`position`	number	`0`	Vertical centre of the beam, -0.5 to 0.5.
`slant`	number	`0.1`	Diagonal lean applied across the beam.
`spread`	number	`0.16`	Vertical separation between consecutive sheets.
`rays`	number	`0.45`	Strength of the vertical striations, 0 to 1.
`rayScale`	number	`26`	Spatial frequency of the striations.
`rayDrift`	number	`0.8`	How fast the striations drift sideways.
`reactivity`	number	`0.7`	How strongly the envelope model modulates the beam, 0 to 1.
`gain`	number	`1.5`	Overall brightness before tone mapping.
`exposure`	number	`2.4`	Tone mapping headroom. Higher keeps more of the falloff.
`contrast`	number	`1`	Tone response curve. Above 1 deepens the shadows.
`color`	string	`"#34d399"`	First palette colour.
`midColor`	string	`"#22d3ee"`	Second palette colour.
`deepColor`	string	`"#a78bfa"`	Third palette colour.
`hueDrift`	number	`1`	How fast the palette travels through the sheets.
`grain`	number	`0.05`	Film grain strength, 0 to 1.
`grainSize`	number	`1`	Grain cell size in CSS pixels.
`grainRate`	number	`24`	Grain refreshes per second.
`backgroundColor`	string	`"#0a0a0a"`	Panel backdrop, or "transparent" to show the page through.
`opacity`	number	`1`	Master alpha.
`cursorInteraction`	boolean	`true`	Let the pointer sway the curtains.
`cursorSway`	number	`0.5`	How far the pointer sways the curtains, 0 to 1.
`paused`	boolean	`false`	Freeze the animation.
`adaptiveQuality`	boolean	`true`	Scale back resolution when the frame budget slips.
`targetFps`	number	`60`	Frame rate the quality meter aims to hold.
`dpr`	number	`1.75`	Upper device pixel ratio bound.
`className`	string	`-`	Optional className applied to the root.
`children`	ReactNode	`-`	Content layered above the beam.

speednumber

How fast the curtains travel.

Default1

sheetsnumber

Number of stacked light sheets. The main cost knob.

Default5

amplitudenumber

Height of the travelling wave that shapes each sheet.

Default0.12

frequencynumber

Spatial frequency of that wave.

Default3.2

thicknessnumber

Half height of a sheet at full brightness.

Default0.05

tailnumber

Vertical softness of the upward streak.

Default0.22

positionnumber

Vertical centre of the beam, -0.5 to 0.5.

Default0

slantnumber

Diagonal lean applied across the beam.

Default0.1

spreadnumber

Vertical separation between consecutive sheets.

Default0.16

raysnumber

Strength of the vertical striations, 0 to 1.

Default0.45

rayScalenumber

Spatial frequency of the striations.

Default26

rayDriftnumber

How fast the striations drift sideways.

Default0.8

reactivitynumber

How strongly the envelope model modulates the beam, 0 to 1.

Default0.7

gainnumber

Overall brightness before tone mapping.

Default1.5

exposurenumber

Tone mapping headroom. Higher keeps more of the falloff.

Default2.4

contrastnumber

Tone response curve. Above 1 deepens the shadows.

Default1

colorstring

First palette colour.

Default"#34d399"

midColorstring

Second palette colour.

Default"#22d3ee"

deepColorstring

Third palette colour.

Default"#a78bfa"

hueDriftnumber

How fast the palette travels through the sheets.

Default1

grainnumber

Film grain strength, 0 to 1.

Default0.05

grainSizenumber

Grain cell size in CSS pixels.

Default1

grainRatenumber

Grain refreshes per second.

Default24

backgroundColorstring

Panel backdrop, or "transparent" to show the page through.

Default"#0a0a0a"

opacitynumber

Master alpha.

Default1

cursorInteractionboolean

Let the pointer sway the curtains.

Defaulttrue

cursorSwaynumber

How far the pointer sways the curtains, 0 to 1.

Default0.5

pausedboolean

Freeze the animation.

Defaultfalse

adaptiveQualityboolean

Scale back resolution when the frame budget slips.

Defaulttrue

targetFpsnumber

Frame rate the quality meter aims to hold.

Default60

dprnumber

Upper device pixel ratio bound.

Default1.75

classNamestring

Optional className applied to the root.

Default-

childrenReactNode

Content layered above the beam.

Default-