/opal-client

Tool to modify and download animated JSON files to be used with Lottie, built with React

Primary LanguageJavaScript

OPAL

Opal is a free web tool for creating fully customized animated JSON iconsets. This project was a collaboration with Hobbes to allow developers and designers to customize a set of animated icons. The icons were created in Adobe After Effects by Hobbes and exported as JSON using Bodymovin.

Features

  • Users can adjust the color (hue, saturation, & light) by adjusting input ranges or by entering a Hex code. Scale, stroke, & duration can also be adjusted
    • The Hex code will be translated to
  • These values are stored in state, and sent to the API
  • The API receives these values, validates them, and applies them to a copy of these files copied from a PostgreSQL database.
  • The files are returned to the client, packaged using JSZip and downloaded. The download includes a directory for Animated & Static icons.

Deployment

The frontend is hosted with Vercel. The backend API & Database are hosted with Heroku

Built With

  • React - The web framework used for the frontend
  • Express - The web framework used for the backend API
  • Lottie - Used to animate SVG icons
  • JSZip - Used to package JSON icons

Authors

  • Lucas Vocos - Web Developer - Github
  • Dan Stack - Motion Designer - Portfolio