Fuze Save

CSS Gradient Animator Tool

A simple CSS Gradient Animator tool powered by VueJS, VueX and SASS. Idea behind building this tool is to quickly generate the CSS Gradient Animations which will help the developer have a quick preview of the selected color palettes instantly. Also, the animation code can be quickly copied by pressing the c key.

Quick Preview

Live Demo

Features

• Select Color Palettes from the Color Picker
• Customize Gradient Angle and Speed of the Animation
• Copy code via Code Modal or by pressing c key
• Generate random Gradients by pressing the space bar key

Upcoming Features

• Save Gradients
• Download Gradients as a wallpaper
• Distraction free mode
• Color suggestions
• Customizable Background Position in Animation
• Offline Availability
• Re-order Selected color Palettes

Setup

Via Container:

Install docker-compose and run:

docker-compose up

Access app at http://localhost:8080

Manually:

The following setup assumes that you've Node installed on your system using NVM (preferred). App is supported on Node v12 LTS +

Install Node Modules

yarn install

Once you are done installing the node modules, you can start serving the App either by using Vue UI or by running the following command after navigating it to the directory.

yarn serve

You can also the linting of the app by running

yarn lint

In-order to customize further, you can refer to the Vue CLI configuration reference

You can refer to Libraries & Plugins for configuration info around the Color Picker & Range Slider configuration.

Libraries & Plugins

Following are the Libraries and Plugins used to develop the app

• Vue
• Vuex
• Pickr (Color Palette Plugin)
• Sliders (Range Slider Plugin)

an 👽release