Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Flickering Grid

Flickering Grid

A flickering grid background made with SVGs, fully customizable using Tailwind CSS.

Installation

npx shadcn@latest add "https://magicui.design/r/flickering-grid"

Examples

Rounded

Props

PropTypeDescriptionDefault
squareSizenumberSize of each square in the grid4
gridGapnumberGap between squares in the grid6
flickerChancenumberProbability of a square flickering0.3
colorstringColor of the squares"rgb(0, 0, 0)"
widthnumberWidth of the canvas-
heightnumberHeight of the canvas-
classNamestringAdditional CSS classes for the canvas-
maxOpacitynumberMaximum opacity of the squares0.2