Aperveil for Vue

Vue 3.3 or newer, Nuxt included. Download a shader's Export Kit from its editor first; the packages it needs are inside, and its vue folder holds the component.

npm install ./vendor/aperveil-runtime-0.1.1.tgz ./vendor/aperveil-vue-0.1.1.tgz

Copy the component from the kit's vue folder, import it and give it a size. The canvas fills the box you give it. In the editor, Install writes these lines for any shader, with the values you tuned.

<script setup lang="ts">
import DotGrid from "./DotGrid.vue";
</script>

<template>
  <DotGrid class="hero-shader" :density="72" background="#0d1017ff">
    <template #fallback><div class="hero-shader-fallback" /></template>
  </DotGrid>
</template>

<!-- .hero-shader { width: 100%; height: 560px; } -->

Every control in the editor is a prop: in a template write it in kebab-case (dot-color="#7af0ff") and bind numbers, booleans and arrays with : (:density="72"). Leave one out and the shader keeps its own value; change one and the running shader updates without restarting. paused holds the frame.

The component emits ready after its first frame and error if rendering fails. Put content in its #fallback slot for browsers without WebGPU: it shows in place of the canvas.

Thermal Vision, Riso Print, Stipple Relief and Reeded Waveform play a video or an image through the shader. Give it the URL as src: an MP4, WebM, MOV, JPG, PNG or WebP.

<script setup lang="ts">
import ThermalVision from "./ThermalVision.vue";
</script>

<template>
  <ThermalVision class="hero-shader" src="/videos/your-clip.mp4" :media-focus="[0.5, 0.4]" />
</template>

Without one, Thermal Vision and Riso Print play their own sample clip from the Aperveil CDN (use your own in production), and Stipple Relief and Reeded Waveform show their own scene. The clip plays muted, looped and inline, and holds still while the shader is paused, scrolled out of view or under reduced motion. A clip on your own site always plays; one on another server must allow it (CORS). A short clip of 5 to 15 seconds with one clear subject loops best.

Glass Reel shows a gallery: up to 8 pictures and clips (2 of them clips) on its film. Pass them as gallery, an array of { src, type, alt }. Dew Glass sits on a picture: give its URL as backgroundImage. Without them, Glass Reel shows its own sample pictures and Dew Glass its own scene.

Chromatic Vapor, Cymatic Dust, Dew Glass, Glass Medusae, Glass Reel, Prismatic Caustics and Watercolor run a simulation or draw a mesh, in several passes. Their components carry those passes, so they install like any other shader.

WebGPU exists only in the browser, so render a shader component inside <ClientOnly>:

<template>
  <ClientOnly>
    <DotGrid class="hero-shader" />
  </ClientOnly>
</template>

Blocks need no wrapper: they render on the server and start their shader in the browser.

Shape a block on its page with Customize, then open Install, choose Vue and download it. Copy its folder into your project, for example to components/aperveil/signature-hero, run the install line from its README and render it:

<script setup lang="ts">
import SignatureHeroSection from "@/components/aperveil/signature-hero/SignatureHeroSection.vue";
</script>

<template>
  <SignatureHeroSection />
</template>

Every prop is optional: content, design and shader override the copy, the colours and typefaces, and the shader's values; on a form block onSubmit makes the form live.

Nothing appears.

Give the surface a width and a height: the canvas fills its box, and a box without a height is zero pixels tall.

The fallback shows instead.

The browser has no WebGPU, or no usable GPU adapter, or the page is not served over HTTPS (localhost is fine). Keep important content in HTML, outside the shader.

A value is ignored.

An invalid value (a mistyped colour, an unknown option, a number out of range) keeps the default and logs one warning in the console. Numbers outside their range are clamped.

The video does not play.

A clip on another server must allow it (CORS). A clip on your own site always does.