BricksLab Catalog

@brickslab/ui-web

Grid lines moving downward creating a continuous flow effect

Flow Grid

Props

Prop	Type	Défaut	Requis	Description
`size`	`number`	`40`	—	Grid cell size in pixels
`strokeWidth`	`number`	`1`	—	Width of grid lines
`speed`	`number`	`8`	—	Animation speed in seconds
`color`	`string`	`"rgba(255, 255, 255, 0.1)"`	—	Color of the grid lines

Usage

tsx

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

export function MyComponent() {
  return (
    <div className="relative w-full h-screen bg-black">
      <AnimatedGridPattern size={40} strokeWidth={1} speed={8} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">Flow Grid</h1>
      </div>
    </div>
  );
}

Variations

Fine Grid with Fast Movement

Fast Flow

Thick Lines Slow Movement

Slow Flow