A WebGL shader of slow, folding liquid colour, like ink in water, with film grain and a swirl that follows the cursor.
Fluid by design
Customize
Usage
import { LiquidShader } from "@/components/motionkit/liquid-shader";
<LiquidShader
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</LiquidShader>Motion
The exact curves this component runs, plotted with Motion's own maths.
Flow
Runs on its own
Swirl
Pointer moves
Premium heroes for AI, fintech, design and creative tools, and launch pages where the background should feel expensive.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Nothing beyond React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/liquid-shader. It saves the file to components/motionkit and installs its dependencies.
Liquid Shader is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, it renders one still frame. It also stops rendering off screen.
The component keeps a still CSS gradient in the same colours behind the canvas, so the area never shows as blank.
Fluid by design
Customize
Usage
import { LiquidShader } from "@/components/motionkit/liquid-shader";
<LiquidShader
className="h-[32rem] rounded-3xl"
>
<h1>Your hero</h1>
</LiquidShader>Motion
The exact curves this component runs, plotted with Motion's own maths.
Flow
Runs on its own
Swirl
Pointer moves
The live preview is free to explore. Plus unlocks the source for Liquid Shader and every other premium component.