Make pixelated gradient GIFs with words
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
readme_assets
src
test
.eslintignore
.eslintrc.json
.gitignore
.jsdoc.config.json
LICENSE
README.md
buildconfig
package-lock.json
package.json
server.js
webpack.config.js

README.md

animated-pixel-gradients

Make pixelated gradient GIFs with words on them!

Screenshot of app running

Example GIF

Sample GIF with a purple and green gradient with the word "GRADIENT" in the middle

Live version on Glitch 🎏

Fork on GitHub

Install from GitHub

git clone https://github.com/noahleigh/animated-pixel-gradients.git
cd animated-pixel-gradients
npm install

Run locally

npm start

Open http://localhost:PORT/ in your browser with the port that it provided (e.g. http://localhost:8080/)

Libraries used

  • MainLoop.js - Runs the update-draw loop for the animation preview
  • gif.js - Renders the GIF file
  • opentype.js - Draws the text on the canvas
  • spectrum - Color picker for platforms that don't support <input type="color">

To Do

  • Develop Twitter bot feature