Mesh Gradient
hotA Stripe-style liquid gradient: four colour centres orbit on Lissajous paths, blended in linear light through a two-stage domain warp. The pointer is a soft gravity well that drags the colours toward it.
webglpointergradientgrain6 files · 635 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/mesh-gradient.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs mesh-gradientUsage
import { MeshGradient } from "@/components/opus/backgrounds/mesh-gradient";
<MeshGradient colors={["#7c5cff", "#ff5ea8", "#22d3ee", "#0b1026"]} className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | — | Four hex colours; the last one tends to fill the edges. |
| warp | number | 1 | Domain-warp strength — 0 calm, 2 liquid. |
| grain | number | 0.06 | Animated film grain (0–0.2). |
| pull | number | 1 | Strength of the pointer’s gravity well. |
| speed | number | 1 | Time multiplier. 0 freezes the animation; the pointer stays live. |
| interactive | boolean | true | React to the pointer (tracked on window, so overlaid content never blocks it). |
| className | string | — | Classes for the wrapper. Use `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Optional content rendered above the canvas. |
Notes
- Renders with WebGL2 into a single full-screen triangle — no three.js, no textures, no dependencies.
- Pauses automatically when scrolled off-screen or when the tab is hidden; resumes on return.
prefers-reduced-motion: reducerenders one still frame and ignores the pointer.- A CSS gradient fallback paints instantly and stays if WebGL2 is unavailable.