A customizable animated grid background component for React, allowing control over grid size, line color, thickness, and animation duration.

Overview

The GridLines Background component provides a flexible and customizable animated grid background. It supports various customization options such as grid size, line color, thickness, and animation speed, making it ideal for modern UI designs.

The component is built using Framer Motion, a production-ready motion library for React. It is easy to integrate into any React application and provides a visually appealing background effect that can enhance the overall user experience.

Preview

Usage

'use client'
 
import { GridLinesBackground } from '@/components/background/grid-lines-background'
 
<div className="relative h-[496px] w-full overflow-hidden rounded-lg border bg-background">
  <GridLinesBackground />
</div>

Code

'use client'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface GridLinesBackgroundProps {
  gridSize?: number
  lineColor?: string
  lineSize?: number
  duration?: number
  className?: string
}
 
export const GridLinesBackground = ({
  gridSize = 40,
  lineColor = 'rgba(255,255,255,0.1)',
  lineSize = 1,
  duration = 4,
  className,
}: GridLinesBackgroundProps) => {
  return (
    <div className={cn('absolute inset-0 bg-slate-900', className)}>
      <motion.div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            linear-gradient(to right, ${lineColor} ${lineSize}px, transparent ${lineSize}px),
            linear-gradient(to bottom, ${lineColor} ${lineSize}px, transparent ${lineSize}px)
          `,
          backgroundSize: `${gridSize}px ${gridSize}px`,
          willChange: 'background-position',
        }}
        animate={{
          backgroundPosition: [`0px 0px`, `${gridSize}px ${gridSize}px`],
        }}
        transition={{
          duration: duration,
          repeat: Infinity,
          ease: 'linear',
        }}
      />
    </div>
  )
}

Props

Prop	Type	Default
`gridSize`	`number`	`40`
`lineColor`	`string`	`'rgba(255,255,255,0.1)'`
`lineSize`	`number`	`1`
`duration`	`number`	`4`
`className`	`string`	-

Grid Lines Background

Overview

Preview

Usage

Code

Props

On this page