A photo that ripples like water through an SVG turbulence filter. The warp swells on hover and focus and spikes when the slide changes.
Tidewater
Hover to ripple
npx shadcn@latest add https://hyperblur.dev/r/image-liquid-distort.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/image-liquid-distort.tsx.
import { ImageLiquidDistort } from "@/components/hyperblur/image-liquid-distort"
<ImageLiquidDistort images={["/a.jpg", "/b.jpg"]} hoverScale={70} />| Prop | Type | Default | Description |
|---|---|---|---|
| images | string[] | Image URLs. When empty or missing, four built-in gradient and SVG scenes are used. | |
| alt | string | "Photo" | Base accessible name. Each slide is announced as the alt text followed by its position, for example Photo 2 of 4. |
| width | number | string | "100%" | CSS width of the component. |
| height | number | string | CSS height. When omitted the height follows `aspect`. | |
| aspect | string | "16 / 10" | CSS aspect-ratio used when `height` is not set. |
| index | number | Controlled slide index. Pair with onChange. | |
| defaultIndex | number | 0 | Initial slide index when uncontrolled. |
| onChange | (index: number) => void | Called with the new slide index after every change, including automatic ones. | |
| autoPlay | boolean | true | Advance on a timer. It pauses on hover, keyboard focus and while off-screen, and stays off under reduced motion. |
| interval | number | 3600 | Milliseconds between automatic changes. |
| duration | number | 1100 | Crossfade duration in milliseconds. |
| idleScale | number | 12 | Resting displacement strength in pixels. |
| hoverScale | number | 54 | Extra displacement while the pointer or keyboard focus is on the image. |
| changeScale | number | 96 | Extra displacement that peaks when the slide changes and then settles. |
| accent | string | "#2f7bff" | Color of focus rings and highlights. |