Updated: Grainient
By Steven Van ·
The rebuilt React background adds stripes, rings, poster edges and a satin sheen, and it now needs no extra dependencies.
React Bits has rebuilt its Grainient background, the flowing grainy gradient component, with richer colors, flowing waves and no extra dependencies.
Interaction
The gradient responds to the cursor. Users can drag the colors around or click to swirl them.
Visual options
The rebuilt component supports stripes, rings, crisp poster edges and a satin sheen.
Install
The component is available in JavaScript or TypeScript, with plain CSS or Tailwind. The TypeScript and Tailwind version installs with npx shadcn@latest add @react-bits/Grainient-TS-TW.
React Bits
An open-source collection of 200+ animated, interactive React components and micro-interactions.
View React Bits →