Animated Grid Pattern

Component 433

About

A animated background grid pattern 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 Animated Grid Pattern to your project and fits it to your theme.

Code

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

Usage.tsx

import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern";
import { cn } from "@/lib/utils";

const settings = {
  numSquares: 30,
  maxOpacity: 0.1,
  width: 40,
  repeatDelay: 1,
  strokeDasharray: 0,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="relative flex h-screen w-screen items-center justify-center overflow-hidden bg-background">
      <AnimatedGridPattern
        numSquares={s.numSquares}
        maxOpacity={s.maxOpacity}
        width={s.width}
        duration={3}
        repeatDelay={s.repeatDelay}
        strokeDasharray={s.strokeDasharray}
        className={cn(
          "[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
          "inset-x-0 inset-y-[-30%] h-[200%] skew-y-12",
        )}
      />
    </div>
  );
}