Grain Gradient

Installation

npm i @paper-design/shaders-react

Code

import { GrainGradient } from '@paper-design/shaders-react';

<GrainGradient
  width={1280}
  height={720}
  colors={["#cc3333", "#cc9933", "#99cc33", "#33cc33"]}
  colorBack="#000000"
  softness={0.5}
  intensity={0.5}
  noise={0.25}
  shape="corners"
  speed={1}
/>

Shader Props

NameDescriptionTypeValues
colorsUp to 7 colors used in the gradientstring[]Hex, RGB, or HSL color
colorBackBackground colorstringHex, RGB, or HSL color
softnessColor transition sharpness (0 = hard edge, 1 = smooth gradient)number0 to 1
intensityDistortion between color bandsnumber0 to 1
noiseGrainy noise overlaynumber0 to 1
shapeShape typeenum
| "wave" | "dots" | "truchet" | "corners" | "ripple" | "blob" | "sphere"

Common Props

NameDescriptionTypeValues
speedAnimation speednumber—
frameStarting animation framenumber—
scaleOverall zoom level of the graphicsnumber0.01 to 4
rotationOverall rotation angle of the graphicsnumber0 to 360
offsetXHorizontal offset of the graphics centernumber-1 to 1
offsetYVertical offset of the graphics centernumber-1 to 1
widthCSS width style of the shader elementnumber | string—
heightCSS height style of the shader elementnumber | string—
fitHow to fit the rendered shader into the canvas dimensionsenum
| "contain" | "cover"
worldWidthVirtual width of the graphic before it's scaled to fit the canvasnumber—
worldHeightVirtual height of the graphic before it's scaled to fit the canvasnumber—
originXReference point for positioning world width in the canvasnumber0 to 1
originYReference point for positioning world height in the canvasnumber0 to 1
minPixelRatioMinimum pixel ratio to use when rendering the shadernumber—
maxPixelCountMaximum pixel count that the shader may processnumber—

Description

Multi-color gradients with grainy, noise-textured distortion available in 7 animated abstract forms.