Squares

Interactive animated grid patterns with hover effects and directional movement. Perfect for React applications requiring geometric backgrounds with Next.js integration and TypeScript support.

Canvas API

Loading component...

'use client';import { useRef, useEffect, useState } from "react"import { cn } from "@/lib/utils"export interface SquaresProps {  direction?: "right" | "left" | "up" | "down" | "diagonal"  speed?: number  borderColor?: string  squareSize?: number  hoverFillColor?: string  className?: string}export function Squares({  direction = "right",  speed = 1,  borderColor = "#333",  squareSize = 40,  hoverFillColor = "#222",  className,}: SquaresProps) {  const canvasRef = useRef<HTMLCanvasElement>(null)  const requestRef = useRef<number>(0)  const numSquaresX = useRef<number>(0)  const numSquaresY = useRef<number>(0)  const gridOffset = useRef({ x: 0, y: 0 })  const [hoveredSquare, setHoveredSquare] = useState<{    x: number    y: number  } | null>(null)  useEffect(() => {    const canvas = canvasRef.current    if (!canvas) return    const ctx = canvas.getContext("2d")    if (!ctx) return    // Set canvas background to white for better visibility    canvas.style.background = "white"    const resizeCanvas = () => {      canvas.width = canvas.offsetWidth      canvas.height = canvas.offsetHeight      numSquaresX.current = Math.ceil(canvas.width / squareSize) + 1      numSquaresY.current = Math.ceil(canvas.height / squareSize) + 1    }    window.addEventListener("resize", resizeCanvas)    resizeCanvas()    const drawGrid = () => {      ctx.clearRect(0, 0, canvas.width, canvas.height)      const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize      const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize      ctx.lineWidth = 0.5      for (let x = startX; x < canvas.width + squareSize; x += squareSize) {        for (let y = startY; y < canvas.height + squareSize; y += squareSize) {          const squareX = x - (gridOffset.current.x % squareSize)          const squareY = y - (gridOffset.current.y % squareSize)          if (            hoveredSquare &&            Math.floor((x - startX) / squareSize) === hoveredSquare.x &&            Math.floor((y - startY) / squareSize) === hoveredSquare.y          ) {            ctx.fillStyle = hoverFillColor            ctx.fillRect(squareX, squareY, squareSize, squareSize)          }          ctx.strokeStyle = borderColor          ctx.strokeRect(squareX, squareY, squareSize, squareSize)        }      }      // Create subtle gradient overlay      const gradient = ctx.createRadialGradient(        canvas.width / 2,        canvas.height / 2,        0,        canvas.width / 2,        canvas.height / 2,        Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2)) / 2,      )      gradient.addColorStop(0, "rgba(255, 255, 255, 0)")      gradient.addColorStop(1, "rgba(255, 255, 255, 0.8)")      ctx.fillStyle = gradient      ctx.fillRect(0, 0, canvas.width, canvas.height)    }    const updateAnimation = () => {      const effectiveSpeed = Math.max(speed, 0.1)      switch (direction) {        case "right":          gridOffset.current.x =            (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize          break        case "left":          gridOffset.current.x =            (gridOffset.current.x + effectiveSpeed + squareSize) % squareSize          break        case "up":          gridOffset.current.y =            (gridOffset.current.y + effectiveSpeed + squareSize) % squareSize          break        case "down":          gridOffset.current.y =            (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize          break        case "diagonal":          gridOffset.current.x =            (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize          gridOffset.current.y =            (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize          break      }      drawGrid()      requestRef.current = requestAnimationFrame(updateAnimation)    }    const handleMouseMove = (event: MouseEvent) => {      const rect = canvas.getBoundingClientRect()      const mouseX = event.clientX - rect.left      const mouseY = event.clientY - rect.top      const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize      const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize      const hoveredSquareX = Math.floor(        (mouseX + gridOffset.current.x - startX) / squareSize,      )      const hoveredSquareY = Math.floor(        (mouseY + gridOffset.current.y - startY) / squareSize,      )      setHoveredSquare({ x: hoveredSquareX, y: hoveredSquareY })    }    const handleMouseLeave = () => {      setHoveredSquare(null)    }    // Event listeners    window.addEventListener("resize", resizeCanvas)    canvas.addEventListener("mousemove", handleMouseMove)    canvas.addEventListener("mouseleave", handleMouseLeave)    // Initial setup    resizeCanvas()    requestRef.current = requestAnimationFrame(updateAnimation)    // Cleanup    return () => {      window.removeEventListener("resize", resizeCanvas)      canvas.removeEventListener("mousemove", handleMouseMove)      canvas.removeEventListener("mouseleave", handleMouseLeave)      if (requestRef.current) {        cancelAnimationFrame(requestRef.current)      }    }  }, [direction, speed, borderColor, hoverFillColor, hoveredSquare, squareSize])  return (    <canvas      ref={canvasRef}      className={cn("w-full h-full border-none block", className)}    />  )}

Installation

npx shadcn@latest add https://www.shadcn.io/registry/squares-background.json

npx shadcn@latest add https://www.shadcn.io/registry/squares-background.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/squares-background.json

bunx shadcn@latest add https://www.shadcn.io/registry/squares-background.json

Features

Multi-directional animation with smooth scrolling in right, left, up, down, or diagonal directions
Interactive hover effects highlighting squares on mouse movement with customizable fill colors
Adjustable speed control from subtle slow motion to dynamic fast animations
Customizable grid styling configuring square size, border colors, and hover effects
Canvas-based rendering using efficient HTML5 Canvas with requestAnimationFrame optimization
Responsive adaptation automatically adjusting to container dimensions and window resize
Touch-friendly interaction supporting both desktop mouse and mobile touch events
TypeScript support with complete interface definitions for reliable integration

Examples

Moving Grid

Loading component...

'use client';import { useRef, useEffect, useState } from "react"import { cn } from "@/lib/utils"export interface SquaresProps {  direction?: "right" | "left" | "up" | "down" | "diagonal"  speed?: number  borderColor?: string  squareSize?: number  hoverFillColor?: string  className?: string}export function Squares({  direction = "right",  speed = 1,  borderColor = "#333",  squareSize = 40,  hoverFillColor = "#222",  className,}: SquaresProps) {  const canvasRef = useRef<HTMLCanvasElement>(null)  const requestRef = useRef<number>(0)  const numSquaresX = useRef<number>(0)  const numSquaresY = useRef<number>(0)  const gridOffset = useRef({ x: 0, y: 0 })  const [hoveredSquare, setHoveredSquare] = useState<{    x: number    y: number  } | null>(null)  useEffect(() => {    const canvas = canvasRef.current    if (!canvas) return    const ctx = canvas.getContext("2d")    if (!ctx) return    // Set canvas background to white for better visibility    canvas.style.background = "white"    const resizeCanvas = () => {      canvas.width = canvas.offsetWidth      canvas.height = canvas.offsetHeight      numSquaresX.current = Math.ceil(canvas.width / squareSize) + 1      numSquaresY.current = Math.ceil(canvas.height / squareSize) + 1    }    window.addEventListener("resize", resizeCanvas)    resizeCanvas()    const drawGrid = () => {      ctx.clearRect(0, 0, canvas.width, canvas.height)      const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize      const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize      ctx.lineWidth = 0.5      for (let x = startX; x < canvas.width + squareSize; x += squareSize) {        for (let y = startY; y < canvas.height + squareSize; y += squareSize) {          const squareX = x - (gridOffset.current.x % squareSize)          const squareY = y - (gridOffset.current.y % squareSize)          if (            hoveredSquare &&            Math.floor((x - startX) / squareSize) === hoveredSquare.x &&            Math.floor((y - startY) / squareSize) === hoveredSquare.y          ) {            ctx.fillStyle = hoverFillColor            ctx.fillRect(squareX, squareY, squareSize, squareSize)          }          ctx.strokeStyle = borderColor          ctx.strokeRect(squareX, squareY, squareSize, squareSize)        }      }      // Create subtle gradient overlay      const gradient = ctx.createRadialGradient(        canvas.width / 2,        canvas.height / 2,        0,        canvas.width / 2,        canvas.height / 2,        Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2)) / 2,      )      gradient.addColorStop(0, "rgba(255, 255, 255, 0)")      gradient.addColorStop(1, "rgba(255, 255, 255, 0.8)")      ctx.fillStyle = gradient      ctx.fillRect(0, 0, canvas.width, canvas.height)    }    const updateAnimation = () => {      const effectiveSpeed = Math.max(speed, 0.1)      switch (direction) {        case "right":          gridOffset.current.x =            (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize          break        case "left":          gridOffset.current.x =            (gridOffset.current.x + effectiveSpeed + squareSize) % squareSize          break        case "up":          gridOffset.current.y =            (gridOffset.current.y + effectiveSpeed + squareSize) % squareSize          break        case "down":          gridOffset.current.y =            (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize          break        case "diagonal":          gridOffset.current.x =            (gridOffset.current.x - effectiveSpeed + squareSize) % squareSize          gridOffset.current.y =            (gridOffset.current.y - effectiveSpeed + squareSize) % squareSize          break      }      drawGrid()      requestRef.current = requestAnimationFrame(updateAnimation)    }    const handleMouseMove = (event: MouseEvent) => {      const rect = canvas.getBoundingClientRect()      const mouseX = event.clientX - rect.left      const mouseY = event.clientY - rect.top      const startX = Math.floor(gridOffset.current.x / squareSize) * squareSize      const startY = Math.floor(gridOffset.current.y / squareSize) * squareSize      const hoveredSquareX = Math.floor(        (mouseX + gridOffset.current.x - startX) / squareSize,      )      const hoveredSquareY = Math.floor(        (mouseY + gridOffset.current.y - startY) / squareSize,      )      setHoveredSquare({ x: hoveredSquareX, y: hoveredSquareY })    }    const handleMouseLeave = () => {      setHoveredSquare(null)    }    // Event listeners    window.addEventListener("resize", resizeCanvas)    canvas.addEventListener("mousemove", handleMouseMove)    canvas.addEventListener("mouseleave", handleMouseLeave)    // Initial setup    resizeCanvas()    requestRef.current = requestAnimationFrame(updateAnimation)    // Cleanup    return () => {      window.removeEventListener("resize", resizeCanvas)      canvas.removeEventListener("mousemove", handleMouseMove)      canvas.removeEventListener("mouseleave", handleMouseLeave)      if (requestRef.current) {        cancelAnimationFrame(requestRef.current)      }    }  }, [direction, speed, borderColor, hoverFillColor, hoveredSquare, squareSize])  return (    <canvas      ref={canvasRef}      className={cn("w-full h-full border-none block", className)}    />  )}

Use Cases

This free open source React component works well for:

Hero section backgrounds - Geometric patterns for modern landing pages built with Next.js
Loading screens - Animated grids providing visual interest during data processing using TypeScript
Portfolio overlays - Subtle background animations for creative showcases
Dashboard interfaces - Professional grid patterns for admin panels using shadcn/ui design
Interactive galleries - Hover-responsive backgrounds for image and content displays
Brand experiences - Unique geometric animations expressing technical precision using Tailwind CSS

API Reference

Props

Prop	Type	Default	Description
`direction`	`"right" \| "left" \| "up" \| "down" \| "diagonal"`	`"right"`	Direction of grid movement
`speed`	`number`	`1`	Animation speed (higher = faster)
`borderColor`	`string`	`"#333"`	Color of the grid lines
`squareSize`	`number`	`40`	Size of each square in pixels
`hoverFillColor`	`string`	`"#222"`	Fill color when hovering over squares
`className`	`string`	-	Additional CSS classes for the canvas

Implementation Notes

Component uses HTML5 Canvas API with requestAnimationFrame for smooth 60fps animation
Grid automatically adapts to container dimensions and handles window resize events
Hover detection optimized for responsiveness across desktop mouse and mobile touch
Direction control supports five movement patterns: right, left, up, down, and diagonal
Speed parameter ranges from 0 (static) to 2+ (fast) for different animation intensities
Square size configurable from 20px (fine grid) to 80px+ (large grid) for visual density control
Color customization supports RGBA values for theme integration and opacity control
Compatible with shadcn/ui design system and Tailwind CSS utility classes for styling

Reactsquares-background

Reactsquares-background

On this page