Theme

Glass Threads

Pro

A polished glass-thread background with layered highlights, subtle refraction, and controls for facet scale, shine, and colors.

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

<ShaderGlassThreads
  glassBaseColor="#08121a"
  glintColor="#fae09e"
  threadColor="#94e0f2"
  facetScale={5.5}
  highlightStrength={0.72}
  refractionAmount={1}
  threadWidth={1}
  refractionDrift={0.3}
  opacity={0.92}
/>

Props

prop	type	default	description
`refractionDrift`	`number`	`0.3`	Controls refraction.
`facetScale`	`number`	`5.5`	Controls facet scale.
`highlightStrength`	`number`	`0.72`	Controls highlight.
`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.
`glassBaseColor`	`string`	`"#08121a"`	Sets the glass base color. CSS colors and normalized RGB strings are supported.
`threadColor`	`string`	`"#94e0f2"`	Sets the thread highlight color. CSS colors and normalized RGB strings are supported.
`glintColor`	`string`	`"#fae09e"`	Sets the glint highlight color. CSS colors and normalized RGB strings are supported.
`threadWidth`	`number`	`1`	Thickness of the luminous threads.
`refractionAmount`	`number`	`1`	How far the thread lattice bends.