Installation
Usage
import { MeshGradient } from "@/components/motionx/mesh-gradient";Basic usage
<div className="h-screen w-full">
<MeshGradient>
<h1 className="text-4xl font-bold text-foreground">Your Content</h1>
</MeshGradient>
</div>Custom colors
<MeshGradient
colors={[
"rgba(251, 146, 60, 0.5)",
"rgba(244, 63, 94, 0.5)",
"rgba(168, 85, 247, 0.45)",
"rgba(56, 189, 248, 0.5)",
]}
speed="slow"
>
<h1 className="text-foreground text-4xl font-bold">Sunset Mesh</h1>
</MeshGradient>Interactive mode
<MeshGradient interactive intensity={0.9}>
<p className="text-foreground">Blobs follow your cursor</p>
</MeshGradient>Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Container CSS classes |
colors | string[] | 4 curated vals | 3–6 CSS color values for the gradient blobs |
speed | "slow" | "medium" | "fast" | "medium" | Animation speed preset |
intensity | number | 0.8 | Blur intensity 0–1 (higher = softer blending) |
interactive | boolean | false | Enable mouse-following parallax on blobs |
children | ReactNode | — | Content rendered on top of the gradient |
style | CSSProperties | — | Additional inline styles on the container |
Tip: For the best visual result, use 4–5 colors with moderate alpha (0.4–0.6). Too many fully opaque blobs can muddy the blending.