Penrose Tiling Shader for React

Penrose Tiling Shader lays an endless floor of Penrose's thick and thin rhombi, in glazed terracotta and cream with dark brown grout. The tiling never repeats, yet fivefold stars and decagons turn up everywhere. Each tile sits at a slightly different tilt, so as a slow light passes over the floor some tiles catch it and others fall into shade, with a glint on the glaze. The view zooms in forever: the tiles grow, and each one in turn splits into smaller thick and thin tiles, the golden ratio smaller, so the floor keeps its scale and the loop never shows a seam.

A WGSL fragment shader on WebGPU finds every pixel's tile on its own: it starts from a wheel of ten triangles and applies Robinson's substitution, the rule that cuts each half-rhombus into smaller ones, nine or ten times, keeping only the triangle that holds the pixel. Use it behind an architecture or interiors hero, a maths or design-education page, or behind a pricing table. For a periodic, random tiling, use Truchet Shader; for a never-repeating pattern of waves rather than tiles, Quasicrystal Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows a CSS rosette in the same glazes in browsers without WebGPU.

Installation

Usage

import {
  PenroseTilingShader,
} from "@/components/ui/penrose-tiling-shader";

<PenroseTilingShader className="flex min-h-[32rem] items-center justify-center">
  <div className="rounded-xl bg-[#3a2418]/80 px-8 py-6">
    <h1 className="text-5xl font-semibold text-white">Ship faster</h1>
  </div>
</PenroseTilingShader>

Penrose Tiling Shader is a container: your content sits on top of the floor, in normal flow. It fills its own box, so give it a height or content. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10". The floor mixes dark terracotta and pale cream everywhere, so no text color reads on it bare: put copy on a panel, like the grout-colored bg-[#3a2418]/80 one above, which keeps white text above 7.5:1.

Demos

Panning

zoom={false} stops the zoom, so the tiles keep one size and the floor slides slowly past instead, which suits a pricing table or a long page better. Here thickColor, thinColor and groutColor make it navy and sky tiles with white grout, and grout={2} widens the joints.

Performance

About 0.45 ms of GPU time a frame at 1280×720 on an M2 Max laptop: each pixel takes at most ten small steps to find its tile, whatever the size of the box. Keep quality at 1: the grout lines are a pixel or two wide and go soft at half resolution, and the cost is already small. The animation stops when the shader scrolls out of view, and the browser pauses it in a hidden tab. Every shader on a page shares one GPU device and one frame loop, and vgpu (about 50 KB gzipped) loads only when the first one mounts.

Browser support

The shader needs WebGPU: Chrome and Edge, Safari 26 and later, and Firefox on Windows and macOS. Elsewhere, and until the first frame, the box shows a CSS rosette of terracotta and cream spokes, darkening at the edges, so the layout never jumps. data-state on the root reads unsupported there, if you want to style around it. See Shader Canvas.

Accessibility

The floor is decoration: it's hidden from assistive tech and lets every click through to your content. With reduced motion it draws one still frame, a whole tiling before any tile splits, and stops. Nothing flashes: each tile grows for 10 seconds and splits once in that time, fading into its children over about a second, and the light drifts across and back about once a minute. The contrast inside the floor is high and changes everywhere, so never set text on it bare: a bg-[#3a2418]/80 panel keeps white text above 7.5:1, bg-black/60 above 5.5:1, and bg-white/80 keeps near-black text above 11:1.

FAQ

API Reference