Proximity Grid
An interactive WebGL grid that zooms and rounds media cells dynamically based on cursor proximity.
Last Modified:Aug 17, 2026
Install
CLI
proximity-grid
Or install a specific demo variant:
proximity-grid-image
Or install a specific demo variant:
proximity-grid-video
Manual
1. Install Dependencies
Since this component leverages WebGL, you will need React Three Fiber and Three.js.
CLI Install
Note: The demos utilize @hugeicons/react and @hugeicons/core-free-icons for the loading fallback, but they are not strictly required for the core component.
2. Add Source Code
Props
| Prop | Type | Default | Description |
|---|---|---|---|
mediaUrl | string | — | The source URL of the media asset. |
mediaType | "image" | "video" | "image" | Defines the media type for correct texture processing. |
columns | number | 18 | Number of vertical grid columns. |
rows | number | 12 | Number of horizontal grid rows. |
hoverRadius | number | 4.0 | How many cells outward the ripple effect reaches. |
imageZoom | number | 1.25 | How much the image zooms in when the cell is hovered. |
cellRadius | number | 0.45 | Max border radius of a cell when hovered (0.0 to 0.5 relative to cell size). |
mouseLerpSpeed | number | 2.5 | Fluidity of the mouse tracking. Lower = heavier/slower drag. |
enterLeaveSpeed | number | 1.5 | Speed at which the effect fades in/out when entering/leaving the canvas. |
fallback | React.ReactNode | null | Optional fallback UI rendered via Suspense while media loads. |
className | string | undefined | Standard React classNames for the container wrapper. |