Blurred Rays

Soft vertical beams of light that flicker through the spectrum

blurred-rays-tw

pro.reactbits.dev

ComponentsBlocksTemplatesPricing

Get Pro

The full spectrum of light

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

Get startedBrowse library

9:41

The full spectrum of light

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

Get startedBrowse library

The full spectrum of light

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

Get startedLearn more

Customize

Spectrum

Color A

Color B

Background

Ray Count

Ray Spacing

0.27

Ray Thickness

0.35

Edge Softness

0.65

Width Pulse

0.10

Width Base

0.30

Speed

0.50

Flicker Rate

1.00

Horizontal Scale

4.6

Vertical Offset

-0.50

Origin X

0.00

Red Shift

1.00

Green Shift

1.00

Blue Shift

1.00

Top Fade

1.30

Bottom Fade

0.95

Side Fade

3.0

Depth

1.00

Bloom

4.0

Brightness

2.00

Parallax

1.00

Wave Strength

1.00

InteractiveIntroPaused

Props

Name	Type	Default	Description
`colors`	[string, string]	`undefined`	Two colours for the beams, blended in OKLCh. Leave it unset for the classic spectrum, where the light drifts through every hue.
`backgroundColor`	string	`"transparent"`	Fill behind the beams. Transparent shows the page. On a light background the beams are drawn as ink.
`rayCount`	number	`25`	Number of beams, from 1 to 128.
`raySpacing`	number	`0.27`	Gap between neighbouring beams.
`rayThickness`	number	`0.35`	Width of the bright body of each beam.
`edgeSoftness`	number	`0.65`	Width of the soft falloff around each beam.
`widthPulse`	number	`0.1`	How much each beam slowly swells and narrows.
`widthBase`	number	`0.3`	Base width scale for every beam.
`speed`	number	`0.5`	Overall speed of the animation.
`flickerRate`	number	`1`	How fast the beams flicker. Fast settings are smoothed so they never strobe.
`horizontalScale`	number	`4.6`	Horizontal zoom. Higher values pack the beams closer.
`verticalOffset`	number	`-0.5`	Moves the field of light up or down.
`originX`	number	`0`	Moves the whole row of beams sideways.
`colorShiftR`	number	`1`	How strongly red drops out of the light over time. Also shapes the flicker.
`colorShiftG`	number	`1`	How strongly green drops out of the light over time.
`colorShiftB`	number	`1`	How strongly blue drops out of the light over time.
`vignetteTop`	number	`1.3`	Length of the fade at the top of the beams.
`vignetteBottom`	number	`0.95`	Length of the fade at the bottom of the beams.
`vignetteLeft`	number	`3`	Reach of the fade on the left side.
`vignetteRight`	number	`3`	Reach of the fade on the right side.
`depth`	number	`1`	Spreads the beams over three depth layers. Far beams are softer and dimmer. 0 keeps them flat.
`bloom`	number	`4`	Soft glow around the brightest light.
`brightness`	number	`2`	Overall exposure of the light.
`opacity`	number	`1`	Opacity of the beams.
`parallax`	number	`1`	How far the depth layers slide with the pointer. Near beams move more than far ones.
`waveStrength`	number	`1`	Strength of the brightness wave a click sends across the beams.
`interactive`	boolean	`true`	Hover to shift the depth layers. Click to send a wave of light outward from that point. Waves stack.
`intro`	boolean	`true`	The beams fade up one by one when the component mounts.
`paused`	boolean	`false`	Stops the flicker. Reduced-motion users get a still frame.
`dpr`	number	`2`	Maximum device pixel ratio for the canvas.
`width`	string \| number	`"100%"`	Width of the root element.
`height`	string \| number	`"100%"`	Height of the root element.
`ref`	{ wave, replay }	`-`	wave(x?, strength?) sends a wave from a 0 to 1 position. replay() restarts the intro.
`children`	ReactNode	`-`	Content rendered above the light.
`className`	string	`-`	Classes for the root element.
`style`	CSSProperties	`-`	Inline styles for the root element.

colors[string, string]

Two colours for the beams, blended in OKLCh. Leave it unset for the classic spectrum, where the light drifts through every hue.

Defaultundefined

backgroundColorstring

Fill behind the beams. Transparent shows the page. On a light background the beams are drawn as ink.

Default"transparent"

rayCountnumber

Number of beams, from 1 to 128.

Default25

raySpacingnumber

Gap between neighbouring beams.

Default0.27

rayThicknessnumber

Width of the bright body of each beam.

Default0.35

edgeSoftnessnumber

Width of the soft falloff around each beam.

Default0.65

widthPulsenumber

How much each beam slowly swells and narrows.

Default0.1

widthBasenumber

Base width scale for every beam.

Default0.3

speednumber

Overall speed of the animation.

Default0.5

flickerRatenumber

How fast the beams flicker. Fast settings are smoothed so they never strobe.

Default1

horizontalScalenumber

Horizontal zoom. Higher values pack the beams closer.

Default4.6

verticalOffsetnumber

Moves the field of light up or down.

Default-0.5

originXnumber

Moves the whole row of beams sideways.

Default0

colorShiftRnumber

How strongly red drops out of the light over time. Also shapes the flicker.

Default1

colorShiftGnumber

How strongly green drops out of the light over time.

Default1

colorShiftBnumber

How strongly blue drops out of the light over time.

Default1

vignetteTopnumber

Length of the fade at the top of the beams.

Default1.3

vignetteBottomnumber

Length of the fade at the bottom of the beams.

Default0.95

vignetteLeftnumber

Reach of the fade on the left side.

Default3

vignetteRightnumber

Reach of the fade on the right side.

Default3

depthnumber

Spreads the beams over three depth layers. Far beams are softer and dimmer. 0 keeps them flat.

Default1

bloomnumber

Soft glow around the brightest light.

Default4

brightnessnumber

Overall exposure of the light.

Default2

opacitynumber

Opacity of the beams.

Default1

parallaxnumber

How far the depth layers slide with the pointer. Near beams move more than far ones.

Default1

waveStrengthnumber

Strength of the brightness wave a click sends across the beams.

Default1

interactiveboolean

Hover to shift the depth layers. Click to send a wave of light outward from that point. Waves stack.

Defaulttrue

introboolean

The beams fade up one by one when the component mounts.

Defaulttrue

pausedboolean

Stops the flicker. Reduced-motion users get a still frame.

Defaultfalse

dprnumber

Maximum device pixel ratio for the canvas.

Default2

widthstring | number

Width of the root element.

Default"100%"

heightstring | number

Height of the root element.

Default"100%"

ref{ wave, replay }

wave(x?, strength?) sends a wave from a 0 to 1 position. replay() restarts the intro.

Default-

childrenReactNode

Content rendered above the light.

Default-

classNamestring

Classes for the root element.

Default-

styleCSSProperties

Inline styles for the root element.

Default-

Name

Type

Default

Description

colors

[string, string]

undefined

Two colours for the beams, blended in OKLCh. Leave it unset for the classic spectrum, where the light drifts through every hue.

backgroundColor

string

"transparent"

Fill behind the beams. Transparent shows the page. On a light background the beams are drawn as ink.

rayCount

number

25

Number of beams, from 1 to 128.

raySpacing

number

0.27

Gap between neighbouring beams.

rayThickness

number

0.35

Width of the bright body of each beam.

edgeSoftness

number

0.65

Width of the soft falloff around each beam.

widthPulse

number

0.1

How much each beam slowly swells and narrows.

widthBase

number

0.3

Base width scale for every beam.

speed

number

0.5

Overall speed of the animation.

flickerRate

number

1

How fast the beams flicker. Fast settings are smoothed so they never strobe.

horizontalScale

number

4.6

Horizontal zoom. Higher values pack the beams closer.

verticalOffset

number

-0.5

Moves the field of light up or down.

originX

number

0

Moves the whole row of beams sideways.

colorShiftR

number

1

How strongly red drops out of the light over time. Also shapes the flicker.

colorShiftG

number

1

How strongly green drops out of the light over time.

colorShiftB

number

1

How strongly blue drops out of the light over time.

vignetteTop

number

1.3

Length of the fade at the top of the beams.

vignetteBottom

number

0.95

Length of the fade at the bottom of the beams.

vignetteLeft

number

3

Reach of the fade on the left side.

vignetteRight

number

3

Reach of the fade on the right side.

depth

number

1

Spreads the beams over three depth layers. Far beams are softer and dimmer. 0 keeps them flat.

bloom

number

4

Soft glow around the brightest light.

brightness

number

2

Overall exposure of the light.

opacity

number

1

Opacity of the beams.

parallax

number

1

How far the depth layers slide with the pointer. Near beams move more than far ones.

waveStrength

number

1

Strength of the brightness wave a click sends across the beams.

interactive

boolean

true

Hover to shift the depth layers. Click to send a wave of light outward from that point. Waves stack.

intro

boolean

true

The beams fade up one by one when the component mounts.

paused

boolean

false

Stops the flicker. Reduced-motion users get a still frame.

dpr

number

2

Maximum device pixel ratio for the canvas.

width

string | number

"100%"

Width of the root element.

height

string | number

"100%"

Height of the root element.

ref

{ wave, replay }

-

wave(x?, strength?) sends a wave from a 0 to 1 position. replay() restarts the intro.

children

ReactNode

-

Content rendered above the light.

className

string

-

Classes for the root element.

style

CSSProperties

-

Inline styles for the root element.