Night Clouds

Pro

A moody night-sky background with slow moving cloud layers, soft horizon glow, and controls for drift, scale, depth, 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

<ShaderNightClouds
  cloudDrift={0.4}
  cloudScale={2.4}
  moonlitDepth={0.84}
  skyColor="#0D101A"
  cloudColor="#94B3DB"
  horizonColor="#D19E70"
/>

Props

prop	type	default	description
`cloudDrift`	`number`	`0.4`	Cloud drift multiplier.
`cloudScale`	`number`	`2.4`	Cloud field scale.
`moonlitDepth`	`number`	`0.84`	Overall cloud depth and glow.
`opacity`	`number`	`0.96`	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.
`skyColor`	`string`	`"#0D101A"`	Sky field color as a CSS color or normalized RGB.
`cloudColor`	`string`	`"#94B3DB"`	Cloud layer color as a CSS color or normalized RGB.
`horizonColor`	`string`	`"#D19E70"`	Horizon warmth color as a CSS color or normalized RGB.