Water Surface

Pro

A realistic animated water background with layered waves, shimmering highlights, click ripples, and controls for scale, shine, motion, and water 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

<ShaderWaterSurface
  surfaceDrift={0.2}
  waveScale={2.8}
  surfaceShine={0.85}
  deepWaterColor="#061724"
  shallowWaterColor="#1F859E"
  sunGlintColor="#F5D184"
/>

Props

prop	type	default	description
`surfaceDrift`	`number`	`0.2`	Surface drift multiplier.
`waveScale`	`number`	`2.8`	Surface wave scale.
`surfaceShine`	`number`	`0.85`	Overall highlight and ripple contrast.
`opacity`	`number`	`0.96`	Sets the overall opacity of the shader background wrapper.
`maxDpr`	`number`	`1.25`	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.
`deepWaterColor`	`string`	`"#061724"`	Deep water color as a CSS color or normalized RGB.
`shallowWaterColor`	`string`	`"#1F859E"`	Shallow water color as a CSS color or normalized RGB.
`sunGlintColor`	`string`	`"#F5D184"`	Sun glint color as a CSS color or normalized RGB.