APERVEIL / DOCS / REACT

Add a shader — React

Add an Aperveil WebGPU shader to a React app: import the component, give it a size and keep your content in HTML.

Add a shader

Import the installed component 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.

Hero.tsx

"use client";

import DotGrid from "./components/aperveil/dot-grid/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.

Color Looks, browser support, performance and access are the same on every platform: see the overview.