Browse components
Grid Distortion
An image on a grid of tiles that smear along with the cursor and ease back into place.
Grid Distortion
Installation
npx shadcn@latest add @glint-ui/grid-distortionFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/grid-distortion.json
Usage
import { GridDistortion } from "@/components/ui/grid-distortion";
<div className="relative h-96">
<GridDistortion imageSrc="/photo.jpg" grid={15} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| imageSrc | string | "https://picsum.photos/seed/glint-1/1600/1000" | Image URL (must allow CORS). |
| grid | number | 15 | Grid cells per side. |
| mouseRadius | number | 0.18 | Cursor influence radius (fraction of height). |
| strength | number | 1 | How far cells get dragged. |
| relaxation | number | 0.92 | Easing back to rest; higher is slower. |
| className | string | — | Extra classes for the root element. |