Kinetic Glass Grid
A physical, reactive glass grid that elevates and glows intelligently based on cursor proximity, using complex distance-based spring physics.
Component Showcase
Kinetic Glass Grid
A physical, reactive glass grid that elevates and glows intelligently based on cursor proximity, using complex distance-based spring physics.
Framer MotionPhysicsGlassmorphismInteractive Grid
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.
gridSize
Row/column size of the grid layout (e.g. 8 yields 64 glass tiles).
maxDistance
Radius in pixels for proximity tracking to elevate tiles.
primaryColor
Hover glowing shadow color on tiles.
accentColor
Color of central dots inside hovered tiles.
bg
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. |