Corner Beams
Pro
A clean light-beam background that draws attention toward the center, with adjustable beam count, brightness, motion, and colors.
Code
Usage
<ShaderCornerBeams
beamColor="#badfff"
coreColor="#f2c274"
fieldColor="#0a141c"
beamCount={7.4}
beamWidth={1}
lightStrength={0.82}
beamSweep={1}
beamDrift={0.3}
opacity={0.92}
/>Props
| prop | type | default | description |
|---|---|---|---|
beamWidth | number | 1 | Controls how far each beam and its soft glow spread. |
beamSweep | number | 1 | Beam sway distance multiplier. Set to 0 to stop sideways movement. |
beamDrift | number | 0.3 | Controls the beam sweep speed. Set to 0 to hold the beams still. |
beamCount | number | 7.4 | Controls beam count. |
lightStrength | number | 0.82 | Controls light strength. |
opacity | number | 0.92 | Sets the overall opacity of the shader background wrapper. |
maxDpr | number | 1.5 | Caps device pixel ratio for sharper output without runaway GPU cost. |
maxFps | 30 | 45 | 60 | 60 | Caps the animation frame rate for performance-sensitive pages. |
fieldColor | string | "#0a141c" | Sets the field base color. CSS colors and normalized RGB strings are supported. |
beamColor | string | "#badfff" | Sets the beam strand color. CSS colors and normalized RGB strings are supported. |
coreColor | string | "#f2c274" | Sets the core glow color. CSS colors and normalized RGB strings are supported. |