Pixel Liquid Background

A full Navier-Stokes fluid simulation background with pixelation, Bayer dithering, film-grain noise, and auto-demo mode. Reacts to cursor movement.

Installation

Usage

import { PixelLiquidBg } from "@/components/unlumen-ui/components/backgrounds/pixel-liquid-bg";

<PixelLiquidBg className="w-full h-full" />;

With custom colors and children rendered on top:

<PixelLiquidBg
  darkPalette={["#000000", "#1a0030", "#6600ff", "#cc88ff"]}
  lightPalette={["#ffffff", "#e8d5ff", "#aa55ff", "#7700ff"]}
  pixelSize={12}
>
  <div className="flex items-center justify-center h-full">
    <h1>Hello world</h1>
  </div>
</PixelLiquidBg>

File Structure

pixel-liquid-bg.tsx

API Reference

PixelLiquidBg

Prop	Type	Default
`darkPalette?`	`string[]`	`["#000000", "#2a0020", "#8c0f60", "#e8227a", "#ff85b3"]`
`lightPalette?`	`string[]`	`["#ffffff", "#FD96E5", "#F36AC3", "#FE4396", "#ff85b3"]`
`pixelSize?`	`number`	`18`
`resolution?`	`number`	`0.4`
`mouseForce?`	`number`	`8`
`cursorSize?`	`number`	`110`
`autoDemo?`	`boolean`	`true`
`children?`	`React.ReactNode`	-

Notes

Requires Three.js — this component creates a full WebGL context under the hood. It's ~1000 lines of GLSL shaders + simulation code. Bundle size is significant.
The simulation runs at a fraction of the canvas resolution (default resolution: 0.4). Lower values = better performance, less detail. For mobile, consider 0.2–0.3.
autoDemo drives the fluid automatically when the cursor has been idle for ~1.2 seconds. An internal AutoDriver picks random targets and moves smoothly between them.
The component listens to the dark class on <html> via a MutationObserver and swaps between darkPalette / lightPalette in real time — no remount needed on theme change.
Palette colors are written into a DataTexture with LinearFilter — the shader interpolates between stops based on fluid velocity magnitude. More stops = smoother gradient.
A Bayer 4×4 dithering matrix is applied in the output shader to break up color banding. Film-grain noise is added on top for texture.
pixelSize controls the block size of the pixelation post-process. Larger values = more retro/chunky look.
The canvas element is prepended to the container div. children are rendered in a z-10 overlay — use it for text, buttons, or any content on top.
Mouse input works with both mousemove and touchmove/touchstart. Touch is passive for scroll performance.
On unmount, all WebGL resources (renderer, FBOs, textures, shaders) are properly disposed.

Credits

PixelLiquid Background is inspired by the original Liquid Ether components by React Bits.

Source Code

PixelLiquidBg is built on top of Three.js. The fluid simulation is a real-time Navier-Stokes solver running entirely on the GPU via WebGL fragment shaders. The visual style — pixelation, Bayer dithering, and film-grain — are applied as post-process passes in the output shader.