FlickeringGrid
flickering-gridAnimates random grid-cell opacity to create a flickering technical backdrop.
Usage
Basic usage
Put it into the relative + overflow-hidden container and fill it with absolute inset-0; the theme foreground color is used by default, and the 4px squares flash randomly.
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<FlickeringGrid className="absolute inset-0" />
</div>Custom color
color supports the CSS variable, passing the highlighted color token and raising the maxOpacity to make the grid more eye-catching.
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<FlickeringGrid className="absolute inset-0" color="var(--color-primary)" maxOpacity={0.5} />
</div>Square size and spacing
squareSize / gridGap determines the grid density, increase the grid + reduce flickerChance to get a steady large grid flash.
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<FlickeringGrid
className="absolute inset-0"
squareSize={8}
gridGap={4}
flickerChance={0.1}
maxOpacity={0.4}
/>
</div>High frequency intensive flashing
Small square + high flickerChance simulates data flow/cyber texture.
<div className="relative h-48 w-80 overflow-hidden rounded-xl border border-border bg-surface">
<FlickeringGrid
className="absolute inset-0"
squareSize={2}
gridGap={2}
flickerChance={0.7}
maxOpacity={0.25}
/>
</div>When to Use
Use it when you need a pixel grid background with a sense of technology/data, and the grid randomly flashes on and off. Based on Canvas, it comes with a ResizeObserver that follows the container size; if you want a static regular grid (no flickering, lighter), use GridPattern; if you want a dot matrix, use DotPattern; if you want a retro perspective grid, use RetroGrid.
Import
import { FlickeringGrid } from "@hulianui/ui"Props
Inherits HTMLAttributes<HTMLDivElement>, additionally:
| Name | Type | Default | Description |
|---|---|---|---|
| squareSize | number | 4 | Side length of each square (px), the smaller, the denser |
| gridGap | number | 6 | Square spacing (px) |
| flickerChance | number | 0.3 | Flash probability per frame per frame (multiplied by deltaTime). 0=static mesh, 1=high frequency flashing |
| maxOpacity | number | 0.3 | Maximum opacity of the grid (0~1), the higher the value, the more obvious |
| color | string | --color-foreground | Square color; accepts any CSS color. When omitted, RGB is derived from the container's color value or token and follows the active theme. |
| width | number | — | Fixed width (px). Do not pass ResizeObserver to follow the container width |
| height | number | — | Fixed height (px). Do not pass ResizeObserver to follow the height of the container |
Usage Guidelines
- Based on Canvas, client rendering is required; the parent container needs
relative+overflow-hidden, and the component itself is filled withabsolute inset-0. - When
widthorheightis omitted, a ResizeObserver tracks the container. Ensure the container has measurable dimensions and its height does not collapse to 0. colorcan passvar(--color-*), and the component will getComputedStyle parsed frame by frame (different from Particles that only eat rgb), but there is a small cost for parsing each frame.
Related
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-48 w-80 overflow-hidden rounded-xl">
<FlickeringGrid
className="absolute inset-0"
squareSize={4}
gridGap={6}
flickerChance={0.3}
maxOpacity={0.3}
/>
</div>