Blurred Rays

Flickering vertical light beams with bloom

blurred-rays-tw

Customize

Tweak the props live

Rays

Ray Count25

Ray Spacing0.27

Ray Thickness0.35

Edge Softness0.65

Width Pulse0.1

Width Base0.3

Animation & Layout

Speed0.5

Flicker Rate1

Horizontal Scale4.6

Vertical Offset-0.5

Origin X0

Color & Vignette

Color Shift R1

Color Shift G1

Color Shift B1

Vignette Top1.3

Vignette Bottom0.95

Vignette Left3

Vignette Right3

Visual

Bloom4

Brightness2

Opacity1

Background

#FFFFFF

Cursor Interaction

Props

Name	Type	Default	Description
`width`	string \| number	`"100%"`	Container width
`height`	string \| number	`"100%"`	Container height
`className`	string	`""`	Additional CSS classes for styling
`children`	ReactNode	`undefined`	Content rendered above the effect
`speed`	number	`0.5`	Overall animation speed multiplier (0.1–3.0)
`flickerRate`	number	`1`	Rate at which individual rays flicker (0.1–5.0)
`rayCount`	number	`25`	Total number of light beams (1–128)
`raySpacing`	number	`0.27`	Horizontal gap between adjacent rays (0.01–1.0)
`rayThickness`	number	`0.35`	Base thickness of each ray (0.01–1.0)
`edgeSoftness`	number	`0.65`	Blur radius at ray edges (0.01–2.0)
`widthPulse`	number	`0.1`	Amplitude of width oscillation (0–1)
`widthBase`	number	`0.3`	Minimum width baseline (0.01–1.0)
`horizontalScale`	number	`4.6`	Horizontal stretch factor (0.5–10)
`verticalOffset`	number	`-0.5`	Vertical shift of the ray field (-2–2)
`originX`	number	`0`	X position where rays originate (-5–5)
`colorShiftR`	number	`1`	Red channel color modulation intensity (0–3)
`colorShiftG`	number	`1`	Green channel color modulation intensity (0–3)
`colorShiftB`	number	`1`	Blue channel color modulation intensity (0–3)
`vignetteTop`	number	`1.3`	Top edge fade distance (0–3)
`vignetteBottom`	number	`0.95`	Bottom edge fade distance (0–3)
`vignetteLeft`	number	`3`	Left edge fade distance (0–10)
`vignetteRight`	number	`3`	Right edge fade distance (0–10)
`bloom`	number	`4`	Glow / bloom multiplier (0–10)
`brightness`	number	`2`	Overall brightness (0.1–5)
`backgroundColor`	string	`"#000000"`	Background color in hex format
`opacity`	number	`1`	Master opacity (0–1)
`cursorInteraction`	boolean	`false`	Enable cursor interaction to shift the ray origin

widthstring | number

Container width

Default:"100%"

heightstring | number

Container height

Default:"100%"

classNamestring

Additional CSS classes for styling

Default:""

childrenReactNode

Content rendered above the effect

Default:undefined

speednumber

Overall animation speed multiplier (0.1–3.0)

Default:0.5

flickerRatenumber

Rate at which individual rays flicker (0.1–5.0)

Default:1

rayCountnumber

Total number of light beams (1–128)

Default:25

raySpacingnumber

Horizontal gap between adjacent rays (0.01–1.0)

Default:0.27

rayThicknessnumber

Base thickness of each ray (0.01–1.0)

Default:0.35

edgeSoftnessnumber

Blur radius at ray edges (0.01–2.0)

Default:0.65

widthPulsenumber

Amplitude of width oscillation (0–1)

Default:0.1

widthBasenumber

Minimum width baseline (0.01–1.0)

Default:0.3

horizontalScalenumber

Horizontal stretch factor (0.5–10)

Default:4.6

verticalOffsetnumber

Vertical shift of the ray field (-2–2)

Default:-0.5

originXnumber

X position where rays originate (-5–5)

Default:0

colorShiftRnumber

Red channel color modulation intensity (0–3)

Default:1

colorShiftGnumber

Green channel color modulation intensity (0–3)

Default:1

colorShiftBnumber

Blue channel color modulation intensity (0–3)

Default:1

vignetteTopnumber

Top edge fade distance (0–3)

Default:1.3

vignetteBottomnumber

Bottom edge fade distance (0–3)

Default:0.95

vignetteLeftnumber

Left edge fade distance (0–10)

Default:3

vignetteRightnumber

Right edge fade distance (0–10)

Default:3

bloomnumber

Glow / bloom multiplier (0–10)

Default:4

brightnessnumber

Overall brightness (0.1–5)

Default:2

backgroundColorstring

Background color in hex format

Default:"#000000"

opacitynumber

Master opacity (0–1)

Default:1

cursorInteractionboolean

Enable cursor interaction to shift the ray origin

Default:false