About
Animated mesh gradient shader background, ideal for hero sections and decorative elements.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mesh Gradient Shader to your project and fits it to your theme.
Code
How Mesh Gradient Shader is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
// Demo for the NLACE Mesh Gradient background component
import { MeshGradient } from "@/components/ui/mesh-gradient-shader";
const settings = {
speed: 10,
intensity: 2,
grain: 0.75,
};
export default function DemoOne(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div style={{ position: "relative", width: "100%", height: "100vh" }}>
<MeshGradient speed={s.speed} intensity={s.intensity} grain={s.grain} />
</div>
);
}