Signal Grid

Pro

A subtle data-grid background with pulsing nodes, transmission lines, and controls for grid density, brightness, motion, and colors.

Prev Next

Theme

Upgrade to Pro

Loading code...

Starwind Dependencies

This component requires Starwind Pro.

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

Upgrade to Pro

Failed to load code. Please try again.

Code

Usage

<ShaderSignalGrid
  pulseRate={0.34}
  gridDensity={14}
  signalBrightness={0.9}
  fieldColor="#0a121a"
  lineColor="#3bc7ad"
  nodeColor="#d1b875"
/>

Props

prop	type	default	description
`pulseRate`	`number`	`0.34`	Controls pulse rate.
`gridDensity`	`number`	`14`	Controls grid density.
`signalBrightness`	`number`	`0.9`	Controls signal brightness.
`opacity`	`number`	`0.9`	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`	`"#0a121a"`	Sets the grid field color. CSS colors and normalized RGB strings are supported.
`lineColor`	`string`	`"#3bc7ad"`	Sets the signal line color. CSS colors and normalized RGB strings are supported.
`nodeColor`	`string`	`"#d1b875"`	Sets the pulse node color. CSS colors and normalized RGB strings are supported.