React Squares Background

Interactive animated grid patterns that respond to movement and hover. Build dynamic React geometric backgrounds with canvas rendering, directional flow, hover effects, and TypeScript support for Next.js applications with shadcn/ui.

React

Canvas API

Mouse Events

Building interactive geometric interfaces?

Join our Discord community for help from other developers.

Static grids are everywhere. Lifeless, predictable, obviously digital. But what if your grid could flow? Respond to users? This React component creates animated square grids that move with purpose and react to hover with subtle highlights, turning geometric patterns into living, breathing interfaces.

Interactive flowing square grids

Watch animated squares flow with directional movement and responsive hover effects:

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

Built for React applications with TypeScript and Next.js. Uses HTML5 Canvas with requestAnimationFrame for smooth 60fps grid animation. Five directional modes create flowing patterns that suggest movement and progress. Hover detection highlights squares with customizable fill colors. Perfect for hero sections, loading screens, or any interface that needs geometric sophistication.

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

Usage

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

export default function GeometricHero() {
  return (
    <div className="relative h-screen w-full overflow-hidden">
      {/* Animated squares background */}
      <Squares
        direction="diagonal"
        speed={0.5}
        squareSize={40}
        borderColor="rgba(0, 0, 0, 0.1)"
        hoverFillColor="rgba(59, 130, 246, 0.1)"
        className="absolute inset-0"
      />
      
      {/* Your content */}
      <div className="relative z-10 flex items-center justify-center h-full">
        <div className="text-center">
          <h1 className="text-6xl font-bold mb-4">
            Precision in Motion
          </h1>
          <p className="text-xl opacity-80">
            Where geometry meets interactivity
          </p>
        </div>
      </div>
    </div>
  );
}

Why most grid animations look mechanical

Most developers use CSS transforms with rigid keyframes—grids that move in perfect, predictable patterns. Others try CSS Grid with transitions, but it's choppy and limited to simple effects. Some use SVG animations, but they lack the smooth responsiveness of real interaction.

This React component uses Canvas with requestAnimationFrame for buttery smooth 60fps animation. Five directional modes (right, left, up, down, diagonal) create natural flow patterns. Hover detection is pixel-precise, highlighting exactly where your cursor touches. Speed control lets you dial in the perfect rhythm—from meditative slow motion to energetic fast flow.

Features

Five directional flow modes creating natural movement patterns (right, left, up, down, diagonal)
Pixel-precise hover detection highlighting squares exactly where cursor or touch interacts
Canvas-based rendering providing smooth 60fps animation with hardware acceleration
Adjustable speed control from static (0) to fast flow (2+) for different energy levels
Customizable grid parameters with configurable square size, border colors, and hover fills
Responsive container adaptation automatically adjusting to window and container changes
Touch-friendly interactions supporting both mouse hover and mobile touch events
Performance optimized using efficient canvas operations and memory management
TypeScript definitions for all directional, styling, and interaction parameters
shadcn/ui compatible with theme-aware colors and proper layering support

Examples

Moving Grid

Directional flow with brand colors for cohesive design integration:

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

API Reference

Squares

Main component for interactive canvas-based animated square grids.

Prop	Type	Default	Description
`direction`	`"right" \| "left" \| "up" \| "down" \| "diagonal"`	`"right"`	Flow direction of the animated grid pattern
`speed`	`number`	`1`	Animation speed (0=static, 0.5=slow, 2=fast)
`borderColor`	`string`	`"#333"`	Grid line color (hex, rgba, or CSS colors)
`squareSize`	`number`	`40`	Square dimensions in pixels (20-80 recommended)
`hoverFillColor`	`string`	`"#222"`	Fill color for hovered squares (rgba recommended)
`className`	`string`	-	Additional CSS classes for the canvas element

Direction Flow Patterns

Each direction creates distinct visual movement:

// Horizontal flow (most common)
direction="right"  // Suggests progress, forward momentum
direction="left"   // Suggests reverse, rewind, or going back

// Vertical flow
direction="up"     // Suggests growth, elevation, rising
direction="down"   // Suggests descent, depth, grounding

// Diagonal flow
direction="diagonal" // Suggests dynamism, energy, change

Speed and Rhythm Guidelines

// Static display (no animation)
speed={0}

// Slow meditative flow
speed={0.3} // Calm, contemplative interfaces

// Standard smooth flow
speed={1}   // Default, balanced movement

// Energetic fast flow
speed={2}   // Dynamic, high-energy interfaces

Color Customization Examples

// Subtle monochrome
borderColor="rgba(0, 0, 0, 0.1)" hoverFillColor="rgba(0, 0, 0, 0.05)"

// Brand blue theme
borderColor="rgba(59, 130, 246, 0.2)" hoverFillColor="rgba(59, 130, 246, 0.1)"

// Dark theme
borderColor="rgba(255, 255, 255, 0.1)" hoverFillColor="rgba(255, 255, 255, 0.05)"

// High contrast accent
borderColor="#333" hoverFillColor="rgba(255, 215, 0, 0.2)" // Gold highlights

Common gotchas

Canvas sizing and responsiveness: The canvas adapts to container size. Very large containers create many squares, impacting performance. Consider using larger squareSize for better performance on big screens.

Hover detection precision: Hover effects work pixel-perfectly but require the canvas to be properly sized. If hover seems "off," check that the canvas dimensions match the container.

Mobile touch interactions: Touch events work but don't have the same "hover" behavior as mouse. Touched squares will highlight but won't unhighlight until touched elsewhere.

Speed and frame rate: Very high speeds (3+) might cause frame drops on older devices. Test performance on your target hardware and adjust speed accordingly.

Color format consistency: Use rgba() values for hover colors to control opacity. Hex colors without opacity might create harsh visual jumps.

Z-index content layering: Canvas renders behind content by default. If your content disappears, ensure it has relative z-10 or higher positioning.

Explore other interactive and geometric background components for React applications:

Interactive flowing square grids

Installation

Usage

Why most grid animations look mechanical

Features

Examples

Moving Grid

API Reference

Squares

Direction Flow Patterns

Speed and Rhythm Guidelines

Color Customization Examples

Common gotchas

You might also like

Background Boxes

Grid Pattern

Interactive Grid Pattern

Hexagon Background

Flickering Grid

Retro Grid

Questions developers actually ask

On this page

React Squares Background