From shader to shipped interface.

Each shader becomes a React component in your own project: its source is installed next to your code (like shadcn/ui), and it runs on @aperveil/react, a thin adapter over the framework-independent @aperveil/runtime. Every control from the editor is a typed prop. You do not need an Aperveil account to explore the current preview.

Free kits can be downloaded without an account. To copy an official Pro component or download its kit, sign in and use an active Aperveil Pro or All Access grant. Alpha grants are managed by the Aperveil team; account creation alone does not unlock Pro.

1. 1

   Choose a shader.

   Open its landing, try a Color Look and select Open editor.

2. 2

   Add it to your project.

   Download and extract the complete Export Kit from the editor. The values you tune become the component's defaults. The kit includes the local Aperveil packages you need; public npm and CLI distribution is coming soon.

3. 3

   Install the adapter.

   Use your project’s package manager. Standard shaders need @aperveil/react (it brings @aperveil/runtime); geometry renderers such as Glass Reel and Glass Medusae document their direct vgpu dependency.

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

Extract the kit into your project. Keep the generated files together and import the component from its local path. This example uses Dot Grid; the editor generates a component name from the shader you export.

"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; }

Give the parent an explicit height and apply the stylesheet rule in the example. The canvas fills that container. Keep headings, links and important content in HTML above or beside the shader; the canvas is a visual layer, not your document.

Color Looks change colors only. Geometry and motion stay as you set them. Changing a Look does not reset those controls; Reset all restores the shader’s product defaults.

Each shader’s landing lists all of its props with types, defaults and ranges, and the README in its kit repeats them. Leave a prop out to keep the exported value; change one and the running shader updates without restarting. Every component also takes className, style, paused, fallback, onReady and onError. Keep your interface typography in HTML so it remains readable and accessible independently of the shader.

Live rendering requires WebGPU and a secure context. Browser support alone does not guarantee an available GPU adapter. Aperveil landings use poster fallbacks; most have a poster for each Look, while Glass Reel uses one shared poster.

Standard Export Kits do not bundle that landing poster. Add your own fallback in the host interface, keep essential content readable without WebGPU and respect reduced-motion preferences.

Start with a sensibly sized surface, avoid unnecessary simultaneous canvases and profile on your target devices. Shader timings are recorded samples, not a promise of frame rate: compare the same resolution, quality and DPR, and test idle and pointer movement separately.

Free shaders, block studios and Export Kits are available without an account. Pro items are coming soon; their demos, studios and downloads will open in a later release. Purchasing is not open yet.

The published catalog has 36 Free and 32 Pro shaders. Aperveil Pro includes premium shaders and premium blocks at $99 USD one-time for one developer and unlimited permitted personal, client and SaaS interface projects. Blocks are currently previews; source export and CLI installation are being prepared.

Templates are separate: All Access stays coming soon until website templates are ready. Its price and upgrade terms have not been announced. Purchasing is not available yet.

One payment, no subscription. Use the versions you download for as long as your license permits. Published updates and future additions to the same Aperveil shader and block collections are included during the product’s operating life. Website templates, separate products, extra developer seats, custom development and 24/7 support are excluded. Lifetime does not promise a release schedule, perpetual hosting or support for every future browser.

This is product planning, not a new license agreement. Follow the license notices supplied with the source you download; the preview does not retroactively change those notices or grant every future product entitlement.

Read the License draft, Terms, Privacy and Refund policy before the offer opens.