What it is
Speed 0.15 — effectively a still image that changes if you leave the tab open. Bronze, khaki, clay and olive with a grain pass give it a canvas texture. Worth using when you want the depth of a gradient without any perceived animation cost.
Good for
Portfolios, photography sites, anywhere motion would feel cheap.
Formula
#BB7338#C4B36E#C9817A#7A863F
| Colours | 4 |
|---|---|
| Speed | 0.15 |
| Wave amplitude | 4.2 |
| Saturation | 0 |
| Brightness | 0.95 |
| Grain | 3 |
Use this preset
Install the package and pass the config straight to the constructor. These are the values that shape this preset; everything else stays at its default.
npm install @firecms/neatimport { NeatGradient } from "@firecms/neat";
const gradient = new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#BB7338", enabled: true },
{ color: "#C4B36E", enabled: true },
{ color: "#C9817A", enabled: true },
{ color: "#7A863F", enabled: true },
],
speed: 0.15,
horizontalPressure: 4.2,
verticalPressure: 6.25,
waveFrequencyX: 4.88,
waveFrequencyY: 4.17,
waveAmplitude: 4.2,
shadows: 4,
highlights: 6.69,
colorBrightness: 0.95,
colorSaturation: 0,
wireframe: false,
colorBlending: 3.44,
backgroundColor: "#0F0C09",
backgroundAlpha: 1,
resolution: 0.4,
grainScale: 3,
grainSparsity: 0,
grainIntensity: 0.73,
grainSpeed: 0.11
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#BB7338", enabled: true },
{ color: "#C4B36E", enabled: true },
{ color: "#C9817A", enabled: true },
{ color: "#7A863F", enabled: true },
{ color: "#E1D0C3", enabled: false },
{ color: "#FFFFFF", enabled: false },
],
speed: 0.15,
horizontalPressure: 4.2,
verticalPressure: 6.25,
waveFrequencyX: 4.88,
waveFrequencyY: 4.17,
waveAmplitude: 4.2,
shadows: 4,
highlights: 6.69,
colorBrightness: 0.95,
colorSaturation: 0,
wireframe: false,
colorBlending: 3.44,
backgroundColor: "#0F0C09",
backgroundAlpha: 1,
grainScale: 3,
grainSparsity: 0,
grainIntensity: 0.73,
grainSpeed: 0.11,
resolution: 0.4,
yOffset: 38551.5,
yOffsetWaveMultiplier: 4.63,
yOffsetColorMultiplier: 6.4,
yOffsetFlowMultiplier: 4.44,
flowDistortionA: 1.9,
flowDistortionB: 1.33,
flowScale: 2.64,
flowEase: 0.28,
flowEnabled: false,
enableProceduralTexture: true,
transparentTextureVoid: true,
textureVoidLikelihood: 0,
textureVoidWidthMin: 20,
textureVoidWidthMax: 150,
textureBandDensity: 3,
textureColorBlending: 0.46,
textureSeed: 1693,
textureEase: 0.73,
proceduralBackgroundColor: "#0F0C09",
textureShapeTriangles: 0,
textureShapeCircles: 48,
textureShapeBars: 0,
textureShapeSquiggles: 0,
domainWarpEnabled: true,
domainWarpIntensity: 0.48,
domainWarpScale: 3.22,
vignetteIntensity: 0.1,
vignetteRadius: 0.35,
fresnelEnabled: true,
fresnelPower: 2.6,
fresnelIntensity: 0.1,
fresnelColor: "#BB7338",
iridescenceEnabled: false,
iridescenceIntensity: 0.35,
iridescenceSpeed: 1.52,
bloomIntensity: 0,
bloomThreshold: 0.71,
chromaticAberration: 0.5,
shapeType: "plane",
shapeRotationX: 0,
shapeRotationY: 0,
shapeRotationZ: 0,
shapeAutoRotateSpeedX: 0,
shapeAutoRotateSpeedY: 0,
sphereRadius: 15,
torusRadius: 15,
torusTube: 5,
cylinderRadius: 10,
cylinderHeight: 40,
planeBend: 0,
planeTwist: 0,
silhouetteFade: 0.25,
cylinderFade: 0.08,
ribbonFade: 0.05,
flatShading: true,
cameraLock: false,
cameraX: 0,
cameraY: 0,
cameraZ: 0,
cameraRotationX: 0,
cameraRotationY: 0,
cameraRotationZ: 0,
cameraZoom: 1
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
