Fluid Distortion Image

An interactive WebGL image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.

12.4 KB
•
Updated on September 23, 2026
Active on Canvas Stage

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-fluid-distortion-image
Bash
pnpm dlx shadcn@latest add @spaceui/components-shader-fluid-distortion-image

Usage

Code
import { FluidDistortionImage } from '@/components/spaceui/fluid-distortion-image'
import { FluidDistortionImage } from '@/components/shader/fluid-distortion-image'

export default function Example() {
  return (
    <FluidDistortionImage
      src="/images/art.jpg"
      alt="Interactive fluid artwork"
      aspectRatio={16 / 10}
      distortionIntensity={0.04}
    />
  )
}

API Reference

PropTypeDefaultDescription
src
string
—Image source URL
alt
string
Distorted surface imageAccessible image label
aspectRatio
number
16 / 10Fixed aspect ratio with object-cover mapping
distortionIntensity
number
0.03Strength of cursor ripple displacement
relaxationSpeed
number
0.94Decay rate of fluid velocity (0 to 1)
radius
number
0.18Radius of cursor impact area

Keep in mind

  • MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
  • Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
  • Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Related Components

CloudShader

Interactive volumetric cloud material rendered as a full-bleed shader surface.

View
Fluid CrossfadeShader

A dual-pass WebGL shader fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.

View
Fluid Dither CrossfadeShader

A dual-pass WebGL shader component featuring real-time Navier-Stokes fluid pressure simulation and Bayer 4x4 matrix ordered dithering crossfade.

View
Pixel Reveal Image
Fluid Crossfade
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui
pnpm dlx shadcn@latest add @spaceui/components-spaceui-fluid-distortion-image
pnpm dlx shadcn@latest add @spaceui/components-shader-fluid-distortion-image