Mesh gradientPro

• A hero, pricing card or sign-up panel that needs warmth and a little life.
• Replacing a static gradient image with something that moves slowly.

• Behind long text: keep it to short headlines and buttons.
• Many on one page: each one is its own GPU canvas.

Import it from @/components/ui/mesh-gradient after installing.

import { MeshGradient } from "@/components/ui/mesh-gradient";

export function Hero() {
  return (
    <MeshGradient className="rounded-3xl px-6 py-24 text-center text-white">
      <h1 className="text-5xl font-semibold">Ship the interface.</h1>
    </MeshGradient>
  );
}

• The canvas is decorative and hidden from assistive tech.
• Check contrast of text over your colours; white text needs the darker stops behind it.

• Drifts slowly and continuously.
• With reduced motion it renders one still frame.

• Fills its container and redraws on resize.

• Rendered below device resolution (the gradient is soft) and scaled up by CSS.
• Pauses off screen and in background tabs.
• Falls back to CSS radial gradients where WebGL isn't available.

• Order colours light to dark so the bottom stays readable under white text.
• Set className for size and rounding; children render on top.