Dot Grid Free WebGPU shader

A little structure. A little response.

A responsive dot grid background for React. Set spacing in CSS pixels, add a local cursor ripple, and export the WebGPU effect with your chosen colors.

Open editor Meet the surface

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

A surface, not a screenshot.

FreeReact exportRaw WGSL

THE SYSTEM BEHIND THE SURFACE

Inside Dot Grid.

Pixel-sized dots move locally around the pointer without clipping at cell borders. Surface waves, repulsion and wave damping retain the grid structure and its automatic CSS-pixel spacing.

This is analytic displacement with smoothed pointer input, not a particle collision simulation.

No published timing sample. Profile this effect on your target devices.

Density

Rows of dots when automatic sizing is off.

Dot size

Size of each dot relative to the spacing between them.

Accent falloff

How strongly dots take the accent colour near the cursor.

Flow speed

Speed of the idle breathing and the ripple.

Color Looks preserve these settings. Open the editor for all 17 controls.

KEEP THE SOURCE. KEEP THE CONTROL.

From preview to your project.

Choose a Look, tune it in the editor, then download the Export Kit. Install the runtime and copy the generated component into your project.

Every control in the editor is a typed prop. Leave a prop out to keep the value you exported; change one and the running shader updates without restarting. Give the surface a size and pass fallback for browsers without WebGPU.

In Next.js, use a client component and give its container an explicit size. Keep headings, links and accessible content in HTML above the decorative canvas.

Part of the Free collection for Aperveil 1.0. Public live preview and Color Looks are open. Free Export Kits do not require an account. Purchasing is not available yet.

Open editor & export

Markdown guide

Usage example — download DotGrid.tsx from the editor first. This example imports that local file; it is not the shader component itself.

Terminal

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

DotGrid usage

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

Download and extract the complete Export Kit first. Run its local package command from the ZIP root, then copy the component into your project. Public npm and CLI distribution is coming soon.

THE SURFACE IN CONTEXT

Made for a real interface.

Add a quiet technical texture to a developer-tool homepage. Keep the points small and place real HTML labels above the canvas; the grid supplies atmosphere, not information.