🌈 Neat Gradients

Important

As of v0.7, Neat no longer depends on three.js. The rendering engine has been rewritten to use raw WebGL, drastically reducing the total install footprint. Zero external dependencies. If you are upgrading from a previous version, see the Migration Guide below.

🔄 Migrating from v0.6.x

Bundle size

1. Remove the three dependency

npm uninstall three @types/three

2. Remove mouse interaction config

3. No API changes

📦 Installation

npm install @firecms/neat

yarn add @firecms/neat

🚀 Quick Start

Basic Usage

import { NeatGradient } from "@firecms/neat";
const gradient = new NeatGradient({
 ref: document.getElementById("canvas"),
 colors: [
 { color: "#FF5772", enabled: true },
 { color: "#4CB4BB", enabled: true },
 { color: "#FFC600", enabled: true },
 { color: "#8B6AE6", enabled: true },
 { color: "#2E0EC7", enabled: true }
 ],
 speed: 4,
 waveAmplitude: 5,
 backgroundColor: "#003FFF",
 backgroundAlpha: 1
});
// Clean up when done (important for React, Vue, etc.)
gradient.destroy();

React Example

import { useEffect, useRef } from "react";
import { NeatGradient, NeatConfig } from "@firecms/neat";
function BackgroundGradient() {
 const canvasRef = useRef<HTMLCanvasElement>(null);
 const gradientRef = useRef<NeatGradient | null>(null);
 useEffect(() => {
 if (!canvasRef.current) return;
 gradientRef.current = new NeatGradient({
 ref: canvasRef.current,
 colors: [
 { color: "#FF5772", enabled: true },
 { color: "#4CB4BB", enabled: true },
 { color: "#FFC600", enabled: true }
 ],
 speed: 3,
 waveAmplitude: 5
 });
 return () => gradientRef.current?.destroy();
 }, []);
 return (
 <canvas
 ref={canvasRef}
 style={{
 position: "fixed",
 top: 0,
 left: 0,
 width: "100%",
 height: "100%",
 zIndex: -1
 }}
 />
 );
}

⚙️ Configuration API

Core Animation

Colors

{
 color: string; // Hex color (e.g., "#FF5772")
 enabled: boolean; // Toggle color on/off
 influence?: number; // Color strength (0-1, optional)
}

Visual Effects

Advanced Shaders & Post-Processing

Domain Warping

Vignette

Fresnel (Rim Glow)

Iridescence

Bloom (Fake Glow)

Chromatic Aberration

3D Geometries & Shapes

Camera Settings

Background

Performance

Scroll Integration

window.addEventListener("scroll", () => {
 gradient.yOffset = window.scrollY;
});

Flow Field (Distortion)

Procedural Texture Overlay

🛠️ API Methods

destroy()

gradient.destroy();

🎨 Dynamic Property Updates

// Animation
gradient.speed = 6;
gradient.waveAmplitude = 8;
// Colors
gradient.colors = [
 { color: "#FF0000", enabled: true },
 { color: "#00FF00", enabled: true }
];
// 3D Shape Geometries & Auto-Rotation
gradient.shapeType = "sphere";
gradient.shapeAutoRotateSpeedY = 1.5;
// Advanced Post-Processing Effects
gradient.iridescenceEnabled = true;
gradient.fresnelEnabled = true;
gradient.fresnelColor = "#FF0055";
// Effects
gradient.grainIntensity = 0.5;
// Texture
gradient.enableProceduralTexture = true;
gradient.textureEase = 0.7;

💡 Tips & Best Practices

Performance Optimization

Design Tips

Common Use Cases

{
 colors: [/* your brand colors */],
 speed: 3,
 waveAmplitude: 5,
 shadows: 2,
 highlights: 7,
 grainIntensity: 0.1
}

{
 colors: [/* muted pastels */],
 speed: 1,
 waveAmplitude: 2,
 colorBlending: 9,
 backgroundAlpha: 0.7
}

🎯 Advanced Features

Parallax Scrolling

const gradient = new NeatGradient({
 ref: canvas,
 colors: [/* ... */],
 yOffsetWaveMultiplier: 8, // Waves move faster
 yOffsetColorMultiplier: 4, // Colors move slower
 yOffsetFlowMultiplier: 6 // Flow in between
});
window.addEventListener("scroll", () => {
 gradient.yOffset = window.scrollY;
});

Texture Overlay Effects

{
 enableProceduralTexture: true,
 textureEase: 0.3, // More topographic
 textureVoidLikelihood: 0.3, // Fewer gaps
 textureBandDensity: 1.5, // Wider bands
 textureShapeTriangles: 30, // More shapes
 proceduralBackgroundColor: "#000033" // Dark voids
}

📖 TypeScript Support

import { NeatGradient, NeatConfig, NeatColor, NeatController } from "@firecms/neat";
const config: NeatConfig = {
 // ... fully typed config
};
const gradient: NeatController = new NeatGradient(config);

🛠️ How It Works

📄 License

Remove the NEAT Watermark

const gradient = new NeatGradient({
 ref: canvas,
 colors: [...],
 licenseKey: "NEAT-eyJ0eXBlI..." // Your license key
});

🙏 Credits

🐛 Issues & Contributing

🔗 Links