Components
An interactive full-screen fluid simulation background with pixelation and dithering that reacts to cursor movement.
Loading preview...
import {
PixelLiquidBg,
type PixelLiquidBgProps,
} from "@/components/ui/pixel-liquid-bg";
type PixelLiquidBgDemoProps = Pick<
PixelLiquidBgProps,
"pixelSize" | "resolution" | "mouseForce" | "cursorSize" | "autoDemo"
>;
export default function PixelLiquidBgDemo({
pixelSize,
resolution,
mouseForce,
cursorSize,
autoDemo,
}: PixelLiquidBgDemoProps) {
return (
<PixelLiquidBg
className="absolute inset-0 flex items-center justify-center"
pixelSize={pixelSize}
resolution={resolution}
mouseForce={mouseForce}
cursorSize={cursorSize}
autoDemo={autoDemo}
/>
);
}