# Hex Tiles

Aperveil / Light, shaped for the web.

A ceramic-like hexagon tile background with local cursor response. Tune Hex Tiles' density, seams and lighting, then export it for React.

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

## What it does

Hex Tiles resolves a staggered hexagonal lattice into matte tile faces and beveled edges. Moving the pointer reveals fine light through the gaps with a faint bevel spill; the face colors stay stable. Closing the gaps disables the light.

## Choose it for

Give a systems product a tactile technical identity. Keep tile density high enough to read as a surface, leaving real product information in the foreground.

## Limits

The tiles are generated in a fragment shader, not separate 3D meshes. There are no per-tile links, uploaded textures or physics objects.

## Current look

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

[Open editor](https://www.aperveil.com/shaders/hex-tiles/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 HexTiles from "./HexTiles";

export default function Hero() {
  return (
    <HexTiles
      className="hero-shader"
      density={16} background="#0c0c14ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `background`, `faceColor`, `hotColor`, `crestColor`, `density`, `gap`, `rim`, `flowSpeed`, `idle`, `rippleStrength`, `rippleReach`, `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 of the gaps between tiles.
- Tile (`faceColor`, color): Colour of the tiles at rest.
- Lit tile (`hotColor`, color): Colour the tiles shift toward as they glow, and of the light in the gaps near the cursor.
- Edge (`crestColor`, color): Colour of the highlights on the bevelled edges.
- Density (`density`, slider): How many tiles fit across the height of the surface.
- Gap (`gap`, slider): Space between tiles. Zero closes the lattice into a solid honeycomb.
- Edge light (`rim`, slider): Brightness of the highlights on the tile edges.
- Flow speed (`flowSpeed`, slider): Speed of the tiles' slow glowing wave; 0 holds it still.
- Idle drift (`idle`, slider): Slow per-tile breathing, independent of the pointer.
- Gap light (`rippleStrength`, slider): Light leaking through open gaps near the cursor, with a faint bevel spill. Zero disables hover light without changing tile faces.
- Light reach (`rippleReach`, slider): Radius of the pointer's influence, in canvas units.
- 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

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

## Questions

### Are the hexagons individual interactive elements?

No. One canvas renders the entire field. Cursor response is computed locally in the shader; links and buttons should remain separate HTML elements.

### How do I make a quieter hexagon background?

Use Density and Gap to set the scale of the surface, then reduce Idle drift and Ripple for a calmer field. Place real navigation in HTML above the canvas; the tile response does not make each hexagon a button.

### What should I not use Hex Tiles for?

The tiles are generated in a fragment shader, not separate 3D meshes. There are no per-tile links, uploaded textures or physics objects.

### 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

- [Dot Grid](https://www.aperveil.com/shaders/dot-grid)
- [Iso Grid](https://www.aperveil.com/shaders/iso-grid)
- [Flip Tiles](https://www.aperveil.com/shaders/flip-tiles)