Brickslab.Tools

@brickslab./ui-web

SVG grid cells with flicker animation and customizable cell size and color

Flickering Grid

Props

Prop	Type	Défaut	Requis	Description
`cellSize`	`number`	`50`	—	Size of each grid cell in pixels
`color`	`string`	`"rgba(255, 255, 255, 0.1)"`	—	Color of the grid cells
`flickerRate`	`number`	`0.5`	—	Speed of the flicker animation (lower = faster)
`rounded`	`boolean`	`false`	—	Apply border-radius to cells
`opacity`	`number`	`0.5`	—	Opacity of the grid (0-1)

Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  cellSize={50}
  color="rgba(255, 255, 255, 0.1)"
  flickerRate={0.5}
  rounded={false}
  opacity={0.5}
/>

cellSizecolorflickerRateroundedopacity

Usage

tsx

import { FlickeringGrid } from "@brickslab./ui-web";

export function MyComponent() {
  return (
    <div className="relative w-full h-screen">
      <FlickeringGrid cellSize={50} color="rgba(255, 255, 255, 0.1)" />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">Flickering Grid</h1>
      </div>
    </div>
  );
}

Variations

Small Cell Size

Fine Grid

Colored Flicker

Blue Grid