Skip to main content
A performant canvas-based flickering grid that creates a dynamic background effect with randomly animated squares.

​
Installation

    ​
    Usage

    import { FlickeringGrid } from "@/components/ui/flickering-grid"

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

    ​
    Rounded Squares

    import { FlickeringGrid } from "@/components/ui/flickering-grid"

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

    ​
    Props

    PropTypeDefaultDescription
    squareSizenumber4Size of each square in the grid (in pixels)
    gridGapnumber6Gap between squares in the grid (in pixels)
    flickerChancenumber0.3Probability of a square flickering (0-1)
    colorstring"rgb(0, 0, 0)"Color of the squares (any valid CSS color)
    widthnumber-Width of the canvas (auto-sizes to container if not set)
    heightnumber-Height of the canvas (auto-sizes to container if not set)
    classNamestring-Additional CSS classes for the canvas container
    maxOpacitynumber0.3Maximum opacity of the squares (0-1)
    This component uses canvas for optimal performance and automatically pauses animation when not in view using IntersectionObserver.
    Adjust flickerChance to control how frequently squares change - lower values create more subtle effects.

    Build docs developers (and LLMs) love

    Get started for freeTalk to us