Flickering Grid

PreviewCode

@/demos/FlickeringGridDemo.tsx

import { FlickeringGrid } from '@/registry/magicui/flickering-grid'

export function FlickeringGridDemo() {
  return (
    <div class="
      relative h-125 w-full overflow-hidden rounded-lg border bg-background
    "
    >
      <FlickeringGrid
        class="absolute inset-0 z-0 size-full"
        squareSize={4}
        gridGap={6}
        color="#6B7280"
        maxOpacity={0.5}
        flickerChance={0.1}
        height={800}
        width={800}
      />
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/flickering-grid

bun

bunx shadcn@latest add @magicui-solid/flickering-grid

yarn

yarn dlx shadcn@latest add @magicui-solid/flickering-grid

npm

npx shadcn@latest add @magicui-solid/flickering-grid

Examples

Rounded

PreviewCode

@/demos/FlickeringGridRoundedDemo.tsx

import { FlickeringGrid } from '@/registry/magicui/flickering-grid'

export function FlickeringGridRoundedDemo() {
  return (
    <div class="
      relative size-150 w-full overflow-hidden rounded-lg border bg-background
    "
    >
      <FlickeringGrid
        class="
          relative inset-0 z-0
          mask-[radial-gradient(450px_circle_at_center,white,transparent)]
        "
        squareSize={4}
        gridGap={6}
        color="#60A5FA"
        maxOpacity={0.5}
        flickerChance={0.1}
        height={800}
        width={800}
      />
    </div>
  )
}

Usage

import { FlickeringGrid } from '@/components/magicui/flickering-grid'

<FlickeringGrid />

Props

Prop	Type	Default	Description
squareSize	number	4	Size of each square in the grid
gridGap	number	6	Gap between squares in the grid
flickerChance	number	0.3	Probability of a square flickering
color	string	"rgb(0, 0, 0)"	Color of the squares
width	number	-	Width of the canvas
height	number	-	Height of the canvas
class	string	-	Additional CSS classes for the canvas
maxOpacity	number	0.3	Maximum opacity of the squares

Original:

magicui.design/docs/components/flickering-grid