Pixel Liquid Background

Shaders 104

About

An interactive full-screen fluid simulation background with pixelation and dithering that reacts to cursor movement.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pixel Liquid Background to your project and fits it to your theme.

Code

How Pixel Liquid Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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}
    />
  );
}