/wave-gradient

stripe.com landing page style animated gradients.

Primary LanguageJavaScriptMIT LicenseMIT

Wave Gradient

npm npm bundle size

stripe.com landing page style animated gradients.

Installation

npm i wave-gradient

Usage

import { WaveGradient } from "wave-gradient";

const canvasElement = document.querySelector("canvas");

try {
  // Throws if it can't get a WebGL 2.0 context. For example, if the
  // browser does not support it.
  const gradient = new WaveGradient(canvasElement, {
    colors: ["#ef008f", "#6ec3f4", "#7038ff", "#ffba27"],
    fps: 30,
    seed: 0,
    speed: 1.25,
  });
} catch (e) {
  console.error(e);
}

Options

Option Type Description
amplitude number Gradient waves amplitude
colors string[] Gradient color layers. Limited to 10
density [number, number] Level of detail of the plane geometry
fps number Frames per second for rendering
seed number Seed for the noise function
speed number Speed of the gradient waves
time number Initial time of the animation
wireframe boolean Wireframe render mode

amplitude

Default: 320

colors

Default: ["#ef008f", "#6ec3f4", "#7038ff", "#ffba27"]

density

Default: [0.06, 0.16]

fps

Default: 24

seed

Default: 0

speed

Default: 1.25

time

Default: 0

wireframe

Default: false

Browser Compatibility

WebGL 2.0 compatible browsers.

How it works

It's a 3D scene (not really) with a plane geometry that fills the entire viewport and a vertex and fragment shaders .

3D plane rotating gif

Credits

References