Grainient

Grainy gradient swirls with soft wave distortion.

Default

Every prop is wired to the controls underneath. Props only update shader uniforms, so dragging a slider never rebuilds the canvas.

Demo Content

FeaturesAbout Sign up

New Creative Components

Grainy gradient colors with soft motion.

Get started Learn more

Customize

Color 1

Color 2

Color 3

Time Speed0.25

Color Balance0

Warp Strength1

Warp Frequency5

Warp Speed2

Warp Amplitude50

Blend Angle0

Blend Softness0.05

Rotation Amount500

Noise Scale2

Grain Amount0.1

Grain Scale2

Grain Animated

Contrast1.5

Gamma1

Saturation1

Center Offset X0

Center Offset Y0

Zoom0.9

API Reference

Grainient

Prop	Type	Default	Description
`color1`	`string`	`"#FF9FFC"`	Primary light color used in the gradient blend.
`color2`	`string`	`"#5227FF"`	Secondary accent color used in the gradient blend.
`color3`	`string`	`"#B497CF"`	Deep base color used in the gradient blend.
`timeSpeed`	`number`	`0.25`	Animation speed multiplier for the gradient motion.
`colorBalance`	`number`	`0.0`	Shifts the palette balance toward dark or lighter tones.
`warpStrength`	`number`	`1.0`	Strength of the wave warp distortion (0 = none).
`warpFrequency`	`number`	`5.0`	Frequency of the wave warp.
`warpSpeed`	`number`	`2.0`	Speed multiplier for the warp animation.
`warpAmplitude`	`number`	`50.0`	Base amplitude for the warp distortion.
`blendAngle`	`number`	`0.0`	Rotation angle for the color blend axis (degrees).
`blendSoftness`	`number`	`0.05`	Softens the blend edges between color layers.
`rotationAmount`	`number`	`500.0`	Rotation amount driven by noise.
`noiseScale`	`number`	`2.0`	Scales the noise frequency that drives rotation.
`grainAmount`	`number`	`0.1`	Amount of film grain applied to the gradient.
`grainScale`	`number`	`2.0`	Scale of the grain pattern.
`grainAnimated`	`boolean`	`false`	Animate grain over time.
`contrast`	`number`	`1.5`	Overall contrast applied to the final color.
`gamma`	`number`	`1.0`	Gamma correction for the final color.
`saturation`	`number`	`1.0`	Saturation amount for the final color.
`centerX`	`number`	`0.0`	Horizontal offset of the gradient center.
`centerY`	`number`	`0.0`	Vertical offset of the gradient center.
`zoom`	`number`	`0.9`	Zoom level for the gradient field.
`lightMode`	`boolean`	`false`	Renders the gradient as ink on a white background.

Accessibility

Keyboard shortcuts and ARIA behavior.

Purely decorative canvas. The loop pauses while the canvas is offscreen or the tab is hidden.

Gradient Waves Grid Distortion