Git Product home page Git Product logo

gradientlab's Introduction


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

gradientlab's People

Contributors

06b avatar enlyth avatar zachkirsch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

gradientlab's Issues

Copy button

It'd be awesome to have a button that copies the gradient to clipboard! 💖

Button height mismatch

Button height is a few pixels off on the ones with icons in the ButtonControls component.

Component Hierarchy

This project didn't really have a plan, so there is a flat hierarchy of Components since most of them were 'bolted on' so to speak.

It would be nice to re-evaluate the composition/hierarchy of React components and adjust to make the most sense.

Reset button

Settings needs a reset buttons which puts the application in the default state.

CSS needs cleanup

The CSS is quite messy at the moment and needs adjustments for the layout to work perfectly on both mobile and desktop devices.

UI is still usable while hidden

This is because the animations only modify opacity, need to display: none after they finish or overlay with higher z-index element which covers UI.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.