Aurora Beam

A sweeping beam of aurora light

aurora-beam-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

A beam of northern light

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

9:41

A beam of northern light

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedBrowse library

A beam of northern light

Premium animated components and blocks, crafted to make your next launch feel alive.

Get startedLearn more

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-

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.