Create stunning, animated 3D gradients with hardware-accelerated WebGL performance.

✨ Try the Interactive Editor ✨

Design your perfect gradient with our visual editor, featuring 20+ presets and real-time preview. Export the config and use it in your project instantly.

If you're upgrading from a previous version that used three.js, here's what changed:

npm uninstall three @types/three

Neat now ships with its own lightweight WebGL renderer — no external 3D library needed.

The mouseDistortionStrength, mouseDistortionRadius, mouseDecayRate, and mouseDarken properties have been removed. You can safely delete them from your config objects — they will be ignored.

All other configuration properties, methods (destroy, downloadAsPNG), and dynamic property setters work exactly the same. Your existing configs from the editor remain fully compatible.

npm install @firecms/neat

or

yarn add @firecms/neat

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();

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
            }}
        />
    );
}

Color Object:

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

Example: Parallax Scrolling

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

Cleans up the WebGL context, event listeners, and removes any injected DOM elements. Call this when the component unmounts to prevent memory leaks (essential for React, Vue, etc.).

gradient.destroy();

Triggers a browser download of the current frame as a PNG image.

• filename: Optional string for the output file (defaults to "neat.png").

gradient.downloadAsPNG("my-custom-gradient.png");

Records the canvas animation and saves it as a high-quality video file (MP4 or WebM depending on browser codec support) with a subtle watermark. Returns a stop function to end recording early.

• durationMs: Duration of the recording in milliseconds (default: 5000).
• filename: Output file name (without extension, default: "neat.firecms.co").
• width: Output video width in pixels (default: current canvas width).
• height: Output video height in pixels (default: current canvas height).
• format: Preferred format 'mp4' or 'webm' (default: 'mp4').
• onProgress: Callback triggered with progress value between 0 and 1.
• onComplete: Callback triggered when recording successfully finishes.

const stopRecording = gradient.recordVideo({
    durationMs: 8000,
    filename: "neat-gradient-animation",
    format: "mp4",
    onProgress: (progress) => {
        console.log(`Recording progress: ${Math.round(progress * 100)}%`);
    },
    onComplete: () => {
        console.log("Recording complete!");
    }
});

// To stop recording early:
// stopRecording();

All properties can be updated in real-time:

// 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;

1. Lower resolution for better FPS:

   resolution: 0.5  // Half resolution = ~4x faster

2. Disable features you don't need:

   speed: 0,              // Static gradient
   grainIntensity: 0,     // No grain effect
   flowEnabled: false,    // No flow distortion

3. Use fewer colors:

   • 3-4 colors = best performance
   • 6 colors = more complex but slower

• Subtle animations: speed: 2-3, waveAmplitude: 3-5
• Dramatic effects: speed: 5-8, waveAmplitude: 8-10
• Smooth blending: Higher colorBlending values (7-10)
• Sharp contrasts: Lower colorBlending values (3-5)

Hero Background:

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

Subtle Page Background:

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

Create depth by making different elements move at different speeds:

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;
});

Add complex patterns over your gradient:

{
    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
}

Full TypeScript definitions included:

import { NeatGradient, NeatConfig, NeatColor, NeatController } from "@firecms/neat";

const config: NeatConfig = {
    // ... fully typed config
};

const gradient: NeatController = new NeatGradient(config);

Neat uses custom WebGL shaders to render dynamic 3D gradients entirely on the GPU:

1. Mesh Generation: Creates a subdivided plane geometry
2. Vertex Shader: Displaces vertices to create waves using Perlin noise
3. Fragment Shader: Blends colors, applies flow fields, lighting, and effects
4. Hardware Acceleration: All computations run on the GPU for smooth 60fps animations

The result is a performant, beautiful gradient that can run on any modern device.

Neat is released under the MIT License + The Commons Clause.

You can:

• ✅ Use freely in personal projects
• ✅ Use freely in commercial projects (e.g. SaaS landing pages, company websites)
• ✅ Modify and redistribute (with attribution)
• ✅ Use in open-source projects

You CANNOT:

• ❌ Sell the software
• ❌ Include it in a paid template or theme builder that you sell
• ❌ Offer the software as a paid service

For commercial projects without attribution, become a sponsor and contact us at hello@firecms.co for a license key.

Created by FireCMS with ❤️

Found a bug or have a feature request?

• Issues: GitHub Issues
• Discussions: GitHub Discussions

• 🌐 Website & Editor
• 📦 npm Package
• 💻 GitHub Repository
• 💬 Discord Community

Made with ✨ by the FireCMS team