React Water Shaders

React water with GPU surface simulation. Realistic water effects for Next.js with TypeScript and shadcn/ui—free code.

React

react-shaders

GPU Shaders

Building water effects?

Join our Discord community for help from other developers working with GPU water simulation and surface effects.

Need realistic water surfaces without complex 3D engines? Most developers use static blue backgrounds or simple wave animations that lack depth. This React water component uses GPU surface simulation to create convincing water with reflections, caustics, depth variation, and authentic surface details.

Copy-paste TypeScript component that creates immersive water surfaces with sky reflections and underwater light patterns. Fresnel physics create realistic reflection behavior. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—photorealistic water simulation.

React water with GPU surface physics

Realistic water surface with reflections, caustics, depth, and authentic wave patterns:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface WaterShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  depth?: number;  clarity?: number;  waves?: number;  reflection?: number;}const fragmentShader = `// Hash function for noise generationfloat hash(vec2 p) {    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);}// Smooth noise functionfloat noise(vec2 p) {    vec2 i = floor(p);    vec2 f = fract(p);    f = f * f * (3.0 - 2.0 * f);    float a = hash(i);    float b = hash(i + vec2(1.0, 0.0));    float c = hash(i + vec2(0.0, 1.0));    float d = hash(i + vec2(1.0, 1.0));    return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);}// Fractal Brownian Motion for water patternsfloat fbm(vec2 p) {    float value = 0.0;    float amplitude = 0.5;    float frequency = 1.0;    for (int i = 0; i < 6; i++) {        value += amplitude * noise(p * frequency);        amplitude *= 0.5;        frequency *= 2.0;    }    return value;}// Water surface normal calculationvec3 waterNormal(vec2 uv, float time) {    float scale = u_waves * 8.0;    vec2 offset = vec2(time * u_speed * 0.3, time * u_speed * 0.2);    // Sample height at current and nearby points    float h = fbm(uv * scale + offset);    float hx = fbm((uv + vec2(0.01, 0.0)) * scale + offset);    float hy = fbm((uv + vec2(0.0, 0.01)) * scale + offset);    // Calculate normal from height differences    vec3 normal = normalize(vec3(h - hx, h - hy, 0.02));    return normal;}// Fresnel effect for realistic water reflectionfloat fresnel(vec3 normal, vec3 viewDir) {    float cosTheta = max(0.0, dot(normal, viewDir));    float f0 = 0.02; // Water's base reflectance    return f0 + (1.0 - f0) * pow(1.0 - cosTheta, 5.0);}// Water depth colorvec3 waterDepthColor(vec2 uv, float time) {    // Create depth variation    float depth = u_depth * (0.5 + 0.5 * fbm(uv * 2.0 + time * u_speed * 0.1));    // Deep water is darker blue-green, shallow is lighter cyan    vec3 deepColor = vec3(0.0, 0.1, 0.3);    vec3 shallowColor = vec3(0.1, 0.4, 0.6);    return mix(shallowColor, deepColor, depth);}// Caustics effect (light patterns under water)float caustics(vec2 uv, float time) {    vec2 p = uv * 6.0;    float t = time * u_speed * 2.0;    // Multiple overlapping caustic patterns    float c1 = sin(p.x + t) * cos(p.y + t * 1.3);    float c2 = sin(p.x * 1.4 - t * 0.8) * cos(p.y * 1.6 + t);    float c3 = sin(p.x * 0.7 + t * 1.5) * cos(p.y * 0.9 - t * 0.6);    float caustic = (c1 + c2 + c3) * 0.5 + 0.5;    caustic = pow(caustic, 3.0); // Sharpen the caustic lines    return caustic * 0.3;}// Sky reflectionvec3 skyReflection(vec2 uv, vec3 normal) {    // Distort UV based on water normal for realistic reflection    vec2 reflectUV = uv + normal.xy * u_reflection * 0.1;    // Create gradient sky    float horizon = 1.0 - reflectUV.y;    vec3 skyColor = mix(vec3(0.4, 0.7, 1.0), vec3(0.8, 0.9, 1.0), horizon);    // Add some cloud-like patterns    float clouds = fbm(reflectUV * 3.0) * 0.3;    skyColor = mix(skyColor, vec3(1.0, 1.0, 1.0), clouds * horizon);    return skyColor;}// Underwater light raysfloat lightRays(vec2 uv, float time) {    vec2 p = uv * 4.0;    float t = time * u_speed;    // Create moving light ray patterns    float rays = sin(p.x * 2.0 + t) * sin(p.y * 1.5 + t * 1.2);    rays += sin(p.x * 3.0 - t * 0.8) * sin(p.y * 2.5 - t);    rays = (rays + 2.0) * 0.25; // Normalize    rays = pow(rays, 2.0); // Sharpen    return rays * 0.2;}// Surface foam and bubblesfloat surfaceFoam(vec2 uv, float time) {    vec2 p = uv * 12.0;    float t = time * u_speed * 3.0;    // Moving foam patterns    float foam = fbm(p + vec2(t, 0.0));    foam += fbm(p * 1.5 + vec2(-t * 0.6, t * 0.8)) * 0.5;    // Only show foam at wave peaks    float waves = fbm(uv * u_waves * 4.0 + time * u_speed);    foam *= smoothstep(0.6, 1.0, waves);    return foam * 0.4;}void mainImage( out vec4 fragColor, in vec2 fragCoord ) {    vec2 uv = fragCoord / iResolution.xy;    float time = iTime;    // Calculate water surface normal    vec3 normal = waterNormal(uv, time);    // View direction (looking down at water)    vec3 viewDir = normalize(vec3(0.0, 0.0, 1.0));    // Calculate fresnel for reflection strength    float fresnelEffect = fresnel(normal, viewDir);    // Get base water depth color    vec3 waterColor = waterDepthColor(uv, time);    // Add caustics (light patterns)    float causticsEffect = caustics(uv, time);    waterColor += vec3(0.8, 1.0, 1.0) * causticsEffect;    // Add underwater light rays    float rays = lightRays(uv, time);    waterColor += vec3(0.6, 0.8, 1.0) * rays;    // Get sky reflection    vec3 reflection = skyReflection(uv, normal);    // Mix water color with reflection based on fresnel    vec3 finalColor = mix(waterColor, reflection, fresnelEffect * u_reflection);    // Add surface foam    float foam = surfaceFoam(uv, time);    finalColor = mix(finalColor, vec3(1.0, 1.0, 1.0), foam);    // Apply water clarity (how clear/murky the water is)    finalColor = mix(finalColor, vec3(0.2, 0.3, 0.4), (1.0 - u_clarity) * 0.5);    // Add subtle water surface highlights    float highlight = pow(max(0.0, dot(normal, normalize(vec3(1.0, 1.0, 2.0)))), 32.0);    finalColor += vec3(1.0, 1.0, 1.0) * highlight * 0.3;    // Enhance depth with darker edges    float edgeDarkening = smoothstep(0.0, 0.2, min(uv.x, min(uv.y, min(1.0 - uv.x, 1.0 - uv.y))));    finalColor *= 0.7 + edgeDarkening * 0.3;    // Ensure colors stay in valid range    finalColor = clamp(finalColor, 0.0, 1.0);    fragColor = vec4(finalColor, 1.0);}`;export const WaterShaders = forwardRef<HTMLDivElement, WaterShadersProps>(({  className,  speed = 1.0,  depth = 1.0,  clarity = 1.0,  waves = 1.0,  reflection = 1.0,  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={fragmentShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_depth: { type: '1f', value: depth },          u_clarity: { type: '1f', value: clarity },          u_waves: { type: '1f', value: waves },          u_reflection: { type: '1f', value: reflection },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});WaterShaders.displayName = "WaterShaders";

Original shader by Dov Azencot

Perfect for React 19, Next.js 15, and modern TypeScript projects. Water surface rendered entirely on GPU using GLSL physics algorithms with normal mapping. Customizable speed, depth, clarity, waves, and reflection strength. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/water-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/water-shaders.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/water-shaders.json

bunx shadcn@latest add https://www.shadcn.io/registry/water-shaders.json

Usage

import { WaterShaders } from "@/components/ui/water-shaders";

export default function OceanBackground() {
  return (
    <WaterShaders
      speed={1.0}
      depth={1.2}
      clarity={0.8}
      waves={1.1}
      reflection={0.9}
    >
      <div className="relative z-10">
        <h1>Content over water</h1>
      </div>
    </WaterShaders>
  );
}

Why water animations struggle with realism

CSS waves can't simulate surface physics. Video backgrounds lack interactivity and proper perspective. Most libraries use simple blue tints that don't capture the complex optical properties of real water surfaces.

GPU surface simulation solves this with mathematical water physics. Normal mapping creates realistic surface details. Fresnel calculations determine reflection behavior. Caustics and light rays simulate underwater optics for authentic depth perception.

This React water component uses GLSL mathematics for realistic surface behavior. Multiple noise layers create natural wave patterns. Sky reflection with distortion mimics real water surfaces. Depth-based color variation and caustic patterns add authentic underwater atmosphere.

React water shader features

Surface normal mapping - Mathematical surface details create realistic water texture
Fresnel reflections - Physics-based reflection strength varies with viewing angle
Sky reflection distortion - Realistic sky mirroring with surface wave distortion
Caustic light patterns - Underwater light focusing effects like real water
Depth color variation - Shallow cyan transitions to deep blue-green
Underwater light rays - Moving light beam patterns simulate sunlight penetration
Surface foam effects - White foam appears at wave peaks and surface disturbances
Water clarity control - Adjustable transparency from crystal clear to murky
Edge depth shading - Darker edges enhance three-dimensional water appearance
Multiple wave layers - Six octaves of fractal detail for natural complexity
TypeScript React component - Full IDE support with prop definitions
Next.js compatible - Works with App Router and modern React patterns
shadcn/ui integration - Consistent with Tailwind CSS design systems
Copy-paste installation - No vendor lock-in, you own the shader code
Photorealistic rendering - Mathematical accuracy creates convincing water simulation

API Reference

WaterShaders

Main container component for the realistic water surface effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Water movement and wave speed (0.1 to 3.0)
`depth`	`number`	`1.0`	Water depth variation (0.3 to 2.0)
`clarity`	`number`	`1.0`	Water transparency level (0.2 to 1.0)
`waves`	`number`	`1.0`	Wave intensity and detail (0.5 to 2.0)
`reflection`	`number`	`1.0`	Sky reflection strength (0.0 to 2.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

GPU water troubleshooting

Water too dark: Increase clarity to 1.0 for crystal clear water. Lower values create murky, deep water effects. Adjust reflection for brighter surface appearance.

Waves too calm/chaotic: Use waves to control surface activity. 0.7 creates gentle, calm water. 1.5+ creates active, choppy water with detailed surface texture.

No reflections visible: Increase reflection to 1.5+ for stronger sky mirroring. Fresnel physics make reflections stronger at shallow viewing angles.

Movement too slow/fast: Adjust speed for natural water flow. 0.5 creates peaceful, slow-moving water. 2.0+ creates rapid, dynamic water movement.

Water too shallow/deep: Use depth to control color variation. 0.5 creates shallow, cyan water. 1.5+ creates deep, dark blue ocean water.

Mobile performance issues: GPU water simulation is intensive. Lower waves to 0.8 and clarity to 0.8 on mobile devices for smoother performance.

GPU compatibility: Water effects require GPU for real-time surface calculation. Provide CSS blue gradient fallbacks for older devices without sufficient processing power.

React Water Shaders

React water with GPU surface physics

Installation

Usage

Why water animations struggle with realism

React water shader features

API Reference

WaterShaders

GPU water troubleshooting

More React shader components

Kaleidoscope Shaders

Ripple Shaders

Fire Shaders

Gradient Mesh Shaders

Hologram Shaders

Plasma Shaders

React water effect FAQ

On this page

React Water Shaders