184 Components
Moving Grid Lines
BackgroundsArchitectural grid matrix surface featuring randomized kinetic light beams gliding along orthogonal horizontal and vertical tracks.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:clsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/moving-grid-lines.json"
Props
TypeScript props supported by <MovingGridLines />.
| Prop | Type | Default | Description |
|---|---|---|---|
| gridSize | number | 64 | Size of each square grid cell in pixels. |
| beamCount | number | 8 | Number of concurrent moving light beams. |
| beamLength | number | 160 | Length of the glowing beam trail in pixels. |
| speed | number | 1.5 | Speed multiplier for traveling beams. |
| radialMask | boolean | true | Whether to apply a radial vignette mask fading edges to transparency. |
| gridColor | string | undefined | Explicit grid line color. Defaults to adaptive theme color. |
| beamColor | string | undefined | Explicit beam glow color. Defaults to adaptive theme color. |
Key Features
- GPU-composited canvas grid matrix with zero DOM overhead and continuous 60fps frame rate.
- Orthogonal beam physics: light pulses travel along precise grid tracks with glowing gradient tails and head sparks.
- Adaptive color rendering responding dynamically to light and dark mode changes.
- Respects prefers-reduced-motion by pausing moving beams while retaining the architectural grid.
Keyboard & Accessibility
- Underlying canvas is marked aria-hidden='true' to prevent interference with screen readers.
- Motion automatically disables when prefers-reduced-motion is active.
- Designed with high contrast compatibility for text and foreground elements.