Wavy

Organic wave animations with simplex noise and customizable gradients. Perfect for React hero sections requiring fluid visual effects with Next.js integration and TypeScript support.

Simplex Noise

Canvas API

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>  );};

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

Features

Simplex noise animation creating smooth, organic wave patterns with natural flow algorithms
Customizable color palettes supporting arrays of hex colors for gradient wave effects
Canvas-based rendering using efficient HTML5 Canvas with requestAnimationFrame optimization
Built-in blur effects with Safari compatibility and configurable intensity levels
Responsive adaptation automatically adjusting to container dimensions and window resize
Speed control options offering slow or fast animation modes for different visual impacts
Opacity configuration supporting subtle background effects or bold visual statements
Content overlay system enabling text and elements to be layered over wave animations
TypeScript support with complete interface definitions for reliable integration

Examples

Dark Theme Variant

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>  );};

Use Cases

This free open source React component works well for:

Hero sections - Flowing wave backgrounds for modern landing pages built with Next.js
Portfolio headers - Organic animations showcasing creative capabilities using TypeScript
Brand experiences - Fluid visual effects expressing innovation and creativity
Loading screens - Mesmerizing wave patterns during content loading using shadcn/ui design
Dashboard backgrounds - Subtle animated textures for admin interfaces
Creative showcases - Artistic wave effects for galleries and design portfolios using Tailwind CSS

API Reference

Props

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)

Implementation Notes

Component uses simplex-noise library for organic, natural wave movement patterns
Canvas rendering automatically handles resizing and adapts to container dimensions
Blur effects optimized for Safari compatibility with configurable intensity (0-20+ pixels)
Color arrays support unlimited hex values creating smooth gradient transitions across waves
Speed modes: "slow" for subtle movement, "fast" for dynamic visual effects
Wave opacity ranges from 0.2 (subtle background) to 0.8+ (bold visual statements)
Wave width configurable from 20px (delicate patterns) to 80px+ (bold strokes)
Content overlay system supports complex layouts with proper z-index management
Compatible with shadcn/ui design system and Tailwind CSS utility classes
Performance optimized using requestAnimationFrame for smooth 60fps animation across devices

Reactwavy-background

Reactwavy-background

On this page