@shader-gallery/runtime

The framework-free WebGL runtime and colour themes that power every tile on shader.gallery, the evolve/mashup tools, the poster pipeline, and external embeds. This is the single shared core; the React, Vue and Svelte components and the web component are all thin shells over it.

npm install @shader-gallery/runtime

Mount a background by slug

The simplest path fetches a shader from the CDN and drives a full-bleed canvas:

import { mountBackground } from '@shader-gallery/runtime';

const handle = mountBackground(document.querySelector('#bg'), {
  slug: 'nacre',
  palette: 'witchlight',
});

// later
handle.setPalette('ember');
handle.destroy();

Shaders are fetched by slug at runtime, so your bundle stays tiny and the catalog can update without a package release. Point base at http://localhost:…/ or a Cloudflare tunnel to develop against local data.

Drive a tile directly

When you already have the fragment source (bundled/offline, or the ?raw embed path), skip the fetch:

import { createShaderTile } from '@shader-gallery/runtime';

const tile = createShaderTile(canvas, fragSource, {
  palette: 'midnight',
  uniforms: { u_glow: 1.4 },
  post: { bloom: 1.2 },
});

tile.setPalette('glacier');   // retarget live, no context rebuild
tile.setUniforms({ u_glow: 0.8 });
tile.destroy();

Exports

| Export | What it is | |---|---| | createShaderTile(canvas, frag, opts) | Core renderer: two-pass FBO pipeline (shader → post-FX → canvas), live palette/uniform/post setters, offscreen RAF pause. | | mountBackground(target, opts) | Fetch-by-slug convenience over createShaderTile; manages the canvas + lifecycle. | | loadShader(slug, opts) | Fetch a shader's meta.json + shader.frag from the CDN. | | setDefaultBase(base) | Override the CDN origin shaders are fetched from. | | resolvePalette(palette, meta) | Resolve a theme name (or a shader's default) to its vec3[4]. | | THEMES, THEME_NAMES | The colour-theme map and its names. | | themeNamesFor, palettesFor, defaultThemeName | Per-shader theme resolvers. | | POST_DEFAULTS, POST_PRESETS, POST_FRAGMENT_SRC, resolvePost | The shared post-processing layer (chromatic aberration → tone → vignette → grain). | | createMashTile, BLEND_MODES, BLEND_IDS | Multi-layer blend tile used by the mashup tool. |

Submodules are also importable directly: @shader-gallery/runtime/renderer.js, /palettes.js, /mount.js, /web-component.js.

All exports are pure functions with no import-time side effects (the web component's registration side effect lives only in ./web-component.js), so the barrel stays tree-shakeable and SSR-safe.

MIT © E. T. Carter · shader.gallery · [email protected]