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 20, 2026
Active on Canvas Stage

Installation

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

Usage

Code
import { FluidDistortionImage } from '@/components/spaceui/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

Fluid Dither CrossfadeMedia

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

View
Pixel Reveal ImageMedia

A WebGL image reveal component with dynamic pixel matrix wave and customizable neon accent border on scroll.

View
Velocity Hover PreviewMedia

An interactive list component projecting a floating WebGL preview with inertial momentum mesh-warping and pixel block dissolve crossfading.

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