@aperveil/react

React components for Aperveil WebGPU shaders.

npm install @aperveil/react
npx @aperveil/cli add aurora-drift

The CLI copies the shader's component into your project (components/aperveil/<slug>), like shadcn/ui: the source is yours to read and keep. Every control from the Aperveil editor is a typed prop.

"use client";
import AuroraDrift from "@/components/aperveil/aurora-drift/AuroraDrift";

export function Hero() {
  return (
    <AuroraDrift
      className="h-[560px] w-full"
      colorA="#35e8b0"
      flowSpeed={0.8}
      fallback={<img src="/aurora.jpg" alt="" />}
    />
  );
}

• Size: the canvas fills the box you give it with className or style.
• Props: every prop is optional. Leave one out to keep the value the component was exported with. Numbers are clamped to their range; an invalid value keeps the default and logs one warning.
• Updates: changing a prop updates the running shader without restarting the GPU.
• Shared props: className, style, paused, fallback, onReady, onError.
• No WebGPU: fallback is rendered instead of the canvas, and also if rendering fails.
• Frameworks: React 18.2+. Next.js App and Pages Router, Vite and other React setups; components are marked "use client".

Each shader's README and landing page list all of its props with types, defaults and ranges.

Lower level

ShaderSurface is the shared body of every generated component (WGSL, runtime spec, parameter schema, defaults, values). AperveilShader is a bare canvas driven directly by GPU uniform values. Both wrap @aperveil/runtime, which owns timing, DPR, pointer handling, reduced motion and the render loop.