Aperveil for React

React 18.2 or newer: Next.js (App and Pages Router), Vite and any other React setup. Download a shader's Export Kit from its editor first; the packages it needs are inside.

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

Copy the component from the kit into your project, 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.

"use client";

import DotGrid from "./DotGrid";

export default function Hero() {
  return (
    <DotGrid
      className="hero-shader"
      density={72} background="#0d1017ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }

Keep headings, links and anything important in HTML above or beside the shader: the canvas is a visual layer, not your document.

Every control in the editor is a typed prop; your editor reads their types and descriptions. Leave one out and the shader keeps its own value; change one and the running shader updates without restarting. Each shader's page lists all of its props with ranges and defaults.

Every component also takes className, style, paused, fallback, onReady, onError:

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.

import ThermalVision from "./ThermalVision";

export default function VideoHero() {
  return (
    <ThermalVision
      className="hero-shader"
      src="/videos/your-clip.mp4"
      mediaFocus={[0.5, 0.4]}
    />
  );
}

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.

The components are marked "use client". In the App Router, import one straight into a server component page or layout: no dynamic() and no ssr: false are needed. The page renders on the server and the shader starts in the browser, where WebGPU is. The Pages Router works the same way.

A block is a whole section wearing a shader. Shape it on its page with Customize, then open Install, choose React and download it. The README in the download has the install line for the packages it uses.

import SignatureHeroSection from "@/components/aperveil/signature-hero";

export default function Page() {
  return <SignatureHeroSection />;
}

Unzip it into components/aperveil/ and render it from its entry file. Every prop is optional: content overrides any line of the copy, design the colours and typefaces, shader the shader's values, and on a form block onSubmit makes the form live. The entry file imports the block's stylesheet; the Next.js Pages Router accepts global CSS in pages/_app.tsx only, so move that import there.

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.