Glass Slices
An interactive WebGL component splitting media into vertical glass slices that dynamically tilt, compress, and refract based on cursor proximity.
Last Modified:Aug 17, 2026
Install
CLI
glass-slices
Or install a specific demo variant:
glass-slices-image
Or install a specific demo variant:
glass-slices-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. |
slices | number | 24 | Number of vertical glass slices to split the image into. |
hoverRadius | number | 0.25 | Radius of the hover wave (normalized 0.0 to 1.0). |
minSliceWidth | number | 0.55 | How compressed/tilted the slice gets at the peak of the wave (0.0 to 1.0). |
shiftY | number | 0.1 | How far the slice shifts down on the Y-axis when hovered. |
imageZoom | number | 1.15 | How much the image internally zooms in when the slice tilts (refraction effect). |
mouseLerpSpeed | number | 3.0 | Fluidity of the mouse tracking. Lower = heavier/slower drag. |
enterLeaveSpeed | number | 2.0 | Speed at which the effect fades in/out when entering/leaving. |
fallback | React.ReactNode | null | Optional fallback UI rendered via Suspense while media loads. |
className | string | undefined | Standard React classNames for the container wrapper. |