Square Pattern

May 1, 2026

An interactive grid background where squares randomly light up with colorful accents and react to hover.

Installation

Pro components require registry authentication. Add your Unlumen UI Pro key as UNLUMEN_LICENSE_KEY in your .env.local file and follow the setup guide.

File Structure

square-pattern.tsx

Usage

import SquarePattern from "@/components/unlumen-ui/square-pattern";

export default function Example() {
  return (
    <div className="relative w-full h-64">
      <SquarePattern className="absolute inset-0" gridSize={10} />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`className?`	`string`	-	Additional classes applied to the root grid element.
`gridSize?`	`number`	`10`	Number of columns (and rows) in the square grid.
`minDelay?`	`number`	`0`	Minimum delay before a square activates in each cycle (ms).
`maxDelay?`	`number`	`5500`	Maximum delay before a square activates in each cycle (ms).
`minDuration?`	`number`	`500`	Minimum duration a square stays lit (ms).
`maxDuration?`	`number`	`1500`	Maximum duration a square stays lit (ms).
`fadeDuration?`	`number`	`1000`	Transition duration for the color fade-out when a square deactivates (ms).

Credits

Built by leo.

Keep in mind

Most components on this site are inspired by or recreated from existing work across the web. I'm not here to take credit; just to learn, experiment, and sometimes push things a bit further. If something looks familiar and I forgot to mention you, reach out and I'll fix that right away.