Gradient Mesh

PreviousNext

Namespaced registries let you configure multiple resource sources in one project.

Installation

pnpm dlx shadcn@latest add https://aliimam.in/r/gradient-mesh.json

Usage

import { GradientMesh } from "@/components/gradient-mesh";
export default function Page() {
  return (
    <div>
      <GradientMesh
        colors={["#3b2a8d", "#aaa7d7", "#f75092"]}
        distortion={5}
        swirl={0.5}
        speed={1}
        scale={1}
        offsetX={0}
        offsetY={0}
        rotation={90}
        waveAmp={0.1}
        waveFreq={10}
        waveSpeed={0.2}
        grain={0.06}
      />
    </div>
  );
}