React Cosmic Waves Shaders

React cosmic waves effect with GPU ocean patterns and stars. Flowing cosmic backgrounds for Next.js with TypeScript and shadcn/ui—free code.

React

react-shaders

GPU Shaders

Building cosmic ocean effects?

Join our Discord community for help from other developers working with GPU shaders and cosmic wave patterns.

Need flowing cosmic ocean effects without complex animations? Most developers use static gradients or heavy video files that look flat. This React cosmic waves component uses GPU fragment shaders to create flowing wave patterns with starfield overlays and dynamic color cycling.

Copy-paste TypeScript component that creates cosmic ocean waves with multi-layered flow patterns and twinkling stars. Fractal noise adds organic texture while smooth color transitions cycle through cosmic spectrum. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—infinite cosmic variety.

React cosmic waves with GPU shaders

Flowing cosmic ocean patterns with multi-layered waves and dynamic starfields:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";interface CosmicWavesShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  amplitude?: number;  frequency?: number;  starDensity?: number;  colorShift?: number;}const cosmicWavesFragment = `// Hash function for pseudo-random valuesfloat 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 noisefloat fbm(vec2 p) {  float value = 0.0;  float amplitude = 0.5;  for(int i = 0; i < 4; i++) {    value += amplitude * noise(p);    p *= 2.0;    amplitude *= 0.5;  }  return value;}// Star field generationfloat stars(vec2 p, float density) {  vec2 grid = floor(p * density);  vec2 local = fract(p * density);  float h = hash(grid);  if(h > 0.95) {    float d = length(local - 0.5);    float star = exp(-d * 20.0);    return star * (0.5 + 0.5 * sin(iTime * 2.0 + h * 10.0));  }  return 0.0;}void mainImage( out vec4 fragColor, in vec2 fragCoord ) {  vec2 uv = fragCoord.xy / iResolution.xy;  vec2 p = uv * 2.0 - 1.0;  p.x *= iResolution.x / iResolution.y;  float time = iTime * u_speed;  // Create flowing wave patterns  vec2 wavePos = p * u_frequency;  wavePos.y += time * 0.3;  // Multiple wave layers  float wave1 = sin(wavePos.x + cos(wavePos.y + time) * 0.5) * u_amplitude;  float wave2 = sin(wavePos.x * 1.3 - wavePos.y * 0.7 + time * 1.2) * u_amplitude * 0.7;  float wave3 = sin(wavePos.x * 0.8 + wavePos.y * 1.1 - time * 0.8) * u_amplitude * 0.5;  // Combine waves  float waves = (wave1 + wave2 + wave3) * 0.3;  // Add fractal noise for organic texture  vec2 noisePos = p * 1.5 + vec2(time * 0.1, time * 0.05);  float noiseValue = fbm(noisePos) * 0.4;  // Combine waves and noise  float pattern = waves + noiseValue;  // Create flowing cosmic gradient  float gradient = length(p) * 0.8;  gradient += pattern;  // Color cycling through cosmic spectrum  vec3 color1 = vec3(0.1, 0.2, 0.8); // Deep blue  vec3 color2 = vec3(0.6, 0.1, 0.9); // Purple  vec3 color3 = vec3(0.1, 0.8, 0.9); // Cyan  vec3 color4 = vec3(0.9, 0.3, 0.6); // Pink  // Color interpolation based on pattern and time  float colorTime = time * u_colorShift + pattern * 2.0;  vec3 finalColor;  float t = fract(colorTime * 0.2);  if(t < 0.25) {    finalColor = mix(color1, color2, t * 4.0);  } else if(t < 0.5) {    finalColor = mix(color2, color3, (t - 0.25) * 4.0);  } else if(t < 0.75) {    finalColor = mix(color3, color4, (t - 0.5) * 4.0);  } else {    finalColor = mix(color4, color1, (t - 0.75) * 4.0);  }  // Apply wave intensity  finalColor *= (0.5 + pattern * 0.8);  // Add star field  float starField = stars(p + vec2(time * 0.02, time * 0.01), u_starDensity * 15.0);  starField += stars(p * 1.5 + vec2(-time * 0.015, time * 0.008), u_starDensity * 12.0);  finalColor += vec3(starField * 0.8);  // Add subtle glow effect  float glow = exp(-length(p) * 0.5) * 0.3;  finalColor += glow * vec3(0.2, 0.4, 0.8);  // Vignette effect  float vignette = 1.0 - length(uv - 0.5) * 1.2;  vignette = smoothstep(0.0, 1.0, vignette);  finalColor *= vignette;  fragColor = vec4(finalColor, 1.0);}`;export const CosmicWavesShaders = forwardRef<HTMLDivElement, CosmicWavesShadersProps>(  ({    speed = 1.0,    amplitude = 1.0,    frequency = 1.0,    starDensity = 1.0,    colorShift = 1.0,    className,    children,    ...props  }, ref) => {    return (      <div        ref={ref}        className={cn('w-full h-full', className)}        {...props}      >        <Shader          fs={cosmicWavesFragment}          uniforms={{            u_speed: { type: '1f', value: speed },            u_amplitude: { type: '1f', value: amplitude },            u_frequency: { type: '1f', value: frequency },            u_starDensity: { type: '1f', value: starDensity },            u_colorShift: { type: '1f', value: colorShift },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });CosmicWavesShaders.displayName = "CosmicWavesShaders";

Original shader by Dov Azencot

Perfect for React 19, Next.js 15, and modern TypeScript projects. Cosmic wave patterns rendered entirely on GPU using GLSL fragment shaders with fractal noise and multi-layer wave synthesis. Customizable flow speed, wave amplitude, star density, and color cycling. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { CosmicWavesShaders } from "@/components/ui/cosmic-waves-shaders";

export default function CosmicBackground() {
  return (
    <CosmicWavesShaders
      speed={1.0}
      amplitude={1.2}
      frequency={0.8}
      starDensity={1.0}
      colorShift={1.0}
    >
      <div className="relative z-10">
        <h1>Content over cosmic waves</h1>
      </div>
    </CosmicWavesShaders>
  );
}

Why cosmic animations struggle with fluidity

CSS animations can't simulate flowing wave physics. Video backgrounds are massive files with limited variation. Most libraries use simple transforms that look artificial compared to real cosmic ocean movement.

GPU fragment shaders solve this with mathematical wave synthesis. Multiple sine wave layers create natural flow patterns. Fractal noise adds organic texture variation. Procedural star generation with twinkling effects creates infinite cosmic variety.

This React cosmic waves component uses GLSL mathematics for authentic ocean flow. Three layered wave functions with different frequencies create complex interference patterns. Dynamic color cycling through cosmic spectrum with smooth transitions.

React cosmic waves shader features

Multi-layer wave synthesis - Three wave functions create complex interference patterns
Fractal noise texture - Organic variation using mathematical noise functions
Dynamic color cycling - Smooth transitions through cosmic spectrum colors
Procedural starfields - Multiple star layers with twinkling animation effects
Flow pattern control - Adjustable wave amplitude and frequency parameters
Cosmic gradient effects - Radial gradients with wave-based intensity variation
Organic texture blending - Noise and waves combine for natural appearance
Glow and vignette effects - Atmospheric depth with center glow and edge fading
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
Infinite variation - Mathematical generation creates endless cosmic patterns

API Reference

CosmicWavesShaders

Main container component for the cosmic waves shader effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Wave flow animation speed (0.1 to 3.0)
`amplitude`	`number`	`1.0`	Wave height and intensity (0.5 to 2.0)
`frequency`	`number`	`1.0`	Wave density and pattern scale (0.5 to 2.0)
`starDensity`	`number`	`1.0`	Star quantity and brightness (0.0 to 2.0)
`colorShift`	`number`	`1.0`	Color cycling speed (0.1 to 3.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

GPU cosmic waves troubleshooting

Waves too subtle: Increase amplitude to 1.5+ for more dramatic wave effects. Fragment shaders use different intensity scales than CSS animations.

Animation too chaotic: Multiple wave layers can overwhelm. Reduce frequency to 0.6 for gentler patterns, or lower speed to 0.7 for slower cosmic flow.

Colors too muted: Boost colorShift to 1.5+ for faster spectrum cycling. Lower values create slow, meditative color changes through cosmic palette.

Stars not visible: Increase starDensity to 1.5 for brighter starfields. Lower values create subtle background stars, higher values create prominent cosmic star patterns.

Mobile performance issues: GPU-intensive wave calculations need optimization. Lower frequency to 0.8 and starDensity to 0.8 on mobile devices for smoother performance.

Patterns too dense/sparse: Use frequency to adjust wave detail. 0.5 creates large, flowing waves. 1.5+ creates tight, detailed cosmic patterns.

GPU compatibility: Wave synthesis requires decent GPU for real-time calculation. Provide CSS gradient fallbacks for older devices with limited GPU support.

React Cosmic Waves Shaders

React cosmic waves with GPU shaders

Installation

Usage

Why cosmic animations struggle with fluidity

React cosmic waves shader features

API Reference

CosmicWavesShaders

GPU cosmic waves troubleshooting

More React shader components

Kaleidoscope Shaders

Ripple Shaders

Plasma Shaders

Nebula Shaders

Matrix Shaders

Aurora Shaders

Digital Tunnel Shaders

Glitch Shaders

React cosmic waves FAQ

On this page

React Cosmic Waves Shaders