Fluid Dither Crossfade

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

22.5 KB
•
Updated on September 20, 2026
Active on Canvas Stage

Installation

Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-fluid-dither-crossfade

Usage

Code
import { FluidDitherCrossfade } from '@/components/spaceui/fluid-dither-crossfade'

export default function Example() {
  return (
    <FluidDitherCrossfade
      imageA="https://cdn.spaceui.one/atom/samples/image-0-f.png"
      imageB="https://cdn.spaceui.one/atom/samples/image-0-b.png"
      pixelRes={150}
      pixelEdgeRes={80}
      ditherGrid={20}
    />
  )
}

API Reference

PropTypeDefaultDescription
imageA
string
https://cdn.spaceui.one/atom/samples/image-0-f.pngInitial base texture URL
imageB
string
https://cdn.spaceui.one/atom/samples/image-0-b.pngRevealed target texture URL
bgColor
string
#0e0e0eCanvas background color
pixelRes
number
150Pixelation resolution for revealed texture
pixelEdgeRes
number
80Chunky pixel resolution for fluid ink boundary
ditherGrid
number
20Bayer 4x4 matrix grid sampling size
ditherEnabled
boolean
trueWhether ordered dithering is active
brushSize
number
0.64Radius of cursor fluid wave & ink stroke
distortionStrength
number
9.18Intensity of wave chromatic refraction
inkDissipation
number
0.926Speed at which revealed ink mask fades back
edgeThreshold
number
0.08Ink density threshold required to reveal image B

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 Distortion ImageMedia

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

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
Fluid Crossfade
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui