What it is
Speed 4 against the maximum wave amplitude, with magenta, cyan, amber and violet. This is the most aggressive preset in the set and it does not sit quietly behind content. Turn the speed down to around 1.5 if you want the palette without the churn.
Good for
Splash screens, event pages, video backdrops.
Formula
#FF0069#00EAFF#FFB700#B26AE6#2E0EC7
| Colours | 5 |
|---|---|
| Speed | 4 |
| Wave amplitude | 10 |
| Saturation | 2 |
| Brightness | 1 |
| 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: "#FF0069", enabled: true },
{ color: "#00EAFF", enabled: true },
{ color: "#FFB700", enabled: true },
{ color: "#B26AE6", enabled: true },
{ color: "#2E0EC7", enabled: true },
],
speed: 4,
horizontalPressure: 3,
verticalPressure: 4,
waveFrequencyX: 10,
waveFrequencyY: 0,
waveAmplitude: 10,
shadows: 5,
highlights: 10,
colorBrightness: 1,
colorSaturation: 2,
wireframe: false,
colorBlending: 9,
backgroundColor: "#003FFF",
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: "#FF0069", enabled: true },
{ color: "#00EAFF", enabled: true },
{ color: "#FFB700", enabled: true },
{ color: "#B26AE6", enabled: true },
{ color: "#2E0EC7", enabled: true },
],
speed: 4,
horizontalPressure: 3,
verticalPressure: 4,
waveFrequencyX: 10,
waveFrequencyY: 0,
waveAmplitude: 10,
shadows: 5,
highlights: 10,
colorBrightness: 1,
colorSaturation: 2,
wireframe: false,
colorBlending: 9,
backgroundColor: "#003FFF",
backgroundAlpha: 1,
grainScale: 2,
grainSparsity: 0,
grainIntensity: 0.05,
grainSpeed: 1,
resolution: 0.5,
yOffsetWaveMultiplier: 8.5,
yOffsetColorMultiplier: 7.8,
yOffsetFlowMultiplier: 9,
enableProceduralTexture: false,
textureEase: 0.25,
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.
