A flickering grid background made with SVGs, fully customizable using Tailwind CSS.
1import { FlickeringGrid } from "@/components/magicui/flickering-grid";
2
3export function FlickeringGridDemo() {
4 return (
5 <div className="relative h-[500px] w-full overflow-hidden rounded-lg border bg-background">
6 <FlickeringGrid
7 className="absolute inset-0 z-0 size-full"
8 squareSize={4}
9 gridGap={6}
10 color="#6B7280"
11 maxOpacity={0.5}
12 flickerChance={0.1}
13 height={800}
14 width={800}
15 />
16 </div>
17 );
18}