Blurred Rays

Flickering vertical light beams with bloom

blurred-rays-tw

Customize

Ray Count

Ray Spacing

0.27

Ray Thickness

0.35

Edge Softness

0.65

Width Pulse

0.10

Width Base

0.30

Speed

0.5

Flicker Rate

1.0

Horizontal Scale

4.6

Vertical Offset

-0.5

Origin X

0.0

Color Shift R

1.0

Color Shift G

1.0

Color Shift B

1.0

Vignette Top

1.30

Vignette Bottom

0.95

Vignette Left

3.0

Vignette Right

3.0

Bloom

4.0

Brightness

2.0

Opacity

1.00

Background

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

Defaultundefined

speednumber

Overall animation speed multiplier (0.1–3.0)

Default0.5

flickerRatenumber

Rate at which individual rays flicker (0.1–5.0)

Default1

rayCountnumber

Total number of light beams (1–128)

Default25

raySpacingnumber

Horizontal gap between adjacent rays (0.01–1.0)

Default0.27

rayThicknessnumber

Base thickness of each ray (0.01–1.0)

Default0.35

edgeSoftnessnumber

Blur radius at ray edges (0.01–2.0)

Default0.65

widthPulsenumber

Amplitude of width oscillation (0–1)

Default0.1

widthBasenumber

Minimum width baseline (0.01–1.0)

Default0.3

horizontalScalenumber

Horizontal stretch factor (0.5–10)

Default4.6

verticalOffsetnumber

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

Default-0.5

originXnumber

X position where rays originate (-5–5)

Default0

colorShiftRnumber

Red channel color modulation intensity (0–3)

Default1

colorShiftGnumber

Green channel color modulation intensity (0–3)

Default1

colorShiftBnumber

Blue channel color modulation intensity (0–3)

Default1

vignetteTopnumber

Top edge fade distance (0–3)

Default1.3

vignetteBottomnumber

Bottom edge fade distance (0–3)

Default0.95

vignetteLeftnumber

Left edge fade distance (0–10)

Default3

vignetteRightnumber

Right edge fade distance (0–10)

Default3

bloomnumber

Glow / bloom multiplier (0–10)

Default4

brightnessnumber

Overall brightness (0.1–5)

Default2

backgroundColorstring

Background color in hex format

Default"#000000"

opacitynumber

Master opacity (0–1)

Default1

cursorInteractionboolean

Enable cursor interaction to shift the ray origin

Defaultfalse