Animated Grid

Heroes 49

About

A decorative, CSS-only animated grid background layer with a slow drift, layered accent glow, an optional radial fade mask, and built-in reduced-motion and high-contrast support.

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

Code

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

Usage.tsx

import { AnimatedGrid } from "@/components/ui/animated-grid";

export default function AnimatedGridDemo() {
  return (
    <div className="relative h-screen w-full overflow-hidden bg-background">
      <AnimatedGrid />
      <div className="relative z-10 flex h-full w-full flex-col items-center justify-center gap-2 text-center">
        <h1 className="text-4xl font-semibold tracking-tight text-foreground">
          Build faster.
        </h1>
        <p className="max-w-md text-muted-foreground">
          A CSS-only animated grid backdrop for heroes and section backgrounds.
        </p>
      </div>
    </div>
  );
}