Dither Morph Free WebGPU shader

One form, never the same.

A WebGPU form that keeps changing — twelve geometric and organic shapes — lit as a solid and printed in ordered Bayer pixels, a 45° halftone, or surface-stable dots that ride the form at one spacing on screen.

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 Dither Morph.

The form is a signed distance field that travels through twelve shapes, holding each and then flowing into the next, because a blend of two distance fields is a surface too — so the morph has no seams, and a slow three-sine breathing keeps even the held shape alive. It is lit as a solid, by a key, its own occlusion, a highlight and a rim, and only then is the light turned into ink. Bayer samples the form once per cell and compares that cell's light with an 8×8 threshold built by interleaving the bits of x⊕y and y, so every level adds dots as evenly as the grid allows. Halftone turns the grid 45° and sizes each dot so its area is the light, r = s√(L/π). Surface puts the dots on the form itself and keeps their spacing on screen constant: a power-of-two lattice is chosen from how much of the form one pixel covers, and between two levels the finer one's extra dots leave in Bayer order, three of every four, so a lattice doubles without a dot jumping. Ink reproduces light either way round: a dot lighter than the ground stands for light, a darker one for shadow, the way ink on paper does.

The shapes are analytic and the light is one key with a rim — there are no cast shadows and no reflections. Surface dots are projected along the dominant axis of the normal, so they seam where that axis changes, and the method follows Rune Skovbo Johansen's surface-stable fractal dithering without its 3D pattern texture or anisotropic dot stretching. Bayer and Halftone are screen-space: they are stable because the camera never moves.

2.425 ms GPU timestamp median; p95 3.67 ms. 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-18. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Pattern

How the light becomes ink: ordered Bayer pixels, a 45° halftone of dots sized by area, or dots that belong to the form's surface and keep one spacing on screen.

Cell size

Size of one dither cell, or the dot spacing, in device pixels.

Accent

How much of the brightest light is printed in the accent colour.

Position

Adjust position in the editor. The default is [0.5,0.5].

Color Looks preserve these settings. Open the editor for all 21 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 DitherMorph.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

DitherMorph usage

"use client";

import DitherMorph from "./DitherMorph";

export default function Hero() {
  return (
    <DitherMorph
      className="hero-shader"
      cell={4} colorDot="#e9e4d6"
      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.

Give a developer tool, a music release or a retro-leaning product page a hero object with character: it never holds one shape for long, and it prints like a screen from before colour. Keep the copy on the open ground beside it.