Hex Tiles Free WebGPU shader

Order, with a tactile edge.

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

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 Hex Tiles.

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.

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

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.

Density

How many tiles fit across the height of the surface.

Gap

Space between tiles. Zero closes the lattice into a solid honeycomb.

Edge light

Brightness of the highlights on the tile edges.

Flow speed

Speed of the tiles' slow glowing wave; 0 holds it still.

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

HexTiles usage

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

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 systems product a tactile technical identity. Keep tile density high enough to read as a surface, leaving real product information in the foreground.