Platonic Solids Shader for React

Platonic Solids Shader nests the five Platonic solids inside each other, from an icosahedron on the outside through a dodecahedron, a cube and an octahedron to a tetrahedron at the heart. Each shell turns on its own axis at its own speed, drawn in fine brass lines on deep navy with mild perspective: front edges are solid, back edges dimmer and dashed, and every corner carries a dot. Thin orbit rings with a bead each run between the shells, inside a ticked outer ring, like an astrolabe. A WGSL fragment shader on WebGPU measures the distance from every pixel to all 90 edges each frame, so the lines stay crisp and anti-aliased at any size.

Use it behind a research, education, science or protocol page that wants geometry with some ceremony. For a single four-dimensional cube in plain CSS, use the Tesseract background; for engraved, banknote-style line art, Guilloche Shader. It runs only while it's on screen, holds a still frame with reduced motion, and shows CSS rings on a navy glow in browsers without WebGPU.

Installation

Usage

import {
  PlatonicSolidsShader,
} from "@/components/ui/platonic-solids-shader";

<PlatonicSolidsShader className="flex min-h-[32rem] items-center justify-center">
  <h1 className="text-5xl font-semibold text-white">Ship faster</h1>
</PlatonicSolidsShader>

Platonic Solids Shader is a container: your content sits on top of the stack, 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 stack and its outer ring fill about 90% of the box's shorter side, centered; align="right" moves it right of center, so copy on the left sits on bare navy. The background is dark in both color schemes, so put white or light text on it.

Demos

Offset

align="right" moves the stack to the right and enlarges it a little, for a hero with copy on the left. solids={3} keeps only the three outer shells, and lineColor with backgroundColor turn the brass and navy into silver on near-black.

In a card

solids={1} draws the icosahedron alone, and align="right" lets it run off the card's edge, a quiet corner piece. lineWidth={1.25} thickens the lines a little for a small surface.

Performance

About 1.5 ms of GPU time a frame at 1280×720 on an M2 Max laptop with all five solids, and less with fewer: the cost grows with the number of edges each pixel checks, and pixels outside a shell skip its edges. It keeps full quality, because the lines are a pixel wide and blur at half resolution; on a slow GPU, lower solids first. 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 faint brass rings on a navy glow, 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 stack is decoration: it's hidden from assistive tech and lets every click through to your content. With interactive, the tilt follows a mouse or pen, never touch. With reduced motion it draws one still frame and stops. Nothing flashes: the fastest shell takes about 20 seconds to turn once. White text reads well on it: across the renders it keeps above 8.8:1 contrast on 90% of the middle of the box, and drops to about 2.6:1 only where it crosses a line, so headlines read bare; keep small body text on a panel or beside the stack with align="right".

FAQ

API Reference