Browse components
Ripple Distortion
An image that ripples like a water surface wherever the cursor passes, with a hint of chromatic split. WebGL.
Move your cursor across the water
Installation
npx shadcn@latest add @glint-ui/ripple-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/ripple-distortion.json
Usage
import { RippleDistortion } from "@/components/ui/ripple-distortion";
<RippleDistortion src="/lake.jpg" alt="A mountain lake" className="h-96 w-full rounded-3xl" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | — | Image URL. Must be CORS-enabled. |
| alt | string | — | Accessible description of the image. |
| strength | number | 8 | Peak displacement in px. |
| speed | number | 260 | Px per second the rings travel. |
| wavelength | number | 34 | Px between wave crests. |
| lifetime | number | 2.5 | Seconds before a ripple dies out. |
| className | string | — | Extra classes for the root element. |