React Wavy Background

Organic gradient wave animations powered by simplex noise algorithms. Build mesmerizing React wavy backgrounds with flowing color gradients, customizable speed, blur effects, and TypeScript support for Next.js applications with shadcn/ui.

React

Simplex Noise

Canvas API

Creating organic, flowing gradient experiences?

Join our Discord community for help from other developers.

Most gradient backgrounds are static. Predictable. Lifeless rectangles that scream "I'm a CSS gradient." But nature flows with organic unpredictability—aurora dancing across skies, paint mixing in water, energy flowing through plasma. This React component recreates that fluid beauty using simplex noise algorithms that make gradient waves flow with mesmerizing, never-repeating patterns.

Organic gradient wave motion

Watch flowing color gradients powered by simplex noise algorithms:

Loading component...

'use client';import { cn } from "@/lib/utils";import React, { useEffect, useRef, useState } from "react";import { createNoise3D } from "simplex-noise";export interface WavyBackgroundProps {  children?: React.ReactNode;  className?: string;  containerClassName?: string;  colors?: string[];  waveWidth?: number;  backgroundFill?: string;  blur?: number;  speed?: "slow" | "fast";  waveOpacity?: number;  [key: string]: any;}export const WavyBackground = ({  children,  className,  containerClassName,  colors,  waveWidth,  backgroundFill = "white",  blur = 10,  speed = "fast",  waveOpacity = 0.5,  ...props}: WavyBackgroundProps) => {  const [isSafari, setIsSafari] = useState(false);  const [isClient, setIsClient] = useState(false);    const noise = createNoise3D();  let w: number,    h: number,    nt: number,    i: number,    x: number,    ctx: any,    canvas: any;  const canvasRef = useRef<HTMLCanvasElement>(null);  const getSpeed = () => {    switch (speed) {      case "slow":        return 0.001;      case "fast":        return 0.002;      default:        return 0.001;    }  };  const init = () => {    if (!isClient) return;    canvas = canvasRef.current;    if (!canvas) return;    ctx = canvas.getContext("2d");    if (!ctx) return;        w = ctx.canvas.width = canvas.offsetWidth;    h = ctx.canvas.height = canvas.offsetHeight;    ctx.filter = `blur(${blur}px)`;    nt = 0;    window.onresize = function () {      if (!canvas || !ctx) return;      w = ctx.canvas.width = canvas.offsetWidth;      h = ctx.canvas.height = canvas.offsetHeight;      ctx.filter = `blur(${blur}px)`;    };    render();  };  const waveColors = colors ?? [    "#38bdf8",    "#818cf8",    "#c084fc",    "#e879f9",    "#22d3ee",  ];  const drawWave = (n: number) => {    if (!ctx) return;    nt += getSpeed();    for (i = 0; i < n; i++) {      ctx.beginPath();      ctx.lineWidth = waveWidth || 50;      ctx.strokeStyle = waveColors[i % waveColors.length];      for (x = 0; x < w; x += 5) {        var y = noise(x / 800, 0.3 * i, nt) * 100;        ctx.lineTo(x, y + h * 0.5); // adjust for height, currently at 50% of the container      }      ctx.stroke();      ctx.closePath();    }  };  let animationId: number;  const render = () => {    if (!ctx) return;    ctx.fillStyle = backgroundFill || "black";    ctx.globalAlpha = waveOpacity || 0.5;    ctx.fillRect(0, 0, w, h);    drawWave(5);    animationId = requestAnimationFrame(render);  };  useEffect(() => {    if (isClient) {      init();    }    return () => {      if (animationId) {        cancelAnimationFrame(animationId);      }    };  }, [isClient, blur, backgroundFill, waveOpacity, speed, waveWidth, colors]);  useEffect(() => {    setIsClient(true);    // I'm sorry but i have got to support it on safari.    setIsSafari(      typeof window !== "undefined" &&        navigator.userAgent.includes("Safari") &&        !navigator.userAgent.includes("Chrome")    );  }, []);  return (    <div      className={cn(        "relative w-full h-full flex flex-col items-center justify-center",        containerClassName      )}    >      <canvas        className="absolute inset-0 z-0 w-full h-full"        ref={canvasRef}        id="canvas"        style={{          ...(isClient && isSafari ? { filter: `blur(${blur}px)` } : {}),        }}      />      <div className={cn("relative z-10", className)} {...props}>        {children}      </div>    </div>  );};

Built for React applications with TypeScript and Next.js. Uses HTML5 Canvas with simplex noise for smooth, organic gradient waves that pulse and flow like living color. Customizable color palettes create stunning visual themes. Safari-optimized blur effects add depth and atmosphere. Perfect for hero sections, creative portfolios, or any interface that needs organic visual energy.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/wavy-background.json

npx shadcn@latest add https://www.shadcn.io/registry/wavy-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/wavy-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/wavy-background.json

Usage

import { WavyBackground } from "@/components/ui/wavy-background";

export default function GradientHero() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      <WavyBackground
        backgroundFill="#0f0f23"
        colors={["#38bdf8", "#818cf8", "#c084fc", "#e879f9"]}
        waveWidth={50}
        blur={10}
        speed="fast"
        waveOpacity={0.5}
        containerClassName="h-full w-full"
        className="flex items-center justify-center"
      >
        {/* Your content flows above */}
        <div className="text-center text-white z-10">
          <h1 className="text-6xl font-bold mb-4">
            Flow Into Color
          </h1>
          <p className="text-xl opacity-80">
            Where gradients come alive
          </p>
        </div>
      </WavyBackground>
    </div>
  );
}

Why most gradient backgrounds look static

Most developers use CSS linear or radial gradients—beautiful but completely motionless. Others try animated CSS gradients, but they move in predictable patterns that feel obviously programmed. Some use video backgrounds, but they're massive files and never interactive.

This React component uses simplex noise—the algorithm behind natural terrain generation and fluid simulations. Each gradient wave follows smooth, organic curves that pulse and flow like real energy. Multiple color layers blend naturally with configurable opacity and blur. It's the difference between a flat poster and living, breathing color.

Features

Simplex noise algorithms creating organic, ever-changing gradient wave patterns
Multi-color gradient system supporting unlimited hex colors for stunning visual themes
Canvas-based rendering using efficient HTML5 Canvas with smooth 60fps animation
Safari-optimized blur effects with configurable intensity for depth and atmosphere
Dual speed modes offering slow meditative flow or fast energetic movement
Opacity control system from subtle ambient effects to bold visual statements
Content overlay support with proper z-index management for floating UI elements
Responsive container adaptation automatically adjusting to window and container changes
Performance optimized using requestAnimationFrame and efficient canvas operations
TypeScript definitions for all gradient, animation, and visual customization parameters
shadcn/ui compatible with seamless integration and theme support

Examples

Vibrant Dark Theme

Rich multicolor gradients on dark backgrounds for dramatic effect:

Loading component...

'use client';import { cn } from "@/lib/utils";import React, { useEffect, useRef, useState } from "react";import { createNoise3D } from "simplex-noise";export interface WavyBackgroundProps {  children?: React.ReactNode;  className?: string;  containerClassName?: string;  colors?: string[];  waveWidth?: number;  backgroundFill?: string;  blur?: number;  speed?: "slow" | "fast";  waveOpacity?: number;  [key: string]: any;}export const WavyBackground = ({  children,  className,  containerClassName,  colors,  waveWidth,  backgroundFill = "white",  blur = 10,  speed = "fast",  waveOpacity = 0.5,  ...props}: WavyBackgroundProps) => {  const [isSafari, setIsSafari] = useState(false);  const [isClient, setIsClient] = useState(false);    const noise = createNoise3D();  let w: number,    h: number,    nt: number,    i: number,    x: number,    ctx: any,    canvas: any;  const canvasRef = useRef<HTMLCanvasElement>(null);  const getSpeed = () => {    switch (speed) {      case "slow":        return 0.001;      case "fast":        return 0.002;      default:        return 0.001;    }  };  const init = () => {    if (!isClient) return;    canvas = canvasRef.current;    if (!canvas) return;    ctx = canvas.getContext("2d");    if (!ctx) return;        w = ctx.canvas.width = canvas.offsetWidth;    h = ctx.canvas.height = canvas.offsetHeight;    ctx.filter = `blur(${blur}px)`;    nt = 0;    window.onresize = function () {      if (!canvas || !ctx) return;      w = ctx.canvas.width = canvas.offsetWidth;      h = ctx.canvas.height = canvas.offsetHeight;      ctx.filter = `blur(${blur}px)`;    };    render();  };  const waveColors = colors ?? [    "#38bdf8",    "#818cf8",    "#c084fc",    "#e879f9",    "#22d3ee",  ];  const drawWave = (n: number) => {    if (!ctx) return;    nt += getSpeed();    for (i = 0; i < n; i++) {      ctx.beginPath();      ctx.lineWidth = waveWidth || 50;      ctx.strokeStyle = waveColors[i % waveColors.length];      for (x = 0; x < w; x += 5) {        var y = noise(x / 800, 0.3 * i, nt) * 100;        ctx.lineTo(x, y + h * 0.5); // adjust for height, currently at 50% of the container      }      ctx.stroke();      ctx.closePath();    }  };  let animationId: number;  const render = () => {    if (!ctx) return;    ctx.fillStyle = backgroundFill || "black";    ctx.globalAlpha = waveOpacity || 0.5;    ctx.fillRect(0, 0, w, h);    drawWave(5);    animationId = requestAnimationFrame(render);  };  useEffect(() => {    if (isClient) {      init();    }    return () => {      if (animationId) {        cancelAnimationFrame(animationId);      }    };  }, [isClient, blur, backgroundFill, waveOpacity, speed, waveWidth, colors]);  useEffect(() => {    setIsClient(true);    // I'm sorry but i have got to support it on safari.    setIsSafari(      typeof window !== "undefined" &&        navigator.userAgent.includes("Safari") &&        !navigator.userAgent.includes("Chrome")    );  }, []);  return (    <div      className={cn(        "relative w-full h-full flex flex-col items-center justify-center",        containerClassName      )}    >      <canvas        className="absolute inset-0 z-0 w-full h-full"        ref={canvasRef}        id="canvas"        style={{          ...(isClient && isSafari ? { filter: `blur(${blur}px)` } : {}),        }}      />      <div className={cn("relative z-10", className)} {...props}>        {children}      </div>    </div>  );};

API Reference

WavyBackground

Main component for simplex noise-powered organic gradient wave animations.

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content to display over the wavy background
`className`	`string`	-	CSS classes for the content wrapper
`containerClassName`	`string`	-	CSS classes for the main container
`colors`	`string[]`	`["#38bdf8", "#818cf8", "#c084fc", "#e879f9", "#22d3ee"]`	Array of color strings for the waves
`waveWidth`	`number`	`50`	Width/thickness of the wave lines
`backgroundFill`	`string`	`"white"`	Background color behind the waves
`blur`	`number`	`10`	Blur intensity applied to the waves
`speed`	`"slow" \| "fast"`	`"fast"`	Animation speed of the waves
`waveOpacity`	`number`	`0.5`	Opacity of the wave animation (0-1)

Simplex Noise Configuration

Gradient waves use multi-layer simplex noise for organic movement:

// Organic wave generation
const noiseX = simplex.noise3D(x * 0.01, y * 0.01, time * speed);
const noiseY = simplex.noise3D(x * 0.01 + 1000, y * 0.01, time * speed);

// Natural gradient blending
const gradient = ctx.createLinearGradient(0, 0, width, height);
colors.forEach((color, i) => {
  gradient.addColorStop(i / (colors.length - 1), color);
});

Color Palette Examples

// Ocean blues theme
<WavyBackground colors={["#0ea5e9", "#3b82f6", "#6366f1", "#8b5cf6"]} />

// Sunset warmth theme
<WavyBackground colors={["#f97316", "#ef4444", "#ec4899", "#d946ef"]} />

// Nature greens theme
<WavyBackground colors={["#22c55e", "#16a34a", "#15803d", "#166534"]} />

// Cosmic purple theme
<WavyBackground colors={["#8b5cf6", "#a855f7", "#c084fc", "#e879f9"]} />

// Monochrome elegance
<WavyBackground colors={["#64748b", "#475569", "#334155", "#1e293b"]} />

Speed and Visual Impact

// Subtle ambient flow
<WavyBackground speed="slow" waveOpacity={0.3} blur={15} />

// Balanced visual energy (default)
<WavyBackground speed="fast" waveOpacity={0.5} blur={10} />

// Bold dramatic effect
<WavyBackground speed="fast" waveOpacity={0.7} blur={5} />

// Intense cosmic energy
<WavyBackground speed="fast" waveOpacity={0.8} blur={3} />

Common gotchas

Simplex noise dependency: This component requires the simplex-noise package (~15kb). Consider the bundle size impact if you don't use noise algorithms elsewhere.

Safari blur compatibility: Safari handles canvas blur differently than other browsers. Test blur effects across browsers and adjust intensity for consistent appearance.

Color array requirements: The component needs at least 2 colors to create gradients. Single colors will create solid fills without wave effects.

Canvas performance scaling: Very high blur values (20+) combined with large wave widths (80+) can impact performance on older devices.

Background fill importance: Set backgroundFill to match your design theme. The default white background might clash with dark themes.

Content contrast considerations: With high waveOpacity (>0.6), ensure sufficient contrast between wave colors and overlaid content for readability.

Explore other organic and flowing background components for React applications:

Organic gradient wave motion

Installation

Usage

Why most gradient backgrounds look static

Features

Examples

Vibrant Dark Theme

API Reference

WavyBackground

Simplex Noise Configuration

Color Palette Examples

Speed and Visual Impact

Common gotchas

You might also like

Waves Background

Gradient Animation

Aurora

Vortex

Noise

Ripple

Questions developers actually ask

On this page

React Wavy Background