127 Components
Interactive Grid Beam
BackgroundsArchitectural matrix background surface with spring-smoothed radial cursor illumination and click-triggered orthogonal grid light beams.
Interactive Grid Matrix
Move cursor or click any intersection
Snaps orthogonal light beams to 32px coordinates.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/interactive-grid-beam.json"
Props
TypeScript props supported by <InteractiveGridBeam />.
| Prop | Type | Default | Description |
|---|---|---|---|
| gridSize | number | 32 | Width and height of each matrix cell in pixels. |
| glowRadius | number | 220 | Radius of the cursor-tracked radial grid illumination mask in pixels. |
| stiffness | number | 280 | Spring stiffness coefficient for cursor spotlight tracking. |
| damping | number | 26 | Spring damping coefficient for cursor spotlight tracking. |
Key Features
- Dual-layer CSS grid matrix revealed dynamically via Framer Motion useMotionTemplate mask-image.
- Snaps click coordinates to the nearest grid intersection and fires orthogonal horizontal and vertical light beams.
- Zero React re-renders during pointer movement.
Keyboard & Accessibility
- All background matrix layers and light beam traces are marked aria-hidden='true'.
- Disables orthogonal pulse animations when prefers-reduced-motion is active.
- Preserves high foreground readability with a translucent backdrop card.