What it is
Blues, cyan, white and mint at high speed with low amplitude. The white in the palette behaves like foam where shapes overlap. Fast but not chaotic, because the displacement stays shallow.
Good for
Travel, marine, sport, anything cool-toned and energetic.
Formula
#0055FF#00EAFF#FFFFFF#6AE6C8#0E55C7
| Colours | 5 |
|---|---|
| Speed | 4 |
| Wave amplitude | 2 |
| Saturation | 2 |
| Brightness | 1.05 |
| Grain | 2 |
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: "#0055FF", enabled: true },
{ color: "#00EAFF", enabled: true },
{ color: "#FFFFFF", enabled: true },
{ color: "#6AE6C8", enabled: true },
{ color: "#0E55C7", enabled: true },
],
speed: 4,
horizontalPressure: 3,
verticalPressure: 4,
waveFrequencyX: 4,
waveFrequencyY: 3,
waveAmplitude: 2,
shadows: 7,
highlights: 5,
colorBrightness: 1.05,
colorSaturation: 2,
wireframe: false,
colorBlending: 9,
backgroundColor: "#021337",
backgroundAlpha: 1,
resolution: 0.5,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0.05,
grainSpeed: 1
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#0055FF", enabled: true },
{ color: "#00EAFF", enabled: true },
{ color: "#FFFFFF", enabled: true },
{ color: "#6AE6C8", enabled: true },
{ color: "#0E55C7", enabled: true },
],
speed: 4,
horizontalPressure: 3,
verticalPressure: 4,
waveFrequencyX: 4,
waveFrequencyY: 3,
waveAmplitude: 2,
shadows: 7,
highlights: 5,
colorBrightness: 1.05,
colorSaturation: 2,
wireframe: false,
colorBlending: 9,
backgroundColor: "#021337",
backgroundAlpha: 1,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0.05,
grainSpeed: 1,
resolution: 0.5,
yOffset: 53839,
yOffsetWaveMultiplier: 8.8,
yOffsetColorMultiplier: 7.8,
yOffsetFlowMultiplier: 9,
flowDistortionA: 3.7,
flowDistortionB: 1.4,
flowScale: 2.9,
flowEase: 0.32,
flowEnabled: true,
enableProceduralTexture: false,
transparentTextureVoid: false,
textureVoidLikelihood: 0.27,
textureVoidWidthMin: 60,
textureVoidWidthMax: 420,
textureBandDensity: 1.2,
textureColorBlending: 0.06,
textureSeed: 333,
textureEase: 0.25,
proceduralBackgroundColor: "#0E0707",
textureShapeTriangles: 20,
textureShapeCircles: 15,
textureShapeBars: 15,
textureShapeSquiggles: 10,
domainWarpEnabled: true,
domainWarpIntensity: 0.65,
domainWarpScale: 6.6,
vignetteIntensity: 1,
vignetteRadius: 0.8,
fresnelEnabled: false,
fresnelPower: 2,
fresnelIntensity: 0.5,
fresnelColor: "#FFFFFF",
iridescenceEnabled: false,
iridescenceIntensity: 1,
iridescenceSpeed: 1,
bloomIntensity: 2.1,
bloomThreshold: 0.7,
chromaticAberration: 0.5,
shapeType: "sphere",
shapeRotationX: 0.21,
shapeRotationY: 0,
shapeRotationZ: 0.26,
shapeAutoRotateSpeedX: 4.2,
shapeAutoRotateSpeedY: 0,
sphereRadius: 25.5,
torusRadius: 15,
torusTube: 5,
cylinderRadius: 10,
cylinderHeight: 40,
planeBend: 0,
planeTwist: 0,
silhouetteFade: 0.29,
cylinderFade: 0.08,
ribbonFade: 0.05,
flatShading: false,
cameraLock: true,
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.
