Animated Beams Grid Background
A sleek animated grid background featuring beams of light for modern UIs and hero sections.
Installation
Install this component and its dependencies with a single command.
npx shadcn@latest add https://ui.voxletstudio.com//r/animated-beams-grid-background.jsonOnce your project registers the @voxlet namespace, this also works: npx shadcn@latest add @voxlet/animated-beams-grid-background
GridBeamsProps
| Prop | Type | Default | Description |
|---|---|---|---|
| beamColor | string | string[] | #ffffff | Color of the beams. Can be a single hex string or an array of multiple colors. |
| gridSize | number | 150 | Spacing between grid lines and points in pixels. |
| beamSize | number | 1.5 | Thickness of each animated beam. |
| beamDuration | number | 1 | Base duration (in seconds) for beams to animate across the grid. |
| showBeams | boolean | true | Toggle to enable or disable animated beams (grid and points still render). |