Skip to main content
A flickering grid background made with Canvas, fully customizable using Tailwind CSS. This component creates an animated grid pattern with randomized flickering effects.

Props

Prop NameTypeDefaultDescription
squareSizenumber4Size of each square in the grid.
gridGapnumber6Gap between squares in the grid.
flickerChancenumber0.3Probability of a square flickering.
colorstringrgb(0, 0, 0)Color of the squares.
widthnumber-Width of the canvas.
heightnumber-Height of the canvas.
classstring-Additional CSS classes for the canvas.
maxOpacitynumber0.2Maximum opacity of the squares.

Credits

Build docs developers (and LLMs) love