@shader-gallery/svelte

Svelte components for shader.gallery animated WebGL backgrounds. Two ways in: fetch a shader by slug from the CDN, or bundle one .frag with your app. Works with Svelte 4 and 5.

npm install @shader-gallery/svelte @shader-gallery/runtime

<ShaderGalleryBg> — fetch by slug

The default. Renders a <canvas> and drives the shader through @shader-gallery/runtime (a real Svelte component, not a wrapper around the web component). The package ships the .svelte source (the svelte export condition); your bundler compiles it. The GLSL streams from the CDN by slug at runtime, so your bundle stays tiny and the catalog can update without a package release.

<script>
  import ShaderGalleryBg from '@shader-gallery/svelte';
</script>

<section style="position: relative; min-height: 100vh">
  <ShaderGalleryBg slug="nacre" palette="witchlight" style="position:fixed;inset:0;z-index:-1" />
  <h1>Backgrounds that glow in the dark</h1>
</section>

Override uniforms and post-FX by name. These retarget the running shader without rebuilding the WebGL context, so they are cheap to drive reactively:

<script>
  import ShaderGalleryBg from '@shader-gallery/svelte';
  let glow = 1.0;
</script>

<ShaderGalleryBg
  slug="nacre"
  palette="ember"
  uniforms={{ u_glow: glow }}
  post={{ bloom: 1.2, grain: 0.15 }}
  style="position:fixed;inset:0"
/>
<input type="range" min="0" max="2" step="0.01" bind:value={glow} />

Props

| Prop | Type | Notes | |-------------|---------------------------|-------| | slug | string | Which shader to load from the CDN. | | palette | string | Theme name; defaults to the shader's own. Changes live. | | base | string | Data source URL. Defaults to the production CDN; point at http://localhost:…/ or a Cloudflare tunnel during dev. | | uniforms | Record<string, number> | Overrides over the shader's defaults, e.g. { u_glow: 1.4 }. Apply live. | | post | Record<string, number> | Post-FX overrides, e.g. { bloom: 1.2 }. Apply live. | | frag,meta | string, object | Provide the shader directly instead of fetching by slug (bundled/offline). |

palette, uniforms and post retarget the running shader without rebuilding the WebGL context; slug/base/frag remount. Extra attributes (class, style) fall through to the canvas.

shader() — bundle one frag

The complement to <ShaderGalleryBg>: instead of fetching by slug, this carries the GLSL with you (offline, versioned, tree-shaken). Svelte components are compiled, not synthesizable at runtime, so unlike the React/Vue shader() this does not return a component. It returns the parsed { frag, meta } plus a resolve(props) that maps friendly param props (waveSpeed → u_waveSpeed) to the props <ShaderGalleryBg> spreads. Import it from the /shader subpath.

A shader.gallery effect is one self-contained .frag with an embedded /*@shader … */ JSON header. Author your own, or copy the reference effect that @shader-gallery/components ships on disk at node_modules/@shader-gallery/components/effects/billow.frag (params waveSpeed / swell / cross).

<script>
  import ShaderGalleryBg from '@shader-gallery/svelte';
  import { shader } from '@shader-gallery/svelte/shader';
  import billowSrc from './billow.frag?raw';   // Vite/webpack raw import

  const billow = shader(billowSrc);
  let waveSpeed = 0.35;

  // re-resolve whenever a param changes — retargets palette/uniforms live
  $: props = billow.resolve({ waveSpeed, palette: 'opal' });
</script>

<ShaderGalleryBg {...props} style="position:fixed;inset:0" />
<input type="range" min="0" max="2" step="0.01" bind:value={waveSpeed} />

./billow.frag?raw is the Vite/webpack way to import a file as a string. On a setup without raw imports, read the file to a string yourself and pass it to shader() — or pass frag/meta to <ShaderGalleryBg> directly.

Generate per-effect prop types with sg-typegen (from @shader-gallery/components) for autocomplete:

npx sg-typegen billow.frag --out billow.d.ts

SSR

Safe. The component renders a bare <canvas> on the server; the WebGL mount runs on mount (client-only).

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