Squares Background

A canvas-based animated grid background with interactive hover effects creates a dynamic grid pattern that moves in specified directions with smooth animations. Features: • Smooth canvas-based animations • Multiple movement directions (right, left, up, down, diagonal) • Interactive hover effects • Responsive design • Customizable grid properties • Radial gradient overlay • Performance optimized • Clean, minimal design

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

import { Squares } from "@/components/ui/squares-background"

export function SquaresDemo() {
  return (
    <div className="space-y-8">
      <div className="relative h-[400px] rounded-lg overflow-hidden bg-[#060606]">
        <Squares 
          direction="diagonal"
          speed={0.5}
          squareSize={40}
          borderColor="#333" 
          hoverFillColor="#222"
        />
      </div>
    </div>
  )
}