@shader-core/vue

@shader-core/vue

Vue components for Shader Core: an animated WebGL2 background composed from layers that stack.

npm install @shader-core/vue

Vue 3.4+ is a peer dependency.

Use

<script setup>
import { Shader, Gradient, Curtains, Grain, Vignette } from '@shader-core/vue';
</script>

<template>
  <Shader style="position: fixed; inset: 0; z-index: -1">
    <Gradient colorA="#04060f" colorB="#0a1230" />
    <Curtains :scale="3.8" colorSheet="#3ddc97" colorFilament="#4361ee" />
    <Grain :intensity="0.25" />
    <Vignette :amount="0.5" />
  </Shader>
</template>

Children are layers, bottom to top, composed into one program and drawn in one pass. Each is typed from its schema, so a mistyped prop is a compile error rather than a uniform nobody sets.

Bind numbers with a colon. intensity="0.25" without it hands the layer the string "0.25", which is a uniform that silently never gets set — the one mistake this API makes easy, and the reason the editor's Vue export writes the colon for you.

Changing a prop updates a uniform. Adding, removing or reordering a child changes the stack and recompiles once, then it is cached — so a slider is free and a drag-to-reorder is not.

Children

<template>, v-if and v-for all work: grouping is transparent, and a false v-if leaves a comment placeholder that is simply dropped.

A component that wraps layers does not. <Shader> reads its children rather than rendering them, so a wrapper is opaque — inline the layers, or have the wrapper render its own <Shader>.

Props

Anything else — class, style, id — lands on the canvas, merged with the component's own styles rather than replacing them.

Errors are reported through @error, and logged to the console if nothing is listening. A background is not worth taking a page down for, so a failure leaves the canvas blank rather than throwing through your render.

<Shader @error="(e) => report(e)">…</Shader>

Per-layer entry points

Every layer also has its own module — @shader-core/vue/gradient — if you would rather not rely on tree-shaking.

Layers

Bases, opaque, for the bottom of a stack: Gradient, Mesh, Marble, Frost, Contours, Silk, Terrain, Maze, Rings, Sheen.

Light, additive: Curtains, Caustics, Rays, Glow, Ribbon.

Pattern, a shape over anything: Halftone, Solid — one soft object in real 3D.

Finishing, multiplied over everything below: Grain, Vignette, Grade.

Filter, last, transforming everything beneath: Tone.

Licence

Free to use, including commercially, on one condition: the credit comment stays in shader source you copy. Full terms in LICENSE.md.