Topo Lines Free WebGPU shader

A landscape in every line.

A procedural topographic contour background for React. Tune terrain ridges, contour intervals and local pointer relief, then export the WGSL.

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 Topo Lines.

Topo Lines builds warped, ridged terrain and draws minor contours with stronger index lines. Hypsometric color and relief lighting add depth to the contour field.

The contours do not represent geographic elevations or GIS data. They are generated for visual design, without map coordinates or elevation uploads.

6.2 ms legacy timing (method not recorded; not a pure GPU measurement). 1440x900 @ dpr 2; Metal driver on macOS Version 26.6.2 (Build 25G83); measured 2026-09-03. This is a recorded headless sample, not a browser FPS or mobile-performance guarantee.

Terrain scale

Density of the terrain; higher values give smaller, more numerous hills.

Domain warp

How much the terrain twists and folds.

Ridge sharpness

How sharp the ridges are; higher values give crisper, rockier crests.

Contour count

Number of contour levels between the lowest and highest ground.

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 TopoLines.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

TopoLines usage

"use client";

import TopoLines from "./TopoLines";

export default function Hero() {
  return (
    <TopoLines
      className="hero-shader"
      scale={2.4} background="#090e12ff"
      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.

Create an outdoor product introduction with cartographic character. Use the contours as a visual motif while keeping real locations and specifications in HTML.