Gradient Mesh
NewPremiumMulti-point animated mesh gradient that adapts to the active direction. Supports interactive mouse tracking.
backgroundgradientmeshinteractivedirection-aware
Installation
Terminalbash
npx motioncraft add gradient-meshUsage
gradient-mesh.tsxtsx
import { GradientMesh } from "@/components/backgrounds/gradient-mesh";
<GradientMesh interactive speed={0.8} className="h-screen" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| points | MeshPoint[] | — | Custom gradient control points |
| speed | number | 0.5 | Animation speed multiplier |
| blur | number | 80 | Blur radius in pixels |
| interactive | boolean | false | Enable mouse interaction |
| className | string | — | Additional CSS classes |
Related Components
Aurora Background
Animated aurora borealis gradient background with configurable colors and speed.
Gradient Blur
Blurred gradient orbs with configurable colors for atmospheric backgrounds.
Infinite Grid
NewPerspective grid that scrolls infinitely with direction-aware coloring and edge fading.
Grid Background
Subtle grid pattern background using SVG for crisp rendering at any scale.