Fluid Crossfade

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

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

Installation

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

Usage

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

export default function Example() {
  return (
    <FluidCrossfade
      imageA="https://cdn.spaceui.one/atom/samples/image-1.png"
      imageB="https://cdn.spaceui.one/atom/samples/image-2.png"
      aspectRatio={16 / 9}
      ditherGrid={3.0}
    />
  )
}

API Reference

PropTypeDefaultDescription
imageA
string
—Initial default texture URL
imageB
string
—Hover/transition texture URL
ditherGrid
number
3.0Scale of the Bayer 4x4 dithering pattern
pixelGridSize
number
240Resolution of pixel quantization
refractionStrength
number
0.85Power of fluid wave refraction on the image
aspectRatio
number
16 / 9Aspect ratio of the canvas

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
Heat ShadeShader

WebGPU fbm heat field with ember and hot tints along a moving boundary.

View
Paper ShaderShader

Paper Shaders WebGL2 canvas driven by a fragment shader and live uniforms.

View
Fluid Distortion Image
Fluid Dither Crossfade
pnpm dlx shadcn@latest add @spaceui/components-spaceui-ui