GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → i-break-codes → fuze

i-break-codes / fuze

Licence: GPL-2.0 license
A simple CSS Gradient Animator tool built with Vue and Vuex.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects
Dockerfile
14818 projects

Labels

cssdesignvuejstoolcss-animationsjavascript-toolsgradients

Projects that are alternatives of or similar to fuze

Chat-Bot
Chatbot – is a computer program that simulates a natural human conversation. Users communicate with a chatbot via the chat interface or by voice, like how they would talk to a real person.
Stars: ✭ 26 (-63.38%)
Mutual labels:  css-animations, javascript-tools
SwiftGradients
Useful extensions for UIViews and CALayer classes to add beautiful color gradients.
Stars: ✭ 15 (-78.87%)
Mutual labels:  gradients
aprendendo-css
Vários desenhos feitos com CSS e SCSS (e as vezes um pouco de JavaScript)
Stars: ✭ 56 (-21.13%)
Mutual labels:  css-animations
animusjs
🎆 AnimusJS is the solution for combine JS and CSS animations.
Stars: ✭ 42 (-40.85%)
Mutual labels:  css-animations
inline.js
Live CSS Helpers with Javascript
Stars: ✭ 36 (-49.3%)
Mutual labels:  javascript-tools
ejscript
Embedthis Ejscript
Stars: ✭ 58 (-18.31%)
Mutual labels:  javascript-tools
scrapman
Retrieve real (with Javascript executed) HTML code from an URL, ultra fast and supports multiple parallel loading of webs
Stars: ✭ 21 (-70.42%)
Mutual labels:  javascript-tools
Greylock
📊 Simple and lightweight data visualization library.
Stars: ✭ 17 (-76.06%)
Mutual labels:  javascript-tools
vov
✨ vov.css animations for shiny
Stars: ✭ 23 (-67.61%)
Mutual labels:  css-animations
Landing-Page-Animation
Landing page animation made using CSS
Stars: ✭ 45 (-36.62%)
Mutual labels:  css-animations
GradientProgressView
一个简单的进度条控件
Stars: ✭ 15 (-78.87%)
Mutual labels:  gradients
ppo
A super small and useful utils library for JavaScript.
Stars: ✭ 15 (-78.87%)
Mutual labels:  javascript-tools
Development-attention-point
工作中遇到的坑、需要注意的地方和一些总结
Stars: ✭ 13 (-81.69%)
Mutual labels:  javascript-tools
functorch
functorch is JAX-like composable function transforms for PyTorch.
Stars: ✭ 1,107 (+1459.15%)
Mutual labels:  gradients
hypercolor
A curated collection of beautiful premade gradients using default colors from the Tailwind palette as well as a selection of custom color gradients.
Stars: ✭ 187 (+163.38%)
Mutual labels:  gradients
twly
Wanna get DRY? Static analysis tool for detecting repeat code.
Stars: ✭ 42 (-40.85%)
Mutual labels:  javascript-tools
javascript
in this project, I will add Javascript functions from Basics to Advanced with design patterns
Stars: ✭ 41 (-42.25%)
Mutual labels:  javascript-tools
getify
A utility to grab nested values from objects.
Stars: ✭ 12 (-83.1%)
Mutual labels:  javascript-tools
web-animation-club
CSS controlled animations with transitionEnd, onTransitionEnd, animationend, onAnimationEnd events and frame throwing. Tiny javascript library with cross-browser methods to handle css animation/transition callbacks and event loop frame throwing. 📚🖥️📱
Stars: ✭ 52 (-26.76%)
Mutual labels:  css-animations
js-unit-testing-interview-questions
No description or website provided.
Stars: ✭ 29 (-59.15%)
Mutual labels:  javascript-tools
View All Similar Projects ➔

Fuze - CSS Gradient Animator Banner

CSS Gradient Animator Tool

Travis (.org) GitHub GitHub (Pre-)Release Date GitHub issues Depfu GitHub last commit

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

Fuze - CSS Gradient Animator Movie

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

an 👽release

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].