![[Self promotion] Spring Physics in my Word Game? How I built the animation engine for Gram Jam](https://external-preview.redd.it/-dhofjcQAl1CZLgMMjFySEFgp1oKpFUDN-X5j5RJSXs.jpeg?width=140&height=88&auto=webp&s=a0bcb93b4361100cf1101db8e767dcd384421e8f)
I shared my word game Gram Jam here earlier this week and had a bunch of questions about how the animations were implemented. I decided to write an article about how it works, going in depth with code examples. I hope this helps anyone else trying to do advanced animations in Svelte without bringing in 3rd party libraries.
Game Title: Gram Jam
Playable Link: https://gramjam.app
Platform: web
Description: A daily word puzzle with multiple game modes that requires spatial reasoning and a strong vocabulary.
Free to play status: Free with optional subscription
Involvement: Solo developer
I have been developing Gram Jam for 4 years as a side hustle to my day job as a web developer, practicing my animation and using some fun language modeling and probability principles. I have three variants: The mini is a 5x5 daily puzzle, the Daily is the same but 6x6, and the Classic, which is an endless mode. I hope you love it as much as I do!
To cut to the chase: here's the game https://gramjam.app
This migration has been a year+ in the works. When Svelte 5 released I was eager to upgrade my v4 project and reap the benefits of runes. The class model for reactivity suited my game state management much better than stores, and I had a lot of cruft built up that I was excited to refactor.
The initial migration was smooth if a bit tedious, but then I started hitting issues when it came to some of the third party libraries. Tanstack Query hadn't released a Svelte adapter for runes, and I was hacking some unsightly wrappers based on random Github issue trackers. I was also relying on a 3rd party (now defunct) Sentry <-> Sveltekit <-> Cloudflare library to provide monitoring and alerting. The official Sentry repo had a stalled out thread that I didn't want to wait for a resolution to.
While waiting for some progress on those external libraries, I decided to tackle some performance tuning that had been on my back burner for a while. I wanted to migrate my game state from local storage to indexeddb. For the classic mode, most of my users play games that get up into the thousands or tens-of-thousands in points, which wouldn't be an issue for localstorage. But I have some power users who rack up millions of points, and every time they score, I'm appending the word to a growing list of words that I had to serialize/deserialize on disk. Switching to indexeddb allowed me to avoid repeated loading and saving of this giant data structure, and also gave me a nice pathway to implementing incremental cloud saving.
Life got busy and I took a break from the project to focus on professional development for a while, until a few months ago when I was laid off. Returning to this project, all the major dependencies I'd been blocked on finally had official Svelte 5 support and I eagerly integrated all these new versions. This week I finally published this update, and I'd love for you to check it out!
I'm trying to hunt down the Grail Games edition of Stephenson's Rocket with the extra maps.