Fluid Image
A photograph with a liquid gradient welded onto the cursor. One WebGL pass samples the image through UVs displaced by a curl-noise flow field, so the picture itself smears rather than a scrim sliding over it. Twelve trail points follow the pointer, each contributing a vortex spin perpendicular to its own travel direction plus a directional smudge, which is why a fast drag rips a spiral and a slow one only breathes. Inside the influence radius the image is hue-rotated in HSL and cross-faded into a four-stop gradient warped by the same field, while the four stops drift around the hue wheel on their own detuned periods. Pressing fires an expanding burst that runs independently of hover. The canvas is oversized past the frame so the swirl spills into the margin, and the loop parks itself entirely once the trail has decayed.
npx shadcn@latest add https://ui.aryank.space/r/fluid-image.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 |
|---|---|---|---|
| image | string | built-in gradient | Texture URL. Requested with crossOrigin so a same-origin path that redirects to a CDN still uploads to WebGL. |
| objectFit | "cover" | "contain" | "fill" | "cover" | Applied in the shader against the padded canvas, not by CSS. |
| showGradient | boolean | true | Off keeps the liquid displacement and drops the colour overlay and hue shift. |
| radius / strength / distortion | number | 0.4 / 0.9 / 0.4 | Influence size, overall intensity, and how far the flow field pushes the sample UVs. |
| hueShift / colorCycle | number | 0.5 / 0.05 | Hue rotation inside the influence area, and the rate the four stops drift around the wheel. |
| speed / persistence / pointerSmooth | number | 0.4 / 0.97 / 0.08 | Noise time scale, trail retention per frame, and pointer follow easing. All three are frame-rate normalised to a 60fps baseline. |
| quality | "high" | "low" | "high" | Low compiles a cheaper shader: 6 trail points, 2 FBM octaves, no curl noise, single-pass gradient. |
| maxDpr / overflowPadding | number | 1.75 / 100 | Pixel-ratio ceiling, and how far past the frame the canvas bleeds so the swirl can escape. |
| fadeIn / fadeInDuration | boolean / number | true / 0.6 | Fades the canvas up once the texture has decoded. |
presettexttropical, ocean, sunset, neon, forest, monochrome, or custom.
customColorstext1 to 6 colours, resampled onto the shader's four gradient stops.
radiussliderSize of the pointer's influence area.
distortionsliderHow hard the flow field warps the image.
persistencesliderHow long the trail holds before it decays.
