Proximity Glass Grid
A physical, reactive glass grid that elevates and glows intelligently based on cursor proximity, using complex distance-based spring physics.
Component Showcase
Interactive Playground
Adjust sliders and values to preview changes in real-time
title
Optional title header to render in top left corner.
eyebrow
Optional smaller eyebrow label placed above the title.
gridSize8
Row/column size of the grid layout (e.g. 8 yields 64 glass tiles).
maxDistance250
Radius in pixels for proximity tracking to elevate tiles.
primaryColor#ff5c71
Hover glowing shadow color on tiles.
accentColor#7fff5e
Color of central dots inside hovered tiles.
bg#050505
Hex background color of the grid canvas.
API Reference (Props)
Component properties and type specifications
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "" | Optional title header to render in top left corner. |
| eyebrow | string | "" | Optional smaller eyebrow label placed above the title. |
| gridSize | number | 8 | Row/column size of the grid layout (e.g. 8 yields 64 glass tiles). |
| maxDistance | number | 250 | Radius in pixels for proximity tracking to elevate tiles. |
| primaryColor | string | "#ff5c71" | Hover glowing shadow color on tiles. |
| accentColor | string | "#7fff5e" | Color of central dots inside hovered tiles. |
| bg | string | "#050505" | Hex background color of the grid canvas. |