PRO

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.

Component
Saturated still that smears under the cursor.
Install
npx shadcn@latest add https://ui.aryank.space/r/fluid-image.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
imagestringbuilt-in gradientTexture 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.
showGradientbooleantrueOff keeps the liquid displacement and drops the colour overlay and hue shift.
radius / strength / distortionnumber0.4 / 0.9 / 0.4Influence size, overall intensity, and how far the flow field pushes the sample UVs.
hueShift / colorCyclenumber0.5 / 0.05Hue rotation inside the influence area, and the rate the four stops drift around the wheel.
speed / persistence / pointerSmoothnumber0.4 / 0.97 / 0.08Noise 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 / overflowPaddingnumber1.75 / 100Pixel-ratio ceiling, and how far past the frame the canvas bleeds so the swirl can escape.
fadeIn / fadeInDurationboolean / numbertrue / 0.6Fades the canvas up once the texture has decoded.
Customize
presettext

tropical, ocean, sunset, neon, forest, monochrome, or custom.

customColorstext

1 to 6 colours, resampled onto the shader's four gradient stops.

radiusslider

Size of the pointer's influence area.

distortionslider

How hard the flow field warps the image.

persistenceslider

How long the trail holds before it decays.

Dependencies
None.