Labyrinth Background for React

A seeded maze fills the box, its walls at a soft 40% and fading toward the edges, while a few lights explore its corridors from the middle outward: each trails a short tail, lights up the walls around it as it passes, runs into side corridors and turns back at dead ends. The maze is carved when the page renders and repeats with no visible seam on wide screens; the walls are one still masked layer, the lights are small dots moved from cell to cell by translate keyframes the install adds to your stylesheet, and their glow shows through a second copy of the maze's mask, so only the nearby walls catch it. Nothing repaints and no script runs.

Use it for puzzle, game or security pages. For a board of traces with signals, use Circuit; for lights racing along an open grid, Laser Grid; for cells that evolve on a grid, Life.

Installation

Usage

import { Labyrinth } from "@/components/ui/labyrinth";

Labyrinth is a container: give it a size and put your content inside. The maze sits behind the content and the box clips it.

<Labyrinth className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Find the way through</h1>
</Labyrinth>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<Labyrinth className="fixed inset-0 -z-10" />

Demos

Theme colours

By default the maze keeps its signature neon: indigo walls and cyan lights, a deeper cyan on light themes. Here wallColor and lightColor take your theme's colours instead: faint walls in the foreground and lights in the primary colour.

Tighter maze

A denser maze in a dark card: cellSize={24}, count={8} lights and speed={1.5}. On a dark surface in a light theme, pass the pale cyan as lightColor so the lights stay bright.

Accessibility

The maze is decorative: it's hidden from screen readers and lets every click through to your content. With reduced motion the lights stop where they are, a still picture of the maze with a few lit corners. Nothing flashes: the lights glide a cell at a time and the walls brighten and fade as they pass. The walls show at 40% and fade toward the edges, but they still cross under every letter, so keep copy in your foreground colour, put a softly faded panel behind long text or pass a fainter wallColor (about 25% of your foreground); avoid backdrop-blur, which would re-blur the moving lights on every frame.

FAQ

API Reference