BricksLab Catalog

@brickslab/ui-web

Perspective 3D synthwave-style grid with perspective zoom animation and optional glow

Synthwave

Props

Prop	Type	Défaut	Requis	Description
`perspective`	`number`	`1200`	—	3D perspective distance
`lineThickness`	`number`	`1`	—	Width of grid lines
`glow`	`boolean`	`false`	—	Apply glowing effect to lines
`speed`	`number`	`8`	—	Animation speed in seconds

Usage

tsx

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

export function MyComponent() {
  return (
    <div className="relative w-full h-screen bg-black">
      <RetroGrid perspective={1200} lineThickness={1} glow speed={8} />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">Synthwave Grid</h1>
      </div>
    </div>
  );
}

Variations

No Glow Effect

Clean Retro

Close Perspective

Close View