React Sea Shaders

React 3D sea with GPU ocean simulation. Realistic ocean waves for Next.js with TypeScript and shadcn/ui—free code.

React

react-shaders

GPU Shaders

Building ocean effects?

Join our Discord community for help from other developers working with GPU ocean simulation and 3D sea effects.

Need realistic 3D ocean views without complex 3D engines? Most developers use flat water textures or heavy geometry that tanks performance. This React sea component uses GPU ray marching to create immersive 3D ocean scenes with rolling waves, atmospheric perspective, and dynamic camera movement.

Copy-paste TypeScript component that creates breathtaking ocean vistas with mathematical wave simulation and realistic lighting. Ray marching creates infinite ocean depth with proper horizon perspective. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—cinematic ocean rendering.

React 3D sea with GPU ray marching

Infinite ocean with rolling waves, atmospheric perspective, and dynamic lighting:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SeaShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  waveHeight?: number;  waveFrequency?: number;  perspective?: number;  atmosphere?: number;}const fragmentShader = `const int NUM_STEPS = 24;const float PI = 3.141592;const float EPSILON = 1e-3;// Hash function for noisefloat hash(vec2 p) {    return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);}// Smooth noisefloat 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 ocean wavesfloat 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;}// Ocean height functionfloat seaHeight(vec2 p, float time) {    float height = 0.0;    float amplitude = u_waveHeight * 0.6;    float frequency = u_waveFrequency * 0.8;    // Main ocean waves    height += sin(p.x * frequency + time * u_speed * 2.0) * amplitude;    height += sin(p.y * frequency * 0.7 + time * u_speed * 1.5) * amplitude * 0.8;    // Secondary waves    height += sin(p.x * frequency * 2.3 + time * u_speed * 3.2) * amplitude * 0.4;    height += sin(p.y * frequency * 1.8 - time * u_speed * 2.8) * amplitude * 0.3;    // Fractal detail waves    height += fbm(p * frequency * 2.0 + time * u_speed) * amplitude * 0.3;    // Larger swells    height += sin(p.x * frequency * 0.3 + time * u_speed * 0.8) * amplitude * 1.2;    height += sin(p.y * frequency * 0.4 + time * u_speed * 0.6) * amplitude * 1.0;    return height;}// Calculate surface normalvec3 seaNormal(vec2 p, float time, float epsilon) {    float h = seaHeight(p, time);    float hx = seaHeight(p + vec2(epsilon, 0.0), time);    float hy = seaHeight(p + vec2(0.0, epsilon), time);    return normalize(vec3(h - hx, h - hy, epsilon));}// Sky color gradientvec3 skyColor(vec3 direction) {    float horizon = max(0.0, direction.y);    // Sky gradient from horizon to zenith    vec3 skyBlue = vec3(0.3, 0.6, 1.0);    vec3 horizonColor = vec3(0.8, 0.9, 1.0);    vec3 zenithColor = vec3(0.1, 0.3, 0.8);    vec3 sky = mix(horizonColor, zenithColor, pow(horizon, 0.5));    // Add some clouds    float clouds = fbm(direction.xz * 3.0) * 0.5;    clouds = smoothstep(0.4, 0.8, clouds);    sky = mix(sky, vec3(1.0, 1.0, 1.0), clouds * 0.3);    // Sun glow    vec3 sunDir = normalize(vec3(0.3, 0.8, 0.5));    float sun = pow(max(0.0, dot(direction, sunDir)), 32.0);    sky += vec3(1.0, 0.8, 0.4) * sun * 0.5;    return sky;}// Sea color with lightingvec3 seaColor(vec3 position, vec3 normal, vec3 lightDir, vec3 viewDir, vec3 skyColor) {    // Beautiful sea colors - tropical to deep ocean    vec3 deepSea = vec3(0.0, 0.2, 0.4);        // Deep blue    vec3 midSea = vec3(0.0, 0.4, 0.7);         // Ocean blue    vec3 shallowSea = vec3(0.2, 0.6, 0.8);     // Lighter blue    vec3 tropicalSea = vec3(0.3, 0.8, 0.9);    // Tropical cyan    // Fresnel effect    float fresnel = pow(1.0 - max(0.0, dot(normal, viewDir)), 2.5);    // Diffuse lighting    float diffuse = max(0.0, dot(normal, lightDir));    // Specular reflection - sun sparkles    vec3 reflected = reflect(-lightDir, normal);    float specular = pow(max(0.0, dot(reflected, viewDir)), 128.0);    // Depth-based color variation    float depth = clamp(position.y / (u_waveHeight + 0.5), 0.0, 1.0);    vec3 seaBase = mix(deepSea, shallowSea, depth);    seaBase = mix(seaBase, tropicalSea, diffuse * 0.3);    // Add subsurface scattering effect    float subsurface = pow(max(0.0, dot(-lightDir, normal)), 2.0);    seaBase += vec3(0.2, 0.4, 0.6) * subsurface * 0.4;    // Bright sun sparkles    seaBase += vec3(1.0, 0.95, 0.8) * specular * 1.2;    // Foam on wave crests - more prominent    float foam = smoothstep(0.2, 0.8, position.y / (u_waveHeight + 0.1));    seaBase = mix(seaBase, vec3(0.95, 0.98, 1.0), foam * 0.5);    // Enhanced reflection with better color mixing    vec3 finalColor = mix(seaBase, skyColor * vec3(0.8, 0.9, 1.0), fresnel * 0.6);    return finalColor;}// Ray marching to find sea surface intersectionfloat rayMarchSea(vec3 origin, vec3 direction, float time) {    float t = 0.0;    for(int i = 0; i < NUM_STEPS; i++) {        vec3 pos = origin + direction * t;        float height = seaHeight(pos.xz, time);        if(pos.y < height) {            // Refine intersection            float t1 = t - 1.0;            float t2 = t;            for(int j = 0; j < 8; j++) {                float tmid = (t1 + t2) * 0.5;                vec3 pmid = origin + direction * tmid;                if(pmid.y < seaHeight(pmid.xz, time)) {                    t2 = tmid;                } else {                    t1 = tmid;                }            }            return t2;        }        t += 1.0;        if(t > 100.0) break;    }    return -1.0;}void mainImage( out vec4 fragColor, in vec2 fragCoord ) {    vec2 uv = fragCoord / iResolution.xy;    uv = uv * 2.0 - 1.0;    uv.x *= iResolution.x / iResolution.y;    float time = iTime * u_speed;    // Camera setup    vec3 cameraPos = vec3(0.0, 2.0 + u_perspective, time * 3.0);    vec3 cameraTarget = vec3(0.0, 0.0, time * 3.0 + 10.0);    vec3 cameraUp = vec3(0.0, 1.0, 0.0);    // Camera rotation with time    float angle = time * 0.1;    cameraPos.x += sin(angle) * 2.0;    cameraPos.z += cos(angle) * 2.0;    // Create camera matrix    vec3 forward = normalize(cameraTarget - cameraPos);    vec3 right = normalize(cross(forward, cameraUp));    vec3 up = cross(right, forward);    // Ray direction    vec3 rayDir = normalize(uv.x * right + uv.y * up + forward * 2.0);    // Light direction (sun)    vec3 lightDir = normalize(vec3(0.3, 0.8, 0.5));    // Ray march to find sea intersection    float t = rayMarchSea(cameraPos, rayDir, time);    vec3 color;    if(t > 0.0) {        // Hit sea surface        vec3 hitPos = cameraPos + rayDir * t;        vec3 normal = seaNormal(hitPos.xz, time, 0.1);        vec3 sky = skyColor(reflect(rayDir, normal));        color = seaColor(hitPos, normal, lightDir, -rayDir, sky);        // Atmospheric perspective        float distance = length(hitPos - cameraPos);        float fog = 1.0 - exp(-distance * 0.01 * u_atmosphere);        color = mix(color, skyColor(rayDir), fog);    } else {        // Hit sky        color = skyColor(rayDir);    }    // Post-processing    color = pow(color, vec3(0.7)); // Gamma correction    color *= 1.2; // Brightness boost    fragColor = vec4(color, 1.0);}`;export const SeaShaders = forwardRef<HTMLDivElement, SeaShadersProps>(({  className,  speed = 1.0,  waveHeight = 1.0,  waveFrequency = 1.0,  perspective = 1.0,  atmosphere = 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_waveHeight: { type: '1f', value: waveHeight },          u_waveFrequency: { type: '1f', value: waveFrequency },          u_perspective: { type: '1f', value: perspective },          u_atmosphere: { type: '1f', value: atmosphere },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});SeaShaders.displayName = "SeaShaders";

Original shader by Dov Azencot

Perfect for React 19, Next.js 15, and modern TypeScript projects. 3D ocean rendered entirely on GPU using GLSL ray marching with wave mathematics. Customizable speed, wave height, frequency, perspective, and atmospheric effects. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { SeaShaders } from "@/components/ui/sea-shaders";

export default function OceanView() {
  return (
    <SeaShaders
      speed={0.8}
      waveHeight={1.2}
      waveFrequency={1.0}
      perspective={1.0}
      atmosphere={0.9}
    >
      <div className="relative z-10">
        <h1>Content over ocean</h1>
      </div>
    </SeaShaders>
  );
}

Why 3D ocean animations struggle with performance

Three.js ocean meshes are complex and heavy. Water plane geometry requires massive vertex counts. Most libraries use flat surfaces that lack proper wave mathematics and atmospheric depth perspective.

GPU ray marching solves this with mathematical ocean simulation. No mesh geometry needed—pure math defines infinite ocean surfaces. Ray marching finds wave intersections in real-time. Atmospheric perspective creates realistic horizon depth without polygons.

This React sea component uses GLSL mathematics for authentic ocean behavior. Multiple wave frequencies create realistic sea states. Dynamic camera movement with orbital motion. Fresnel reflections and atmospheric fog create cinematic ocean scenes.

React sea shader features

GPU ray marching - Mathematical 3D ocean without mesh geometry or vertices
Infinite ocean depth - Endless horizon with proper perspective and atmospheric haze
Realistic wave mathematics - Multiple frequency layers create natural ocean patterns
Dynamic camera movement - Orbital camera motion with smooth perspective changes
Atmospheric perspective - Distance fog and haze create realistic depth perception
Fresnel reflections - Physics-based sky reflection varying with viewing angle
Wave foam effects - White foam appears on wave crests for surface detail
Sky gradient system - Realistic sky colors with cloud patterns and sun glow
Specular highlights - Sun reflections on water surface with proper lighting
Fractal wave detail - Six octaves of detail create 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
Cinematic rendering - Film-quality ocean scenes with mathematical precision

API Reference

SeaShaders

Main container component for the 3D ocean simulation effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Ocean wave and camera movement speed (0.1 to 3.0)
`waveHeight`	`number`	`1.0`	Wave amplitude and height (0.3 to 3.0)
`waveFrequency`	`number`	`1.0`	Wave density and frequency (0.5 to 2.0)
`perspective`	`number`	`1.0`	Camera height and viewing angle (0.2 to 3.0)
`atmosphere`	`number`	`1.0`	Atmospheric haze and fog intensity (0.2 to 2.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

GPU sea troubleshooting

Ocean too flat: Increase waveHeight to 2.0+ for more dramatic waves. Ray marching creates realistic scaling that may appear subtle compared to flat graphics.

Waves too slow/fast: Adjust speed for natural ocean rhythm. 0.5 creates calm, peaceful seas. 1.5+ creates dynamic, active ocean movement.

Camera too low/high: Use perspective to control viewing angle. 0.5 creates low, dramatic viewpoint. 2.0+ creates elevated, panoramic ocean views.

Too much haze: Lower atmosphere to 0.5 for clearer distant views. Higher values create misty, atmospheric ocean scenes with limited visibility.

Waves too dense/sparse: Adjust waveFrequency for different sea states. 0.7 creates long, rolling swells. 1.5+ creates choppy, detailed wave patterns.

Mobile performance issues: GPU ray marching is intensive. Lower ray steps and reduce waveHeight to 0.8 on mobile devices for smoother performance.

GPU compatibility: 3D ocean requires GPU for real-time ray marching calculation. Provide CSS ocean gradient fallbacks for older devices.

React Sea Shaders

React 3D sea with GPU ray marching

Installation

Usage

Why 3D ocean animations struggle with performance

React sea shader features

API Reference

SeaShaders

GPU sea troubleshooting

More React shader components

Water Shaders

Fire Shaders

Gradient Mesh Shaders

Hologram Shaders

Plasma Shaders

Kaleidoscope Shaders

React 3D sea FAQ

On this page

React Sea Shaders