Blurred Rays
Flickering vertical light beams with bloom
blurred-rays-tw
Customize
Rays
25
0.27
0.35
0.65
0.1
0.3
Animation & Layout
0.5
1
4.6
-0.5
0
Color & Vignette
1
1
1
1.3
0.95
3
3
Visual
4
2
1
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 |