Neat

Build awesome gradients for your website, using 3d shaders

3D
firecmsco/neatneat.camberi.com@firecms/neat

README

Neat gradients


Create awesome 3d gradients with this library based on three.js.

Check the demo and gradients editor to find your perfect config here:
https://neat.firecms.co/

Neat is released under the CC license, so you can use it for free in your
projects,
commercial or not. You can also modify it and redistribute it, but you must keep
the license and the credits.

If you want to remove the Camberi link, you can reach us at hello@firecms.co

Installation:


  1. ```
  2. yarn install @firecms/neat three.js
  3. ```

or

  1. ```
  2. npm install @firecms/neat three.js
  3. ```

Usage:


  1. ```typescript
  2. import { NeatConfig, NeatGradient } from "@firecms/neat";

  4. // Define your config
  5. export const config: NeatConfig = {
  6.     colors: [
  7.         {
  8.             color: "#FF5373",
  9.             enabled: true
  10.         },
  11.         {
  12.             color: "#FFC858",
  13.             enabled: true
  14.         },
  15.         {
  16.             color: "#17E7FF",
  17.             enabled: true
  18.         },
  19.         {
  20.             color: "#6D3BFF",
  21.             enabled: true
  22.         },
  23.         {
  24.             color: "#f5e1e5",
  25.             enabled: false
  26.         }
  27.     ],
  28.     speed: 4,
  29.     horizontalPressure: 4,
  30.     verticalPressure: 5,
  31.     waveFrequencyX: 2,
  32.     waveFrequencyY: 3,
  33.     waveAmplitude: 5,
  34.     shadows: 0,
  35.     highlights: 2,
  36.     saturation: 7,
  37.     wireframe: false,
  38.     colorBlending: 6,
  39.     backgroundColor: "#003FFF",
  40.     backgroundAlpha: 1
  41. };


  44. // define an element with id="gradient" in your html
  45. const neat = new NeatGradient({
  46.     ref: document.getElementById("gradient"),
  47.     ...config
  48. });

  50. // you can change the config at any time
  51. neat.speed = 6;

  53. // you can also destroy the gradient for cleanup
  54. // e.g. returning from a useEffect hook in React
  55. neat.destroy();
  56. ```

How it works


Neat is a three.js library that generates a 3d gradient based on a config
object.

It uses a custom WebGL shader to generate a 3D shape that morphs and changes
its color based on the config.

All the computations are done on the GPU, so it's very fast and efficient.