/GradientLab

React App for creating pretty gradients, intuitively

Primary LanguageJavaScriptMIT LicenseMIT


GradientLab
GradientLab

What Is This?ScreenshotsUsageMotivationDependenciesLicense

What is this?

GradientLab is a gradient picker made with React, aiming to let you choose aesthetically pleasing gradients quickly and intuitively.

Please note this is currently work in progress, and far from a final version.

Screenshots

Home

Settings

Usage

The UI should be quite intuitive and self explanatory. At the moment, there is no support for adjusting the location of the colours within the gradient.

You may define your own output function written in javascript, which will be evaluated and shown on the UI. The default output is a CSS linear gradient rule.

The application store and chroma.js objects are exposed in this function.

Motivation

This was made foremost as a learning experience, but I thought it turned out quite well so I decided to polish it up a bit and open source it.

At the moment, it focuses on LAB and LCH color spaces for interpolation, as they generally look the best to us aesthetically. See the following article for a bit more information:
https://www.vis4.net/blog/2011/12/avoid-equidistant-hsv-colors/

Dependencies

mobx-state-tree for state management
mst-react-router for routing
pose for animations
chroma.js for colour calculations
react-toastify for notifications
react-copy-to-clipboard
react-color

License

MIT