An image that warps like heat haze in proportion to how fast the pointer moves over it, with the red and blue channels pulled apart along the direction of travel. It settles back to sharp when the pointer slows.
npx shadcn@latest add https://hyperblur.dev/r/hover-distort-image.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hover-distort-image.tsx.
import { HoverDistortImage } from "@/components/hyperblur/hover-distort-image"
<HoverDistortImage src="/photos/coast.jpg" title="Low tide" intensity={40} />| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | Image URL. Without it a drawn sunset scene is shown. | |
| title | string | "Low tide, Algarve" | Caption title and accessible name. |
| caption | string | "Frame 0412 · 35mm" | Small line under the title. |
| intensity | number | 34 | Largest displacement in SVG units at full speed. |
| split | number | 5 | Largest red and blue channel offset in SVG units. |
| autoPlay | boolean | true | Send a gentle distortion pulse every few seconds while nobody is hovering. The real pointer, a tap or keyboard focus takes over at once. |
| ratio | number | 0.62 | Height divided by width. |
| className | string | Extra classes on the root element. Other HTML attributes are forwarded too. |