Flickering Grid

A field of small squares that flicker at random, drawn on a canvas.

Flickering Grid

Installation#

pnpm dlx shadcn@latest add @balick/flickering-grid

Or pass the full URL: https://ui.balick.me/r/flickering-grid.json

Usage#

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

export function Hero() {
  return (
    <section className="relative overflow-hidden">
      <FlickeringGrid className="[mask-image:linear-gradient(to_bottom,white,transparent)]" />
      <h1 className="relative">Ship faster</h1>
    </section>
  )
}

Props#

Prop	Type	Default	Description
`squareSize` Side of a square, in pixels.	`number`	4	Side of a square, in pixels.
`gap` Space between two squares, in pixels.	`number`	6	Space between two squares, in pixels.
`flickerChance` Share of the squares that change in one second, from 0 to 1.	`number`	0.3	Share of the squares that change in one second, from 0 to 1.
`maxOpacity` Opacity of the brightest square, from 0 to 1.	`number`	0.3	Opacity of the brightest square, from 0 to 1.