GridBeam
A moving beam that travels across a grid background. Perfect for feature cards, hero sections, or CTA blocks that need a dynamic, tech-forward feel.
import { GridBeam } from "@animui/ui"Basic
Wrap any content with GridBeam to place it on an animated grid.
Hello, GridBeam
Custom beam color
Use beamColor to change the gradient color of the animated beam.
Pink Beam
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content rendered above the grid. |
cellSize | number | 40 | Size of each grid cell in pixels. |
beamColor | string | "#7c3aed" | Color of the animated beam. |
gridColor | string | "rgba(99,102,241,0.12)" | Color of the grid lines. |
className | string | — | Additional classes for the container. |