Organic liquid mesh gradient shader background blending orbiting particle clusters through a high-radius Gaussian blur diffusion filter.
pnpm dlx shadcn@latest add @spaceui/components-shader-liquid-mesh-blurimport { LiquidMeshBlur } from '@/components/shader/liquid-mesh-blur'
export default function SpaceUI() {
return (
<div className="relative h-96 w-full overflow-hidden rounded-2xl">
<LiquidMeshBlur blur={60} speed={1} particleCount={70} interactive={true} />
</div>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | ['#7C5CFC', '#0EA5E9', '#FF6F59', '#B8EE3A', '#E040FB', '#06B6D4'] | Array of hex color strings for fluid clusters |
color1 .. color6 | string | — | Direct overrides for individual cluster colors |
blur | number | 60 | Gaussian blur diffusion radius in pixels |
speed | number | 1 | Orbit & drift velocity multiplier |
particleCount | number | 70 | Total number of animated fluid particles |
minSize | number | 130 | Minimum particle radius in pixels |
maxSize | number | 230 | Maximum particle radius in pixels |
contrast | number | 1.1 | Color contrast multiplier applied with blur filter |
interactive | boolean | true | Enables pointer tracking attraction & repulsion |
className | string | — | Optional container CSS class name |
style | React.CSSProperties | — | Inline styles for wrapper container |
children | React.ReactNode | — | Content overlaid cleanly on top of the liquid canvas |
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.
ViewAn interactive WebGL shader image component with cover UV mapping and dynamic cursor fluid-distortion ripples using data textures.
Viewpnpm dlx shadcn@latest add @spaceui/components-spaceui-uipnpm dlx shadcn@latest add @spaceui/components-shader-liquid-mesh-blur