# Flip Tiles

Aperveil / Light, shaped for the web.

A split-flap tile background for React with perspective turns and a travelling wave. Tune the responsive tile size and export the WebGPU effect.

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

## What it does

Flip Tiles projects rotating flaps so the approaching edge grows as it turns. A travelling wave organizes the board, and CSS-pixel auto sizing keeps tiles restrained on large screens.

## Choose it for

Add mechanical rhythm to a design-system launch. Keep the foreground message in HTML and use the turning field as a material-like backdrop.

## Limits

This is an abstract tile surface, not a split-flap text display. Tiles cannot show individual letters, images or data through the current controls.

## Current look

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

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

export default function Hero() {
  return (
    <FlipTiles
      className="hero-shader"
      columns={48} background="#0a0c12ff"
      fallback={<div className="hero-shader-fallback" />}
    />
  );
}

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

Component props: `background`, `frontColor`, `backColor`, `edgeColor`, `columns`, `gap`, `perspective`, `thickness`, `shading`, `wave`, `waveScale`, `flowSpeed`, `waveSpeed`, `pointerKick`, `autoSize`, `tileSize`, `opacity`, `backgroundOpacity`, `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 showing through the gaps between tiles.
- Front face (`frontColor`, color): Colour of each flap's front face.
- Back face (`backColor`, color): Colour of each flap's back face, seen mid-turn.
- Edge (`edgeColor`, color): Colour of a flap's edge as it turns past side-on.
- Columns (`columns`, slider): Used when automatic sizing is off; rows preserve square tiles.
- Gap (`gap`, slider): Space between neighbouring tiles.
- Perspective (`perspective`, slider): How strongly the near edge grows as the flap turns. At zero it only squashes, and stops reading as rotation.
- Flap thickness (`thickness`, slider): How thick the flap's edge looks when it turns side-on.
- Shading (`shading`, slider): How much a flap darkens as it turns away from you.
- Idle wave (`wave`, slider): Off by default: the board lies flat and only the cursor turns the flaps.
- Wave scale (`waveScale`, slider): How many tiles one wave spans; higher values give shorter, more frequent waves.
- Flip speed (`flowSpeed`, slider): Overall speed of the flipping; 0 stops the board.
- Wave speed (`waveSpeed`, slider): How fast the wave rolls across the board.
- Cursor kick (`pointerKick`, slider): How strongly tiles near the cursor flip on their own.
- Automatic sizing (`autoSize`, checkbox): On: tiles keep a fixed size in pixels, so bigger canvases show more of them. Off: a fixed number of columns scales with the canvas.
- Tile size (`tileSize`, slider): Size of each tile in CSS pixels, used while automatic sizing is on.
- Opacity (`opacity`, slider): Opacity of the complete effect, including its background.
- Background opacity (`backgroundOpacity`, slider): Fade the background independently for transparent overlays.

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

0.983 ms GPU timestamp median; p95 1.966 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

### Can the board display a word or departure information?

Not in this shader. The tiles are abstract colored flaps, not letters or live data. Keep departure information, words and accessible navigation in ordinary HTML above the surface.

### How do I keep the tiles a useful size on a wide display?

Leave Automatic sizing enabled and adjust Tile size, which is based on CSS pixels. If you disable automatic sizing, Columns sets the density manually. Gap and Flap thickness shape the spaces and edges.

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

This is an abstract tile surface, not a split-flap text display. Tiles cannot show individual letters, images or data through the current controls.

### 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)
- [Dot Grid](https://www.aperveil.com/shaders/dot-grid)
- [Hex Tiles](https://www.aperveil.com/shaders/hex-tiles)