# Liquid Shader

> A WebGL shader of slow, folding liquid colour, like ink in water, with film grain and a swirl that follows the cursor.

Category: Backgrounds · MotionKit Plus · Updated 2026-10-23 · Live demo: https://motionkitui.com/components/liquid-shader

## When to use it

Premium heroes for AI, fintech, design and creative tools, and launch pages where the background should feel expensive.

## How it works

A fragment shader runs for every pixel on the GPU. It uses domain warping: fractal noise decides where to sample a second layer of noise, which decides where to sample a third, which gives the folds and tendrils of ink in water. The layers mix your three colours, a vignette darkens the middle and edges, and a touch of per-frame grain adds texture. It renders at about 60% resolution, because the shapes are soft, and stops off screen. The pointer twists the coordinates around itself for a gentle swirl.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/liquid-shader` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `colors` | `[string, string, string]` | `["#0E7C86", "#5FAEB4", "#A56D5B"]` | Body, middle and highlight colours. |
| `speed` | `number` | `1` | Flow speed. 0 holds it still. |
| `scale` | `number` | `1.6` | Zoom: lower gives larger, calmer shapes. |
| `intensity` | `number` | `0.85` | How strongly the colour shows, 0 to 1. |
| `grain` | `number` | `0.05` | Film grain, 0 to 0.15. |
| `interactive` | `boolean` | `true` | Swirl around the pointer. |
| `children` | `ReactNode` |  | Your content, layered above. |

## Accessibility

- **Keyboard: Not applicable.** Decorative, nothing to focus.
- **Screen readers: Pass.** The canvas is hidden from assistive tech; only your content is read.
- **Reduced motion: Pass.** With reduced motion on, it renders one still frame. It also stops rendering off screen.
- **Colour contrast: Pass.** A vignette darkens the middle, so ivory text there measures 7.4:1 or better at the default intensity. Higher intensity brightens it.