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