So it turns out the performance improvements were completelty neglected because my code is bad. The buffer wasn't getting rendered to the canvas in the best way, and there were too many particles for smaller screens. I have now added a simple math equasion to the init function that decides how many particles are needed based on the display size. It still needs a lot of tweaking, and a more complex function is probably necessary for good results. I'm still trying to get this background to not suck and actually look good.
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.