Aperveil for WordPress

WordPress 6.5 or newer, PHP 7.4 or newer. Each shader is its own small plugin:

1. Tune the shader in its editor, open Install, choose WordPress and download the plugin.
2. In WordPress, open Plugins, Add New, Upload Plugin, choose the ZIP, install it and activate it.

Several shader plugins can live on one site, and on one page: every rule each plugin writes is its own.

In the editor, add the shader's block (under Design) and place any blocks inside it: a heading, text, buttons. It opens full width, with the shader live behind your content. In its settings:

• Minimum height: for example 560px or 80vh.
• Fade the shader: toward its background colour, so text reads more easily.
• Text colour and padding are in the block's styles. Headings and the theme's buttons take the section's colours unless you choose others.

Thermal Vision, Riso Print, Stipple Relief and Reeded Waveform play a video or an image through the shader. In the block's settings, open Video or image and choose a clip or a picture from the media library; in a page builder, give the shortcode a src.

[aperveil_thermal_vision height="560px" src="https://example.com/your-clip.mp4"]
  <h2>Your headline</h2>
[/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 from your own media library always plays; a URL 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. Choose them under Pictures and clips, or give the shortcode a gallery of URLs separated by spaces. Dew Glass sits on a picture: choose it under Picture behind the glass, or give the shortcode a background. 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.

In Elementor, Divi or any builder with a shortcode element, use the plugin's shortcode. Its name is the shader's, in snake case:

[aperveil_dot_grid height="560px" overlay="20"]
  <h2>Your headline</h2>
  <p>Your text, in front of the shader.</p>
[/aperveil_dot_grid]

• height: the minimum height, as in CSS (560px, 80vh…).
• overlay: how much to fade the shader toward its background, 0 to 90.
• src: for the shaders that play a video or an image, its URL.

The plugin carries the colours and settings you chose in the editor. To change them, tune the shader on aperveil.com again, download the plugin again and upload it: WordPress offers to replace the installed version, and your blocks and shortcodes stay as they are. Where WebGPU is not available, the section shows its ground colour; for visitors who ask for reduced motion, the shader holds still.

An Aperveil block (a hero, pricing, a form) comes as a plugin too. Shape it on its page with Customize, open Install, choose WordPress and download it; upload it under Plugins, Add New, Upload Plugin. The block is in the editor under Design.

The section is a plain colour.

The visitor's browser has no WebGPU (or no usable GPU), so the section shows its ground colour, as designed. Your content stays readable in front of it.

The shader does not start.

Check that a caching or optimisation plugin is not combining, delaying or rewriting the plugin's view.js module, and exclude it if it is. The plugin needs WordPress 6.5 or newer for script modules.

The video does not play.

A URL on another server must allow it (CORS). Choosing the file from your own media library avoids this.