Library

Gradient Mesh Hero

Gradient Mesh Hero

Full-screen hero with animated gradient mesh blobs, grain texture overlay, and staggered text entrance. The colored blobs slowly drift and pulse.

herogradientmeshanimated

Installation

bash
# Copy gradient-mesh-hero.tsx to your project
cp components/ui/gradient-mesh-hero.tsx your-project/components/ui/gradient-mesh-hero.tsx

How to use

tsx
import { GradientMeshHero } from "@/components/ui/gradient-mesh-hero";
tsx
<GradientMeshHero
  heading={<>Build something<br /><span className="text-violet-300">beautiful</span></>}
  subheading="An animated gradient mesh hero section"
  colors={["#4f46e5", "#7c3aed", "#ec4899", "#06b6d4"]}
>
  <button className="px-6 py-3 bg-white text-black rounded-full">Get Started</button>
</GradientMeshHero>

Dependencies

framer-motion

Exports

GradientMeshHero

File

components/ui/gradient-mesh-hero.tsx
Preview
Build something
extraordinary

An animated gradient mesh hero with drifting color blobs and grain texture.

Made with