Life Background for React

Life runs Conway's Game of Life behind your content, eight generations a second. Gliders sail across a faint lattice of dots, blinkers pulse, still lifes settle, and a cell that dies fades out over two generations instead of vanishing. The board wraps at the edges, so patterns travel forever, and when it settles down one small patch is stirred up again.

Use it for engineering dashboards, developer tools and computer-science pages. For cells that flicker at random with no rules, use Flickering Grid; for the static lattice alone, Dot Pattern; for patterns that grow from chemistry rather than counting, Reaction Diffusion. It's a tiny canvas with one pixel per cell that CSS scales up and cuts into round dots, so a generation costs a fraction of a millisecond, nothing is drawn between generations, and it only runs while it's on screen.

Installation

Usage

import { Life } from "@/components/ui/life";

<Life className="min-h-[480px]">
  <h1 className="text-5xl font-semibold">Ship faster</h1>
</Life>

Life is a container: give it a size, put your content inside, and the board sits behind it. The grid follows the box, one cell every cellSize pixels, so cells stay square at any size. For a background behind the whole page, pass className="fixed inset-0 -z-10" and no children.

Demos

Phosphor

color takes any CSS color; here a phosphor cyan on a bg-slate-950 section, the look of an old terminal. The lattice and the glow follow the color.

Draw

With interactive, dragging with a mouse or a pen drops random clusters of live cells along the stroke, and the rules take it from there. Big cells (cellSize={24}) at half speed make it easy to follow. Touch never draws, so scrolling a page on a phone isn't disturbed.

Accessibility

The board is decoration: it's hidden from assistive tech and never takes the pointer unless you turn on interactive, and even then it only listens on its own box. With reduced motion it runs 30 generations before the first paint and shows that board, still, with no drawing. Live cells are drawn at full strength, so put headings on a plate (such as bg-background/85) or keep copy short and in text-foreground. Nothing flashes: each generation changes scattered small dots, and a reseed stirs one small patch, never the whole board.

FAQ

API Reference