Axial Beam

Soft rays of light rising from beyond the frame

axial-beam-tw

Customize

Background

Body

Glow

Bright

Core

Origin X

0.50

Origin Y

-0.70

Angle

0°

Tilt

20°

Spread

34°

Rays

Ray Width

1.00

Reach

1.10

Swing

1.00

Flicker

0.60

Haze

1.00

Intensity

1.00

Speed

1.00

Cursor Boost

1.00

Cursor Width

5.0°

Grain

0.00

Seed

InteractivePaused

Props

Name	Type	Default	Description
`colors`	string[]	`["#5227FF", "#B84DFF", "#FF9FFC", "#FFE6FA"]`	Up to four colours, from the body of the rays to their hottest core.
`backgroundColor`	string	`"#06040d"`	Colour behind the light. Pass "transparent" to composite over the page.
`blend`	"add" \| "ink"	`"add"`	"add" emits light on dark backgrounds, "ink" shades light ones.
`originX`	number	`0.5`	Horizontal position of the light source, 0 left to 1 right.
`originY`	number	`-0.7`	Vertical position of the light source, 0 bottom to 1 top. Values beyond the frame give long, nearly parallel rays.
`angle`	number	`0`	Direction the rays travel, in degrees. 0 points up, 180 down.
`tilt`	number	`20`	Leans the rays towards the viewer in perspective, in degrees. 0 keeps them flat, negative values send them into the distance.
`spread`	number	`34`	Half-width of the fan of rays, in degrees.
`rays`	number	`10`	Number of rays in the fan, 1 to 16.
`rayWidth`	number	`1`	Multiplier for the width of every ray.
`reach`	number	`1.1`	How far the light travels into the frame before fading, in frame heights.
`swing`	number	`1`	How far the rays drift from their resting angles. 0 holds them still.
`flicker`	number	`0.6`	How strongly the rays fade in and out over time, 0 to 1.
`haze`	number	`1`	Soft light scattered between the rays and drifting along them. 0 gives clean rays.
`intensity`	number	`1`	Overall brightness.
`speed`	number	`1`	Animation speed. 0 holds the current frame.
`interactive`	boolean	`true`	Lights up the rays the pointer passes over.
`cursorBoost`	number	`1`	How brightly a ray flares when the pointer lines up with it. 0 disables it.
`cursorWidth`	number	`5`	Angular reach of the pointer, in degrees. Wider values light up neighbouring rays too.
`grain`	number	`0`	Optional film grain. Gradients are already dithered, so 0 stays free of banding.
`seed`	number	`0`	Changes the arrangement and timing of the rays.
`paused`	boolean	`false`	Freezes the drifting rays.
`dpr`	number	`1.5`	Upper bound for the device pixel ratio.
`className`	string	`—`	Classes for the root element. Give it a height.
`style`	CSSProperties	`—`	Inline styles for the root element.
`children`	ReactNode	`—`	Content layered above the light.

colorsstring[]

Up to four colours, from the body of the rays to their hottest core.

Default["#5227FF", "#B84DFF", "#FF9FFC", "#FFE6FA"]

backgroundColorstring

Colour behind the light. Pass "transparent" to composite over the page.

Default"#06040d"

blend"add" | "ink"

"add" emits light on dark backgrounds, "ink" shades light ones.

Default"add"

originXnumber

Horizontal position of the light source, 0 left to 1 right.

Default0.5

originYnumber

Vertical position of the light source, 0 bottom to 1 top. Values beyond the frame give long, nearly parallel rays.

Default-0.7

anglenumber

Direction the rays travel, in degrees. 0 points up, 180 down.

Default0

tiltnumber

Leans the rays towards the viewer in perspective, in degrees. 0 keeps them flat, negative values send them into the distance.

Default20

spreadnumber

Half-width of the fan of rays, in degrees.

Default34

raysnumber

Number of rays in the fan, 1 to 16.

Default10

rayWidthnumber

Multiplier for the width of every ray.

Default1

reachnumber

How far the light travels into the frame before fading, in frame heights.

Default1.1

swingnumber

How far the rays drift from their resting angles. 0 holds them still.

Default1

flickernumber

How strongly the rays fade in and out over time, 0 to 1.

Default0.6

hazenumber

Soft light scattered between the rays and drifting along them. 0 gives clean rays.

Default1

intensitynumber

Overall brightness.

Default1

speednumber

Animation speed. 0 holds the current frame.

Default1

interactiveboolean

Lights up the rays the pointer passes over.

Defaulttrue

cursorBoostnumber

How brightly a ray flares when the pointer lines up with it. 0 disables it.

Default1

cursorWidthnumber

Angular reach of the pointer, in degrees. Wider values light up neighbouring rays too.

Default5

grainnumber

Optional film grain. Gradients are already dithered, so 0 stays free of banding.

Default0

seednumber

Changes the arrangement and timing of the rays.

Default0

pausedboolean

Freezes the drifting rays.

Defaultfalse

dprnumber

Upper bound for the device pixel ratio.

Default1.5

classNamestring

Classes for the root element. Give it a height.

Default—

styleCSSProperties

Inline styles for the root element.

Default—

childrenReactNode

Content layered above the light.

Default—

Name

Type

Default

Description

colors

string[]

["#5227FF", "#B84DFF", "#FF9FFC", "#FFE6FA"]

Up to four colours, from the body of the rays to their hottest core.

backgroundColor

string

"#06040d"

Colour behind the light. Pass "transparent" to composite over the page.

blend

"add" | "ink"

"add"

"add" emits light on dark backgrounds, "ink" shades light ones.

originX

number

0.5

Horizontal position of the light source, 0 left to 1 right.

originY

number

-0.7

Vertical position of the light source, 0 bottom to 1 top. Values beyond the frame give long, nearly parallel rays.

angle

number

0

Direction the rays travel, in degrees. 0 points up, 180 down.

tilt

number

20

Leans the rays towards the viewer in perspective, in degrees. 0 keeps them flat, negative values send them into the distance.

spread

number

34

Half-width of the fan of rays, in degrees.

rays

number

10

Number of rays in the fan, 1 to 16.

rayWidth

number

1

Multiplier for the width of every ray.

reach

number

1.1

How far the light travels into the frame before fading, in frame heights.

swing

number

1

How far the rays drift from their resting angles. 0 holds them still.

flicker

number

0.6

How strongly the rays fade in and out over time, 0 to 1.

haze

number

1

Soft light scattered between the rays and drifting along them. 0 gives clean rays.

intensity

number

1

Overall brightness.

speed

number

1

Animation speed. 0 holds the current frame.

interactive

boolean

true

Lights up the rays the pointer passes over.

cursorBoost

number

1

How brightly a ray flares when the pointer lines up with it. 0 disables it.

cursorWidth

number

5

Angular reach of the pointer, in degrees. Wider values light up neighbouring rays too.

grain

number

0

Optional film grain. Gradients are already dithered, so 0 stays free of banding.

seed

number

0

Changes the arrangement and timing of the rays.

paused

boolean

false

Freezes the drifting rays.

dpr

number

1.5

Upper bound for the device pixel ratio.

className

string

—

Classes for the root element. Give it a height.

style

CSSProperties

—

Inline styles for the root element.

children

ReactNode

—

Content layered above the light.