Corner Beams

Pro

A clean light-beam background that draws attention toward the center, with adjustable beam count, brightness, motion, and colors.

Theme

Upgrade to Pro

Loading code...

This component requires Starwind Pro.

Get lifetime access to all premium components, updates, and priority support.

Failed to load code. Please try again.

Code

Usage

<ShaderCornerBeams
  beamDrift={0.3}
  beamCount={7.4}
  lightStrength={0.82}
  fieldColor="#0a141c"
  beamColor="#badfff"
  coreColor="#f2c274"
/>

prop	type	default	description
`beamDrift`	`number`	`0.3`	Controls drift.
`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.