Flickering Grid

Component 548

About

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

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Flickering Grid to your project and fits it to your theme.

Code

How Flickering Grid is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { FlickeringGrid } from "@/components/ui/flickering-grid";

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