What it is
Essentially a two-colour gradient — electric yellow and deep violet, with pale mint as a hinge — at maximum wave amplitude. Very high contrast, and the least subtle palette here after Flame.
Good for
Bold brand statements, product launches, high-energy pages.
Formula
#F2FF00#6B00FF#D5ECEB
| Colours | 3 |
|---|---|
| Speed | 4 |
| Wave amplitude | 10 |
| Saturation | 0 |
| Brightness | 1 |
| Grain | 4 |
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: "#F2FF00", enabled: true },
{ color: "#6B00FF", enabled: true },
{ color: "#D5ECEB", enabled: true },
],
speed: 4,
horizontalPressure: 4,
verticalPressure: 5,
waveFrequencyX: 1,
waveFrequencyY: 2,
waveAmplitude: 10,
shadows: 4,
highlights: 7,
colorBrightness: 1,
colorSaturation: 0,
wireframe: false,
colorBlending: 7,
backgroundColor: "#00A2FF",
backgroundAlpha: 1,
resolution: 0.65,
grainScale: 4,
grainSparsity: 0,
grainIntensity: 0.2,
grainSpeed: 2.2
});Every value, for an exact match
new NeatGradient({
ref: document.getElementById("gradient"),
colors: [
{ color: "#F2FF00", enabled: true },
{ color: "#6B00FF", enabled: true },
{ color: "#D5ECEB", enabled: true },
{ color: "#E4E4E4", enabled: false },
{ color: "#F6FFFF", enabled: false },
],
speed: 4,
horizontalPressure: 4,
verticalPressure: 5,
waveFrequencyX: 1,
waveFrequencyY: 2,
waveAmplitude: 10,
shadows: 4,
highlights: 7,
colorBrightness: 1,
colorSaturation: 0,
wireframe: false,
colorBlending: 7,
backgroundColor: "#00A2FF",
backgroundAlpha: 1,
grainScale: 4,
grainSparsity: 0,
grainIntensity: 0.2,
grainSpeed: 2.2,
resolution: 0.65,
yOffsetWaveMultiplier: 5,
yOffsetColorMultiplier: 4.5,
yOffsetFlowMultiplier: 5.5,
enableProceduralTexture: false,
textureEase: 0.48,
flowEnabled: true,
silhouetteFade: 0.25,
cylinderFade: 0.08,
ribbonFade: 0.05,
shapeType: "plane",
cameraLock: true
});Prefer a file? Open it in the editor and export a PNG still or an MP4 loop — see the gradient video guide.
