What is this?
I wished to easily “shake” an image (in the spirit of intensifying it) and couldn’t be bothered to do a second google search after finding image blurring makers instead.
Therefore, I made a new Astro project, and got to work. However, I did not want to use AI to make this, nor use a React/Vue. Why the heck would I need those?? I wanted a simple, straightforward GIF maker.
The reason I used Astro at all is because I didn’t know if I wanted image optimization on the fly, and knew the process for deployment already.
The rest of the project is “raw” CSS and JS (actually TS, because Astro). DOM interactions through .getElementById and the likes. The only thing that I did not code myself was the gif.js worker, which I have no guilt about as it was last updated 9 years ago and is all in JS.
Using TS in Astro for DOM manipulation implies that
const shakeIntensityInput = document.getElementById("shakeIntensity")
becomes
const shakeIntensityInput = document.getElementById("shakeIntensity") as HTMLInputElement;
I will be updating the site here and there, as there exist some flaws. Notably, I could/should batch process the frame writing to use less memory, and I must add an option to scale the images down to keep the shaky effect. At the moment, if you input a big (in width/height) image, the shakyness must be turned up.
Contact me if you wish to see a certain feature, and make sure to check out the website!