Docs

Grid Beams

A dynamic grid background with animated light beams that create stunning visual effects with customizable rays and grid patterns.

Grid BEAMS

Installation

Usage

import { GridBeams } from "@/components/magicui/grid-beams";

<GridBeams>
  <div className="flex h-96 items-center justify-center">
    <h2 className="text-2xl font-bold text-white">Grid Beams Effect</h2>
  </div>
</GridBeams>

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content to display over the grid beams effect
`gridSize`	`number`	`40`	Size of each grid cell in pixels
`gridColor`	`string`	`"rgba(200, 220, 255, 0.2)"`	Color of the grid lines (CSS color value)
`rayCount`	`number`	`15`	Number of animated light rays
`rayOpacity`	`number`	`0.35`	Opacity of the light rays (0-1)
`raySpeed`	`number`	`1`	Speed multiplier for ray animations
`rayLength`	`string`	`"45vh"`	Length of the light rays (CSS length value)
`gridFadeStart`	`number`	`30`	Start percentage for grid fade effect
`gridFadeEnd`	`number`	`90`	End percentage for grid fade effect
`backgroundColor`	`string`	`"#020412"`	Background color of the component
`className`	`string`	-	Additional CSS classes

Interactive Grid Pattern

Contribute