shadcn.io is not affiliated with official shadcn/ui
A grid of small squares that change brightness at random, a few at a time, like a wall of status lights. The squares are two small SVG patterns of different sizes laid over each other, so the grid never visibly repeats, and their groups step through opacities on keyframes the install adds to your stylesheet. Nothing runs in the browser.
Use it as a quiet texture behind dashboards, developer pages and heroes. For falling code instead, use Matrix; for dots that don't move, Dot Pattern; for traces with signals running along them, Circuit.
Installation
Usage
import { FlickeringGrid } from "@/components/ui/flickering-grid";Flickering Grid is a container: give it a size and put your content inside. The grid fills the box behind the content at any size.
<FlickeringGrid className="flex min-h-[420px] items-center justify-center">
<h1 className="text-5xl font-semibold">Every service, at a glance</h1>
</FlickeringGrid>For a backdrop behind the whole page, leave it empty and fix it under everything else:
<FlickeringGrid className="fixed inset-0 -z-10" />Demos
Status lights
cellColor takes any CSS colour, here a green on a dark card, and maxOpacity={0.5} lets the brightest squares glow more.
Bigger cells
squareSize={8} and gridGap={8} make larger squares on a wider pitch, and speed={2} changes them twice as often.
Accessibility
The grid is decorative: it's hidden from screen readers and lets every click through to your content. With reduced motion the grid holds still, a random speckle. Nothing flashes: each change touches a few scattered squares, well under any flash threshold, even at maxOpacity={1}. The squares use your foreground colour at up to 30% by default, so text on top stays readable; keep maxOpacity at 0.3 or less behind body text.
FAQ
How do I change the density?
squareSize and gridGap set the square and the gap in pixels (4 and 6 by default). The grid is built for those sizes when the page renders.
It flickers too fast or too slow. How do I adjust it?
speed sets how often squares change: at 1 each square changes about every three seconds, at 2 twice as often. maxOpacity caps the brightest square.
Can I change the colour?
cellColor takes any CSS colour. The default follows your theme's text colour, so the grid shows in light and dark; you can also set --flickering-grid-color from your own CSS.
Does it handle thousands of squares?
Yes: the squares are two small repeating SVG tiles, and only 32 groups of them change, each every few seconds. No script runs.
API Reference
FlickeringGrid
<div> data-slot="flickering-grid"
cellColor?string
The squares' colour, any CSS colour. @default "var(--foreground)".
gridGap?number
The gap between squares, in pixels. @default 6.
- Default
6
maxOpacity?number
How opaque the brightest square gets, from 0 to 1. Keep it at 0.3 or less behind body text.
- Default
0.3
speed?number
How often squares change, as a multiplier: 1 is about once every three seconds for each square, 2 twice as often.
- Default
1
squareSize?number
The side of one square, in pixels. @default 4.
- Default
4
render?ReactElement | ((props: object, state: object) => ReactElement)
Replace the host element or compose it with another component.
- Type
ReactElement | ((props: object, state: object) => ReactElement)
className?string
Merged with the part's classes.
--flickering-grid-colorstring
The squares' colour (var(--foreground)).
--flickering-grid-maxstring
The brightest a square gets (0.3).
--flickering-grid-speedstring
How often squares change, a multiplier (1).
Related
Falling code rain
Dot Pattern
GridsStatic dots
- Pro
Cells react to the pointer
Grid Pattern
GridsStatic lines
- Pro
Traces with signals
- Pro
Halftone Background
TextureDot texture
