Turns out the performance bottleneck was actually rendering the gradients every frame, so they are now rendering to a buffer when the page loads once and that buffer is being rendered as an image every frame. No functionality has been changed; but it runs so much faster and is much more efficient on mobile devices.
Colormatic Website
This project uses SvelteKit along with TypeScript and Sass. It's configured for static site generation (SSG) and prerendering at compile time to create a simple static website for Nginx to serve, with very little client-side rendering (CSR).
The Colormatic website is developed with accordance to modern web standards, however a legacy website will be available in the future for older/less capable browsers.
To download the project, run:
git clone git@git.colormatic.org:ColormaticStudios/Colormatic-Website.git
cd Colormatic-Website
npm install
You can run the project locally with:
npm run dev
Or you can build the project for release with:
npm run build
After the project has been built, you can preview the release build with:
npm run preview
Before submitting a push or pull request, run:
npm run format
To format your code according to the project code format. Remember to never fight the formatter.
Bootstrap Icons are licensed under the MIT license.