React Ripple Shaders

Powered by

React

react-shaders

WebGL

Need realistic water ripple effects without physics engines? Most developers use heavy particle systems or complex wave calculations that destroy performance. This React ripple component uses WebGL fragment shaders for mathematical wave interference patterns.

Copy-paste TypeScript component that creates expanding circular ripples with realistic wave physics. Multiple ripple sources create interference patterns like real water. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—zero CPU animation loops.

React ripple effects with WebGL shaders

Mathematical wave interference with expanding circular ripples and realistic physics:

import RippleShaders from "@/components/ui/shadcn-io/ripple-shaders"export default function RippleDemo() {  return (    <div className="relative w-full h-full bg-black rounded-lg overflow-hidden">      <RippleShaders        speed={1.2}        intensity={1.5}        colorScheme={[0.1, 0.5, 1.0]}        rippleCount={4}        frequency={1.0}      />    </div>  )}

'use client';import React, { forwardRef } from 'react';import { Shader } from 'react-shaders';import { cn } from '@/lib/utils';export interface RippleShadersProps extends React.HTMLAttributes<HTMLDivElement> {  /**   * Animation speed multiplier   * @default 1.0   */  speed?: number;  /**   * Ripple intensity and brightness   * @default 1.0   */  intensity?: number;  /**   * Color scheme for the ripples   * @default [0.2, 0.6, 1.0]   */  colorScheme?: [number, number, number];  /**   * Number of ripple sources   * @default 3   */  rippleCount?: number;  /**   * Wave frequency multiplier   * @default 1.0   */  frequency?: number;}const rippleShader = `void mainImage( out vec4 fragColor, in vec2 fragCoord ){    // Normalize coordinates to center origin    vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.y;    // Time with speed control    float time = iTime * u_speed;    // Initialize ripple effect    float ripple = 0.0;    // Create multiple ripple sources based on rippleCount    for(int i = 0; i < 5; i++) {        if(float(i) >= u_rippleCount) break;        // Calculate ripple source position using circular motion        float angle = float(i) * 6.28318 / u_rippleCount + time * 0.3;        vec2 source = vec2(cos(angle), sin(angle)) * 0.4;        // Distance from current pixel to ripple source        float dist = length(uv - source);        // Create expanding ripple wave        float wave = sin(dist * 15.0 * u_frequency - time * 4.0);        // Apply distance-based attenuation        float attenuation = 1.0 / (1.0 + dist * 3.0);        // Add to total ripple effect        ripple += wave * attenuation;    }    // Add central stationary ripple    float centerDist = length(uv);    float centerRipple = sin(centerDist * 20.0 * u_frequency - time * 5.0);    float centerAttenuation = 1.0 / (1.0 + centerDist * 2.0);    ripple += centerRipple * centerAttenuation * 0.5;    // Apply intensity scaling    ripple *= u_intensity;    // Create interference patterns    float interference = ripple * ripple;    // Color calculation based on ripple intensity    vec3 baseColor = u_colorScheme * 0.1;    vec3 rippleColor = u_colorScheme * abs(ripple) * 0.8;    vec3 interferenceColor = u_colorScheme * interference * 0.3;    // Combine colors    vec3 finalColor = baseColor + rippleColor + interferenceColor;    // Add subtle glow effect    float glow = exp(-centerDist * 1.5) * 0.2;    finalColor += u_colorScheme * glow;    // Apply gamma correction for better visual appearance    finalColor = pow(finalColor, vec3(0.8));    fragColor = vec4(finalColor, 1.0);}`;export const RippleShaders = forwardRef<HTMLDivElement, RippleShadersProps>(({  className,  speed = 1.0,  intensity = 1.0,  colorScheme = [0.2, 0.6, 1.0],  rippleCount = 3,  frequency = 1.0,  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={rippleShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_intensity: { type: '1f', value: intensity },          u_colorScheme: { type: '3fv', value: colorScheme },          u_rippleCount: { type: '1f', value: rippleCount },          u_frequency: { type: '1f', value: frequency },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});RippleShaders.displayName = 'RippleShaders';export default RippleShaders;

Original shader by Dov Azencot

Perfect for React 19, Next.js 15, and modern TypeScript projects. Mathematical wave interference rendered entirely on GPU using GLSL fragment shaders. Customizable speed, intensity, colors, and ripple sources. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { RippleShaders } from "@/components/ui/ripple-shaders";

export default function WaterBackground() {
  return (
    <RippleShaders
      speed={1.2}
      intensity={1.5}
      colorScheme={[0.1, 0.5, 1.0]}
      rippleCount={4}
      frequency={1.0}
    >
      <div className="relative z-10">
        <h1>Content over ripples</h1>
      </div>
    </RippleShaders>
  );
}

Why water animations struggle with realism

CSS animations can't simulate wave physics. JavaScript calculations for multiple ripples kill performance. Most libraries fake water effects with simple scaling transforms that look artificial.

WebGL fragment shaders solve this with real mathematical wave interference. Each pixel calculates distance from multiple ripple sources. Sine wave functions create expanding circles. Wave superposition creates realistic interference patterns where ripples intersect.

This React ripple component uses GLSL mathematics for authentic wave behavior. Multiple expanding circles with distance-based attenuation. Wave interference creates the complex patterns you see in real water.

React ripple shader features

• WebGL wave physics - Mathematical sine wave interference patterns on GPU
• Multiple ripple sources - Configurable number of expanding circular waves
• Wave interference - Realistic patterns where ripples intersect and combine
• Distance attenuation - Waves fade naturally with distance from source
• Circular motion - Ripple sources move in orbital patterns for dynamic effects
• Color scheme control - RGB customization for different water themes
• Frequency adjustment - Wave density and tightness controls
• 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
• Mobile optimized - Efficient GPU usage for smooth mobile performance

API Reference

RippleShaders

Main container component for the dynamic ripple shader effect.

WebGL ripple troubleshooting

Ripples too faint: Increase intensity to 2.0+ for more visible waves. Fragment shaders use different brightness scales than CSS animations.

Animation too chaotic: Multiple ripple sources can overwhelm. Reduce rippleCount to 2-3 for calmer effects, or lower frequency to 0.7 for gentler waves.

Mobile performance issues: GPU-intensive shaders need optimization. Lower intensity to 1.0 and rippleCount to 3 on mobile devices. Consider device detection for automatic adjustments.

Wrong water colors: colorScheme uses 0-1 range for realistic water colors. Try [0.0, 0.3, 0.8] for deep blue water, [0.1, 0.6, 0.4] for tropical aqua.

Ripples too tight/loose: Adjust frequency to control wave density. Lower values (0.5) create loose, slow waves. Higher values (1.5) create tight, rapid ripples.

WebGL compatibility: Wave interference requires decent GPU. Provide CSS radial gradient fallbacks for older devices with limited WebGL support.

More React shader components

Explore other GPU-accelerated components for Next.js applications:

React ripple shader FAQ