||

Grainient

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Blend three colors into a warped, animated gradient with controllable film grain.

grainient-demo

Overview

Grainient creates a soft three-color field with independent controls for warping, rotation, tone, and grain. Use it when a product moment needs an organic background that still feels designed and controllable.

Installation
npm install honestui

Usage

 
import { Grainient } from "honestui/shaders"

<div className="h-80">
  <Grainient
    className="size-full"
    color1="#ffb257"
    color2="#d8d3c5"
    color3="#335c67"
    grainAmount={0.08}
  />
</div>

Accessibility

Use Grainient as decoration and keep readable content in a separate foreground layer. The component pauses while it is offscreen or the document is hidden; gate it behind your reduced-motion preference when continuous movement is not appropriate.

API Reference
PropTypeDefaultDescription
color1string"#FF9FFC"First gradient color.
color2string"#5227FF"Second gradient color.
color3string"#B497CF"Third gradient color.
timeSpeednumber0.25Overall animation speed.
warpStrengthnumber1Strength of the gradient deformation.
warpFrequencynumber5Frequency of the deformation.
warpSpeednumber2Movement speed of the deformation.
warpAmplitudenumber50Scale of the deformation.
blendAnglenumber0Direction of the color blend.
blendSoftnessnumber0.05Softness between color regions.
grainAmountnumber0.1Strength of the grain overlay.
grainScalenumber2Size of the grain texture.
grainAnimatedbooleanfalseMoves the grain over time.
contrastnumber1.5Output contrast.
gammanumber1Output gamma.
saturationnumber1Output saturation.
zoomnumber0.9Scale of the rendered field.
classNamestring–Class for sizing and positioning the container.