Square Pattern

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

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.