Fractal Glass Hover
A hero image seen through vertical fluted glass: a WebGL shader slices it into ~35 refracted stripes, then eased cursor movement drives a subtle parallax that pushes harder where the distortion is strongest, so the surface reads like real ribbed glass reacting to the pointer.
npx shadcn@latest add https://ui.aryank.space/r/fractal-glass-hover.jsonInstalls from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.
| Prop | Type | Default | Description |
|---|---|---|---|
| imgSrc | string | BLANK-hosted JPG | Image refracted through the glass. |
| stripesFrequency / glassStrength / glassSmoothness | number | 35 / 2.0 / 0.0001 | Flute count, refraction strength, and edge softness. |
| parallaxStrength / distortionMultiplier / lerpFactor | number | 0.1 / 10 / 0.035 | Cursor parallax amount, distortion weighting, and easing. |
stripesFrequency / glassStrengthtupleNumber of flutes and refraction strength.
parallaxStrength / lerpFactortupleCursor parallax amount and easing.
three