What it is
The signature palette with the teal swapped for a bright sky blue, which shifts the whole thing from balanced to candy. Same speed and amplitude as Neat, so it is a drop-in alternative if the default reads too serious.
Good for
Consumer apps, playful brands, youth-facing products.
Formula
#FF5772#00B7FF#FFC600#8B6AE6#2E0EC7#FF9A9E
| Colours | 6 |
|---|---|
| Speed | 2.5 |
| Wave amplitude | 6 |
| Saturation | 7 |
| Brightness | 1 |
| Grain | 0 |
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: "#FF5772", enabled: true },
{ color: "#00B7FF", enabled: true },
{ color: "#FFC600", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#2E0EC7", enabled: true },
{ color: "#FF9A9E", enabled: true },
],
speed: 2.5,
horizontalPressure: 2,
verticalPressure: 4,
waveFrequencyX: 4,
waveFrequencyY: 4,
waveAmplitude: 6,
shadows: 1,
highlights: 5,
colorBrightness: 1,
colorSaturation: 7,
wireframe: false,
colorBlending: 4,
backgroundColor: "#FFC600",
backgroundAlpha: 1,
resolution: 0.65,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 1
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#FF5772", enabled: true },
{ color: "#00B7FF", enabled: true },
{ color: "#FFC600", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#2E0EC7", enabled: true },
{ color: "#FF9A9E", enabled: true },
],
speed: 2.5,
horizontalPressure: 2,
verticalPressure: 4,
waveFrequencyX: 4,
waveFrequencyY: 4,
waveAmplitude: 6,
shadows: 1,
highlights: 5,
colorBrightness: 1,
colorSaturation: 7,
wireframe: false,
colorBlending: 4,
backgroundColor: "#FFC600",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 1,
resolution: 0.65,
yOffset: 102390,
yOffsetWaveMultiplier: 4,
yOffsetColorMultiplier: 6.3,
yOffsetFlowMultiplier: 4,
flowDistortionA: 0,
flowDistortionB: 0,
flowScale: 1,
flowEase: 0,
flowEnabled: false,
enableProceduralTexture: false,
transparentTextureVoid: false,
textureVoidLikelihood: 0.45,
textureVoidWidthMin: 200,
textureVoidWidthMax: 486,
textureBandDensity: 2.15,
textureColorBlending: 0.01,
textureSeed: 333,
textureEase: 0.5,
proceduralBackgroundColor: "#000000",
textureShapeTriangles: 20,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
domainWarpEnabled: false,
domainWarpIntensity: 0,
domainWarpScale: 3,
vignetteIntensity: 0,
vignetteRadius: 0.8,
fresnelEnabled: true,
fresnelPower: 2,
fresnelIntensity: 0.6,
fresnelColor: "#F90707",
iridescenceEnabled: false,
iridescenceIntensity: 0.5,
iridescenceSpeed: 1,
bloomIntensity: 0,
bloomThreshold: 0.95,
chromaticAberration: 1,
shapeType: "sphere",
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: false,
cameraLock: false,
cameraX: 0,
cameraY: -12,
cameraZ: 0,
cameraRotationX: 0,
cameraRotationY: 0,
cameraRotationZ: 0,
cameraZoom: 4.4
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
