@shader-gallery/vue

Vue 3 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.

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

<ShaderGalleryBg> — fetch by slug

The default. Renders a <canvas> and drives the shader through @shader-gallery/runtime (a real Vue component, not a wrapper around the web component). 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 setup>
import { ShaderGalleryBg } from '@shader-gallery/vue';
</script>

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

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

<script setup>
import { ref } from 'vue';
import { ShaderGalleryBg } from '@shader-gallery/vue';

const glow = ref(1.0);
</script>

<template>
  <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" v-model.number="glow" />
</template>

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 | object | Overrides over the shader's defaults, e.g. { u_glow: 1.4 }. Apply live (watched deep). | | post | object | Post-FX overrides, e.g. { bloom: 1.2 }. Apply live (watched deep). | | 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. 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). Each float param becomes a declared Number prop (u_waveSpeed → waveSpeed, bound as :wave-speed in templates); palette and post are universal.

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 setup>
import { ref } from 'vue';
import { shader } from '@shader-gallery/vue';
import billowSrc from './billow.frag?raw';   // Vite/webpack raw import

const Billow = shader(billowSrc);
const waveSpeed = ref(0.35);
</script>

<template>
  <Billow :wave-speed="waveSpeed" palette="opal" :style="{ position: 'fixed', inset: 0 }" />
  <input type="range" min="0" max="2" step="0.01" v-model.number="waveSpeed" />
</template>

./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 use <ShaderGalleryBg :frag="…" :meta="…" />.

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 in onMounted (client-only).

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