Flip Tiles Free WebGPU shader

Turn the page into motion.

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

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

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.

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

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.

Columns

Used when automatic sizing is off; rows preserve square tiles.

Gap

Space between neighbouring tiles.

Perspective

How strongly the near edge grows as the flap turns. At zero it only squashes, and stops reading as rotation.

Flap thickness

How thick the flap's edge looks when it turns side-on.

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

FlipTiles usage

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

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