Components
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
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>
)
}