A WebGL shader component featuring interactive liquid cursor mask crossfade with dynamic trail, refraction, and parallax effects.
pnpm dlx shadcn@latest add @spaceui/components-shader-liquid-mask-crossfadeimport { LiquidMaskCrossfade } from '@/components/shader/liquid-mask-crossfade'
export default function Example() {
return (
<LiquidMaskCrossfade
imageA="https://cdn.spaceui.one/atom/samples/image-0-f.png"
imageB="https://cdn.spaceui.one/atom/samples/image-0-b.png"
radius={0.15}
distortion={0.18}
refraction={0.14}
/>
)
}| Prop | Type | Default | Description |
|---|---|---|---|
imageA | string | - | Outer base texture URL |
imageB | string | - | Inner revealed texture URL |
radius | number | 0.15 | Base radius of the liquid cursor droplet |
distortion | number | 0.18 | Liquid noise distortion intensity |
noiseScale | number | 5.7 | Scale of the FBM procedural noise |
speed | number | 0.1 | Animation speed of procedural liquid noise |
edgeSoftness | number | 0.06 | Softness and blur width of the mask boundary |
refraction | number | 0.14 | Strength of the chromatic refraction effect |
parallax | number | 0.05 | Depth parallax movement of the inner image |
mouseSmoothness | number | 0.06 | Cursor lerp smoothing factor |
trailLength | number | 1.08 | Length spacing of the cursor droplet trail |
trailPersistence | number | 0.65 | Persistence and drag memory of the trail |
trailTaper | number | 0.86 | Taper ratio from cursor head to trail tail |
idleDelay | number | 2.0 | Seconds of inactivity before fade out begins |
fadeDuration | number | 0.35 | Fade-in duration when pointer enters or moves |
fadeOutDuration | number | 0.7 | Fade-out duration when cursor goes idle |
aspectRatio | number | - | Optional aspect ratio override |
className | string | - | Additional Tailwind CSS classes |
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-mask-crossfade