Skip to main content
An animated SVG grid pattern that creates a dynamic background effect with randomly appearing and fading squares.

​
Installation

    ​
    Usage

    import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern"

export default function Example() {
  return (
    <div className="relative h-[500px] w-full overflow-hidden">
      <AnimatedGridPattern />
    </div>
  )
}

    ​
    Props

    PropTypeDefaultDescription
    classNamestring-Additional classes to be added to the pattern
    widthnumber40Width of each grid cell
    heightnumber40Height of each grid cell
    xnumber-1X offset of the pattern
    ynumber-1Y offset of the pattern
    strokeDasharraynumber0Stroke dash array of the grid lines
    numSquaresnumber50Number of animated squares in the pattern
    maxOpacitynumber0.5Maximum opacity of the animated squares
    durationnumber4Duration of the fade animation in seconds
    repeatDelaynumber0.5Delay before repeating the animation in seconds
    The component automatically adapts to the size of its container using ResizeObserver.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us