Iris Lab
All libraries
Backgrounds

React Wavify

Animated SVG waves — perfect section dividers and headers.

Docs
Live demowavify

Stacked waves
Three SVG layers, different speeds, oceanic vibe.

React Wavify is a tiny SVG component for animated waves. Stack a couple of them with different speeds and opacities for a classic oceanic hero background. No canvas required.
Install
npm i react-wavify
Snippet
import Wave from "react-wavify";

<Wave
  fill="url(#gradient)"
  paused={false}
  options={{ height: 40, amplitude: 30, speed: 0.2, points: 4 }}
>
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stopColor="#22d3ee" />
      <stop offset="1" stopColor="#8b5cf6" />
    </linearGradient>
  </defs>
</Wave>