Grainient
Free
A grainy gradient mesh of up to four colors that slowly morph, with a seed for stable compositions.
Golden hour
Customize
1
0.35
0.5
#ff784f
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/grainient.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/grainient.tsx.
Usage
import { Grainient } from "@/components/ui/grainient";
<section className="relative h-[600px]">
<Grainient colors={["#ff784f", "#ffc24a", "#e2552b", "#2d2824"]} seed={7} />
</section>Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#ff784f", "#ffc24a", "#e2552b", "#2d2824"] | Two to four hex colors that blend into each other. |
| speed | number | 1 | Morph speed multiplier. |
| grain | number | 0.35 | Film grain amount, from 0 to 1. |
| warp | number | 0.5 | How much the color fields bend and swirl, from 0 to 1. |
| seed | number | 1 | Any number. Each seed gives a different, stable composition. |
| mouseReact | boolean | true | Let the colors lean toward the pointer. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion