grainient

Grainy animated flowing-blob gradients for the web, powered by a WebGL2 fragment shader.

Framework-agnostic core + a thin React wrapper.

Install

npm install @antoineview/grainient

Vanilla usage

import { Grainient } from '@antoineview/grainient';

const canvas = document.querySelector('canvas')!;
const g = new Grainient(canvas, {
  colors: ['#ff008a', '#7928ca', '#2af598', '#009efd'],
  speed: 1,
  grain: 0.15,
  scale: 1,
  seed: 0,
});

g.update({ colors: ['#000', '#fff'] });
g.pause();
g.start();
g.destroy();

React usage

import { Grainient } from '@antoineview/grainient/react';

export function Hero() {
  return (
    <Grainient
      colors={['#ff008a', '#7928ca', '#2af598']}
      speed={1}
      grain={0.2}
      style={{ width: '100%', height: 480 }}
    />
  );
}

react and react-dom are peer dependencies.

Options

Option	Type	Default	Description
colors	string[]	['#ff008a', '#7928ca', '#2af598', '#009efd']	2–8 hex colors (#rgb or #rrggbb)
speed	number	1	Animation speed multiplier
grain	number	0.15	Grain intensity, 0–1
scale	number	1	Blob size — larger = softer, broader regions; smaller = tighter color pockets
mesh	number	1	Meshyness — 0 rigid grid, 1 organic mesh, 2+ wild swirls
smoothness	number	1	Shape smoothness — higher = broader, glassier regions; lower = tighter, finer detail
seed	number	0	Offset for deterministic drift
autoStart (vanilla) / paused (React)	boolean	true / false	Whether to animate on mount

How it works

A single fullscreen triangle is drawn via gl_VertexID (no vertex buffers). The fragment shader computes weighted soft radial falloffs from up to 8 blob centers — each drifting with 2-octave value noise — mixes the colors accordingly, and overlays procedural grain as a per-pixel luma jitter.

The render loop auto-pauses when the tab is hidden or the canvas scrolls offscreen.

Browser support

Requires WebGL2 (Chrome 56+, Firefox 51+, Safari 15+, Edge 79+).

Licence

MIT.