Tesseract Background for React

A four-dimensional cube turning through itself behind your content: 16 corners and 32 edges rotated in two planes of 4D space at once and projected down, so its inner cube keeps flowing out to become the outer one. The large one is sized past the box, so its outer edges cross the frame; two smaller, fainter ones turn more slowly further back. Nearer edges are brighter and thicker, far ones fade, and a soft glint marks each corner as it comes close. A small canvas redraws the 96 edges each frame, and runs only while it's on screen.

Use it on science, crypto and developer-tool pages, behind a headline. For a turning globe of dots use Sphere; for isometric cubes, Boxes; for a perspective tunnel, Portal.

Installation

Usage

import { Tesseract } from "@/components/ui/tesseract";

<Tesseract className="flex min-h-[480px] items-center justify-center">
  <h1 className="text-4xl font-semibold">Think in four dimensions</h1>
</Tesseract>

Tesseract is a container: whatever you put inside sits on top, in normal flow. The figures fill the whole box and fade toward its edges (fade); there's no painted panel, so your page's background shows through, and the lines take your text colour. For a backdrop behind the whole page, render it empty with className="fixed inset-0 -z-10".

Demos

Glow

A light cyan (color="oklch(0.865 0.127 207.078)") on a dark card, where the corner glints read like a lit wireframe; speed={0.6} slows the turn.

Large

count={1} leaves just the large hypercube, scale={1.4} makes it bigger still, so most of its outer cube runs past the edges, and speed={0.5} halves the pace.

Accessibility

The canvas is decorative: it's hidden from screen readers and never takes the pointer, and your content stays on top in normal flow. With reduced motion it draws one still frame of the figures. Nothing flashes: the corner glints brighten and dim slowly as the corners come and go. The lines are thin and mostly faint, and they fade toward the edges, so a headline in your foreground colour stays readable over them; with a bright color, keep body text on a soft panel.

FAQ

API Reference