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