An interactive WebGL image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.
pnpm dlx shadcn@latest add @spaceui/components-spaceui-fluid-distortion-imagepnpm dlx shadcn@latest add @spaceui/components-shader-fluid-distortion-imageimport { 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}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Image source URL |
alt | string | Distorted surface image | Accessible image label |
aspectRatio | number | 16 / 10 | Fixed aspect ratio with object-cover mapping |
distortionIntensity | number | 0.03 | Strength of cursor ripple displacement |
relaxationSpeed | number | 0.94 | Decay rate of fluid velocity (0 to 1) |
radius | number | 0.18 | Radius of cursor impact area |
Interactive volumetric cloud material rendered as a full-bleed shader surface.
ViewA dual-pass WebGL shader fluid simulation with chromatic wave refraction and Bayer 4x4 matrix ordered dither crossfading.
ViewA dual-pass WebGL shader component featuring real-time Navier-Stokes fluid pressure simulation and Bayer 4x4 matrix ordered dithering crossfade.
Viewpnpm dlx shadcn@latest add @spaceui/components-spaceui-uipnpm dlx shadcn@latest add @spaceui/components-spaceui-fluid-distortion-imagepnpm dlx shadcn@latest add @spaceui/components-shader-fluid-distortion-image