Aperveil for plain HTML

No install and no build step. Download a shader's Export Kit from its editor and copy its html folder to your site, keeping its two files together: aperveil-dot-grid.js (the shader, with your values) and aperveil-element.js (the runtime). Then add the script and the tag:

<script type="module" src="./aperveil-dot-grid.js"></script>

<aperveil-dot-grid class="hero-shader" density="72" background="#0d1017ff">
  <div slot="fallback" class="hero-shader-fallback"></div>
</aperveil-dot-grid>

<style>
  .hero-shader { display: block; width: 100%; height: 560px; }
</style>

The kit's index.html shows it working on its own. Open it through a web server: modules do not load from file://.

Every control in the editor is an attribute in kebab-case (dot-color="#7af0ff") and a property in camelCase (element.dotColor = "#7af0ff"); element.values = { … } sets several at once. Changing one updates the running shader. The paused attribute holds the frame.

The element fires ready after its first frame and failed (the error in detail) if rendering fails. Content with slot="fallback" shows where WebGPU is unavailable, and data-aperveil-status on the element says loading, ready, unsupported or failed, for your own CSS.

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 type="module" src="./aperveil-thermal-vision.js"></script>

<aperveil-thermal-vision class="hero-shader" src="/videos/your-clip.mp4" media-focus="0.5 0.4"></aperveil-thermal-vision>

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. Give it gallery: URLs separated by spaces, or an array as the element's gallery property. Dew Glass sits on a picture: give its URL as background-image. 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.

Until the packages are on npm, use the kit's two files as above: they work in any bundler as plain modules.

Shape a block on its page with Customize, then open Install and choose HTML. The download's index.html holds the block, ready to copy: paste the marked section into your page with the files beside it (its stylesheet, and the shader's and the block's scripts where it has them). On a form block, replace the handler in the script at the end of index.html with your own.

Nothing appears.

Give the element a size in CSS (it is display: block with no height of its own), and open the page through a web server: modules do not load from file://.

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.