# Iso Grid

Aperveil / Light, shaped for the web.

An isometric height-field background for React with shaded faces and local pointer lift. Tune ISO Grid's density, gaps and depth in WebGPU.

[Aperveil integration guide](https://www.aperveil.com/docs)

## What it does

ISO Grid projects a procedural height field into isometric top and side faces. Height variation and depth falloff establish the field; the pointer adds a local lift.

## Choose it for

Set a structured backdrop for a platform overview. Use the repeated heights as a metaphor for a system without presenting them as quantitative data.

## Limits

This is not a data chart or a navigable 3D map. The columns are generated by the shader, not imported geometry or user-provided height data.

## Current look

Default. Color Looks change colors only; motion, geometry and typography remain unchanged.

[Open editor](https://www.aperveil.com/shaders/iso-grid/edit?look=default)

## Install

Download the Export Kit from the editor. No shader-specific npm package or CLI is published yet.

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

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.

```tsx
"use client";

import IsoGrid from "./IsoGrid";

export default function Hero() {
  return (
    <IsoGrid
      className="hero-shader"
      density={10} background="#070a10ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

// .hero-shader { width: 100%; height: 560px; }
```

Component props: `background`, `topFace`, `leftFace`, `rightFace`, `lightColor`, `density`, `gap`, `maxHeight`, `heightVariation`, `depthFalloff`, `flowSpeed`, `pointerLift`, `pointerReach`, `opacity`, `className`, `style`, `paused`, `fallback`, `onReady`, `onError`.

Raw WGSL is included for a custom WebGPU host; it is not CSS. Keep semantic headings and links in HTML.

## Controls

- Background (`background`, color): Colour behind the grid, darkened toward the edges.
- Top face (`topFace`, color): Colour of each column's top.
- Left face (`leftFace`, color): Colour of the left-facing side walls.
- Right face (`rightFace`, color): Colour of the right-facing side walls.
- Ridge light (`lightColor`, color): Colour of the light on the raised tops and of the ridge the pointer lifts.
- Grid density (`density`, slider): How many cells run across the grid.
- Tile spacing (`gap`, slider): Space between neighbouring columns.
- Elevation (`maxHeight`, slider): How tall the columns can rise.
- Height variation (`heightVariation`, slider): How much heights differ from column to column; 0 gives an even field.
- Depth falloff (`depthFalloff`, slider): How much the terrain flattens toward the back of the grid.
- Terrain drift (`flowSpeed`, slider): How fast the heights roll across the terrain; 0 holds it still.
- Pointer lift (`pointerLift`, slider): How high columns rise under the pointer.
- Pointer reach (`pointerReach`, slider): How wide the area the pointer lifts is.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.

## Compatibility

WebGPU rendering requires a supported browser and secure context. The landing shows a real poster for the selected Look when live rendering is unavailable. The standard exported component does not bundle a poster fallback. Supply your own fallback in the host layout. Text exports also retain readable HTML typography.

## Performance

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

## Questions

### Can I use the columns to show live data?

Not through the current interface. Heights are procedural and controlled by appearance parameters. A data visualization would need a new data input and mapping.

### How is ISO Grid different from Rising Cubes?

ISO Grid emphasizes a varying height field with depth falloff. Rising Cubes adds an explicit rise, hold and fall rhythm. Choose ISO Grid when you want a structured terrain-like surface rather than a timed lifting sequence.

### What should I not use Iso Grid for?

This is not a data chart or a navigable 3D map. The columns are generated by the shader, not imported geometry or user-provided height data.

### What happens without WebGPU?

This landing shows a still poster of your selected Color Look. The raw WGSL needs a WebGPU host. Landing posters are not bundled in the Export Kit: add your own fallback around the exported component.

### Can I use this shader commercially?

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. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## License

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. Follow the license notices supplied with the source you download. The planned Free collection permits personal and commercial interface projects. An alpha access grant is not a purchase or a replacement for those license terms.

## Related shaders

- [Rising Cubes](https://www.aperveil.com/shaders/rising-cubes)
- [Hex Tiles](https://www.aperveil.com/shaders/hex-tiles)
- [Grid Horizon](https://www.aperveil.com/shaders/grid-horizon)