What it is
The same maximum wave amplitude as Flame but at a quarter of the speed, which turns frantic into languid. The pop palette — watermelon, turquoise, gold, violet — stays legible because the shapes hold still long enough to read.
Good for
Playful product pages, app onboarding, marketing sites with personality.
Formula
#FB5066#36CCD6#FFC600#8B6AE6#2E0EC7#FF9A9E
| Colours | 6 |
|---|---|
| Speed | 1 |
| Wave amplitude | 10 |
| Saturation | 1 |
| Brightness | 1.05 |
| 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: "#FB5066", enabled: true },
{ color: "#36CCD6", enabled: true },
{ color: "#FFC600", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#2E0EC7", enabled: true },
{ color: "#FF9A9E", enabled: true },
],
speed: 1,
horizontalPressure: 3,
verticalPressure: 3,
waveFrequencyX: 3,
waveFrequencyY: 5,
waveAmplitude: 10,
shadows: 2,
highlights: 6,
colorBrightness: 1.05,
colorSaturation: 1,
wireframe: false,
colorBlending: 3,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
resolution: 0.05,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 2.4
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#FB5066", enabled: true },
{ color: "#36CCD6", enabled: true },
{ color: "#FFC600", enabled: true },
{ color: "#8B6AE6", enabled: true },
{ color: "#2E0EC7", enabled: true },
{ color: "#FF9A9E", enabled: true },
],
speed: 1,
horizontalPressure: 3,
verticalPressure: 3,
waveFrequencyX: 3,
waveFrequencyY: 5,
waveAmplitude: 10,
shadows: 2,
highlights: 6,
colorBrightness: 1.05,
colorSaturation: 1,
wireframe: false,
colorBlending: 3,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
grainScale: 0,
grainSparsity: 0,
grainIntensity: 0,
grainSpeed: 2.4,
resolution: 0.05,
yOffset: 18063.64,
yOffsetWaveMultiplier: 7.2,
yOffsetColorMultiplier: 6.8,
yOffsetFlowMultiplier: 7.7,
flowDistortionA: 0.4,
flowDistortionB: 2.6,
flowScale: 1.9,
flowEase: 0.94,
flowEnabled: true,
enableProceduralTexture: true,
transparentTextureVoid: false,
textureVoidLikelihood: 0.59,
textureVoidWidthMin: 120,
textureVoidWidthMax: 330,
textureBandDensity: 0.1,
textureColorBlending: 0,
textureSeed: 478,
textureEase: 0.86,
proceduralBackgroundColor: "#003FFF",
textureShapeTriangles: 51,
textureShapeCircles: 0,
textureShapeBars: 15,
textureShapeSquiggles: 0,
domainWarpEnabled: false,
domainWarpIntensity: 0,
domainWarpScale: 3,
vignetteIntensity: 0,
vignetteRadius: 0.8,
fresnelEnabled: false,
fresnelPower: 2,
fresnelIntensity: 0.5,
fresnelColor: "#FFFFFF",
iridescenceEnabled: false,
iridescenceIntensity: 0.5,
iridescenceSpeed: 1,
bloomIntensity: 0,
bloomThreshold: 0.7,
chromaticAberration: 0,
shapeType: "ribbon",
shapeRotationX: 0,
shapeRotationY: 0,
shapeRotationZ: 0,
shapeAutoRotateSpeedX: 0,
shapeAutoRotateSpeedY: 0,
sphereRadius: 30,
torusRadius: 15,
torusTube: 5,
cylinderRadius: 10,
cylinderHeight: 40,
planeBend: -0.7,
planeTwist: 1,
silhouetteFade: 0,
cylinderFade: 0.08,
ribbonFade: 0,
flatShading: true,
cameraLock: false,
cameraX: 0,
cameraY: -9.5,
cameraZ: 0,
cameraRotationX: 0.83,
cameraRotationY: 0.48,
cameraRotationZ: 0,
cameraZoom: 2.05
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
