@shader-core/js

Shader Core without a framework.

import { createShader } from '@shader-core/js';
import gradient from '@shader-core/layers/gradient';
import curtains from '@shader-core/layers/curtains';
import grain from '@shader-core/layers/grain';

const background = createShader(document.querySelector('canvas'), [
  { layer: gradient, colorA: '#04060f', colorB: '#0a1230' },
  { layer: curtains, scale: 3.8, sheetColor: '#3ddc97' },
  { layer: grain, intensity: 0.25 },
]);

Layers stack bottom to top and blend into one canvas, in one pass. Each one's params and colours are written flat beside it, and anything you leave out keeps that layer's default — including the blend it was designed for.

background.update(nextStack); // recompiles only if the shape changed
background.pause();
background.destroy(); // releases the GL context, not just its objects

Import only the layers you use: each is its own module, about 0.4 KB gzipped after the first.

createShader throws if the canvas has no WebGL2 or a layer will not compile — pass onError to handle failures after that point, or they go to the console.

Licence

Free to use, including commercially. See LICENSE.md.