Dithered Glow

Pro

A dotted glow background with soft bloom, interactive pointer highlights, and controls for dot size, motion, brightness, and palette.

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

<ShaderDitheredGlow
  bloomDrift={0.26}
  dotPitch={80}
  glowStrength={0.74}
  pointerGlowStrength={0.2}
  pointerDotReveal={0.8}
  pointerReach={1}
  maxFps="60"
  pointerEnabled={true}
  inkFieldColor="#0f0f14"
  primaryBloomColor="#f0855c"
  secondaryBloomColor="#59c2f0"
/>

Props

prop	type	default	description
`bloomDrift`	`number`	`0.26`	Controls bloom drift.
`dotPitch`	`number`	`80`	Controls dot pitch.
`glowStrength`	`number`	`0.74`	Controls glow.
`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.
`pointerEnabled`	`boolean`	`true`	Toggles the pointer-responsive hover glow.
`pointerDotReveal`	`number`	`pointerGlowStrength`	Controls how strongly the pointer reveals extra dots, falling back to pointer glow when omitted.
`pointerGlowStrength`	`number`	`0.2`	Controls pointer glow.
`pointerReach`	`number`	`1`	Controls pointer reach.
`inkFieldColor`	`string`	`"#0f0f14"`	Sets the ink field color. CSS colors and normalized RGB strings are supported.
`primaryBloomColor`	`string`	`"#f0855c"`	Sets the primary bloom color. CSS colors and normalized RGB strings are supported.
`secondaryBloomColor`	`string`	`"#59c2f0"`	Sets the secondary bloom color. CSS colors and normalized RGB strings are supported.