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

PropTypeDefaultDescription
squareSizenumber4Size of each square in the grid
gridGapnumber6Gap between squares in the grid
flickerChancenumber0.3Probability of a square flickering
colorstring"rgb(0, 0, 0)"Color of the squares
widthnumber-Width of the canvas
heightnumber-Height of the canvas
classNamestring-Additional CSS classes for the canvas
maxOpacitynumber0.2Maximum opacity of the squares